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