Understanding and Using 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 'Follow me"';
}
add_shortcode('followme', 'twitter_button');


Source: SpeckyBoy

Insert AdSense with a Shortcode

The following code will allow you to display a 468x60 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