🤩50% Off over 600 tech courses and books

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?