Treehouse

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.

ydkjs-6.png

Recent Features

  • 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...

  • 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

  • MooTools, mediaboxAdvanced, and Mexico

    The lightbox is probably one of my favorite parts of the Web 2.0 revolution. No more having to open new windows (which can bog down your computer quite a bit) to see a larger image, video, etc. Instead, the item loads right into the...

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

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!

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