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.

Recent Features

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

Incredible Demos

  • By
    CSS Kwicks

    One of the effects that made me excited about client side and JavaScript was the Kwicks effect.  Take a list of items and react to them accordingly when hovered.  Simple, sweet.  The effect was originally created with JavaScript but come five years later, our...

  • By
    CSS Vertical Centering

    Front-end developing is beautiful, and it's getting prettier by the day. Nowadays we got so many concepts, methodologies, good practices and whatnot to make our work stand out from the rest. Javascript (along with its countless third party libraries) and CSS have grown so big, helping...

Discussion

  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…

    Thanks,
    Amit

  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!
    http://supremethe.me/plugins/supreme-shortcodes/

  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!