Understanding and Using WordPress Shortcodes

by Ryan Cowles November 26th, 2012 

wordpress-shortcodes

If you have been using WordPress for some time, there is no doubt that you ran into a shortcode somewhere along the way. They were introduced in WordPress 2.5, and these little tools can allow you to easily extend WordPress' functionality. They are hooks that allow theme and plugin developers to create dynamic content that authors can then easily add into posts and pages.

For example, WordPress has the native gallery shortcode. When an author enters

into a post, all the associated images are displayed.

Note: While shortcodes can be extremely helpful, it can also be really easy to go overboard with them. When creating your own shortcode, ask yourself if it is really crucial to your theme or plugin to create one. Otherwise your theme/plugin can quickly become bloated.

Creating A Shortcode

Now that you have an idea about shortcodes, let's create one of our own. First, let's open up your theme's functions.php file. On a blank line, add in the following:


//Search Engine People Link
function sep_link( $atts ){
return 'Check out <a href="http://www.searchenginepeople.com/blog">Search Engine People</a>.';
}
add_shortcode( 'my-link', 'sep_link' );

Now, let's create a new post and see if this worked. In your post edit area, type in [my-link]. If you save the post and head on over to the Post Preview, you should see the link to Search Engine People right in your post. This is a very basic example, but it shows you the basics of what can be accomplished with shortcodes.

Allowing Shortcodes In Widgets

By default, shortcodes will not work in widgets. For example, if you enter a shortcode in a text widget it will just display the shortcode itself, and not the content that you want returned. To allow shortcodes in widgets, all you have to do is open up your theme's functions.php again and add the following filter:

add_filter('widget_text', 'do_shortcode');

Now you can use your shortcodes in your widgets!

Examples

So, now you can see how short codes work… but what can you actually do with them? Here are a few simple examples (just add them to your functions.php file):

Create a Shortcode Twitter Button

The following code will allow you to display a "Follow me" link wherever you put the [followme] shortcode:


// Replace YOUR_TWITTER_NAME
function twitter_button() {
return '"';
}
add_shortcode('followme', 'twitter_button');

Source: SpeckyBoy

Insert AdSense with a Shortcode

The following code will allow you to display a 468×60 AdSense unit wherever you place the [adsense] shortcode:

function showads() {
return '<script type="text/javascript"><!--
google_ad_client = "pub-YOUR_PUB_ID_HERE";
google_ad_slot = "YOUR_ADD_SLOT_HERE";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript">
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
';
}
add_shortcode('adsense', 'showads');

Note: Be sure to fill in your publisher ID and Ad Slot info. You can also use a different size ad by changing the width and height values.
Source: WP Recipes

Disable WordPress Auto Formatting Using Short Code

WordPress auto formatting can be a huge help – However, it can also cause headaches if it gets a little too ambitious. You can use a shortcode to display raw, unformatted text. Just add the following to your functions.php:

$new_content = '';
$pattern_full = '{(\[raw\].*?\[/raw\])}is';
$pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);

foreach ($pieces as $piece) {
if (preg_match($pattern_contents, $piece, $matches)) {
$new_content .= $matches[1];
} else {
$new_content .= wptexturize(wpautop($piece));
}
}

return $new_content;
}

remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');

add_filter('the_content', 'my_formatter', 99); ?>

Then all you have to do is wrap whatever text you want in between [raw] and [/raw] and WordPress' auto formatting will skip right over it.

Source: I&P Blog

Conclusion

This article just touches on the subject of shortcodes. After you master using these simple ones, you can really start to do some advanced stuff. For starters, you can see 20 examples of more advanced shortcodes at wp tuts+. However, remember to only use shortcodes when necessary. They can be a great tool, but they can also quickly become overused. Further reading: Shortcodes: Should They Be Done Differently?

Have you used shortcodes before in the past? If so, what for? And if not, what would you like to use them for?

References

WordPress Codex: Shortcode API
WP Recipes: How to save time by using WordPress shortcodes

If you liked this, you might also enjoy Helpful WordPress Code Snippets

Ryan Cowles

Ryan Cowles is a WordPress / Front End Developer living in Los Angeles, California. Along with a passion for building creative websites, he also enjoys photography, design, travel and the great outdoors. You can view his personal website by visiting http://ryanscowles.com. To see what he has been up to lately, check out his blog at Metacom Creative.

Ryan S. Cowles

You May Also Like

3 Responses to “Understanding and Using WordPress Shortcodes”

  1. Andy says:

    Thankyou so much for explaining how to get shortcodes into a widget… I have been wrestling with this for ages and I have finally (I hope) found a solution … off to try it now …

    Also a quick question (which may be an urban/wordpress myth) … the content within a shortcode, is that content recognised by the search engines??

    • Ryan Cowles says:

      Andy,

      I'm glad you were able to find the post helpful! Let me know how it works for you.

      In regards to the shortcodes and SEO, you shouldn't have any problems. The content of the shortcodes is delivered just like any other HTML, so the spiders will be able to read it. The only time you might notice a red flag is if you are using an SEO plugin in the WordPress backend — When editing a post, the shortcode isn't parsed, so your SEO plugin won't read it. But again, this is only the backend, so there shouldn't be any problems when the post is published. Did this clear it up?

      Thanks for reading,
      Ryan

  2. Nancy says:

    I am late to this game and just found your post. I am trying to understand shortcode and how to write it, or if I even need to. Is there info out there that would be helpful to a beginner? I have a personal blog and a company website(that I paid someone to set up) and every time I want these two sites to do something, someone says…just enter the shortcode.

    Ugh.