Create WordPress Shortcodes

By  on  

WordPress shortcodes are super handy, especially when handing off a WordPress-based website to a client. The alternative to using shortcodes is creating complicated templates, and even then, you cannot adequately replace what shortcodes can do. I recently needed to implement a new shortcode for the Mozilla Hacks blog and was happy to learn how simple the WordPress API makes creating new shortcodes! Let me show you how to create your own WordPress shortcodes!

First you start by creating a function within your theme's functions.php file. The function should return a string which replaces the shortcode within the rendered content. Your function can accept an $args argument which is a key=>value array of parameters passed in.

function my_shortcode_routine($args) {
	// $args = array('key1' => 'value1', 'key2' => 'value2')
	$return = '';

	// a bunch of logic and string-building here

	// return the result
	return $return;

Remember that your function shouldn't echo; a string must be returned.

After your function has been created, you can use WordPress' add_shortcode function to register the shortcode. The shortcode name function name doesn't need to match the shortcode:

// Add a shortcode called 'shortcode_name' that runs the 'my_shortcode_routine' function
add_shortcode('shortcode_name', 'my_shortcode_routine');

With the function created and the shortcode registered, now you can use said shortcode within your posts and pages:

[shortcode_name key1="value1" key2="value2"]

The shortcode system is positively beautiful; it's of large value to both seasoned devs and trained clients, and a prime example of why WordPress is deep and flexible platform.

Track.js Error Reporting

Upcoming Events

Recent Features

  • Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos


  1. Chris

    Thanks, that is easy and short codes always help.

  2. Love the new look of the site. I was here a while back and it looks like you polished it up a bit. I was just reading an article about how they are thinking of getting rid of shortcodes because technically they are just a a different way of writing code and doesn’t really fit well with the simplicity of everything else on the wordpress backend. It’s interesting to see what they will come up with, I just know they want to move in the right direction to keep up with squarespace and other growing products. WordPress is pretty good at keeping everything backwards compatible so no need to worry, but I am sure they have some awesome stuff coming in 2013.

  3. You top man!

  4. Thanks! easy to understand.

    Any idea how I can find the depth of shortcodes within shortcodes let’s say [country][company][employee][/employee][/company][country] If I want to know what is the depth of [company] for example…


  5. Great tutorial!

  6. Thanks for sharing! We used this model and after few months came up with our fisrt shortcodes plugin.
    Here is the demo if you like to see it. Tnx again!

  7. Thanks David, it works great!

  8. Hi

    I have created shortcode and shortcode output appearing at top of page content. How can i solve it?

    Thanks in advance.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!