O'Reilly

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.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API,...

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

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!

Recently on David Walsh Blog

  • Access Mac Camera by Command Line

    With all of my recent command line tutorials, I've really gotten excited about the shell's simplicity and realized the true power of using the underlying technology of pretty UIs.  Since I work from home, I spend a lot of time on video calls, so when...

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...