How to Create Your Own WordPress Shortcodes

    Craig Buckler
    Share

    WordPress doesn’t normally allow you to add PHP code to pages or posts. That’s for the best; you don’t want clients to discover the power of the unlink function! However, you can create custom functions which are executed when a shortcode is encountered within the post text.

    Simple shortcodes

    Shortcode functions can be added to plugin code or your theme’s functions.php file. If it’s the latter, I’d recommend creating a separate shortcodes.php file, then adding include('shortcodes.php'); to functions.php.

    Here’s a basic “Hello World” example:

    
    function HelloWorldShortcode() {
    	return '<p>Hello World!</p>';
    }
    add_shortcode('helloworld', 'HelloWorldShortcode');
    

    Enter [helloworld] somewhere within a page or post to output the result of the HelloWorldShortcode() function.

    Parameterized shortcodes

    The following shortcode function generates a page hierarchy sitemap. Three optional parameters can be passed: a title, the ID of the resulting ul list, and a depth value indicating the number of page navigation levels.

    
    function GenerateSitemap($params = array()) {
    
    	// default parameters
    	extract(shortcode_atts(array(
    		'title' => 'Site map',
    		'id' => 'sitemap',
    	    'depth' => 2
    	), $params));
    
    	// create sitemap
    	$sitemap = wp_list_pages("title_li=&depth=$depth&sort_column=menu_order&echo=0");
    	if ($sitemap != '') {
    		$sitemap =
    			($title == '' ? '' : "<h2>$title</h2>") .
    			'<ul' . ($id == '' ? '' : " id="$id"") . ">$sitemap</ul>";
    	}
    
    	return $sitemap;
    }
    add_shortcode('sitemap', 'GenerateSitemap');
    

    A custom sitemap can be added to any page using a shortcode such as [sitemap id='deepmap',depth=5].

    BB code shortcode

    The final way to add shortcodes uses [bbcode]BB code syntax[/bbcode]:

    
    function StyleText($params, $content = null) {
    
    	// default parameters
    	extract(shortcode_atts(array(
    		'style' => ''
    	), $params));
    
      return
    	'<span' .
    	($style == '' ? '' : " style="$style"") .
    	">$content</span>";
    }
    add_shortcode('format','StyleText');
    

    This function allows the author to embed CSS styles within their article, e.g. [format style="font-size:1.5em;color:#f00;">Important![/format]. Perhaps that’s not such a great idea!…

    Have you seen any interesting uses for shortcodes within WordPress projects?