WordPress Shortcodes
Do you know exactly how WordPress shortcodes work? They were introduced in WordPress v2.5, and allow you to do things like type ‘post_count' to find out in an instant the number of posts you've written on your blog, or ‘adsense' to display an AdSense ad.
They are designed to make your blogging time more productive. Let's look at how you can create and put to work shortcodes, and let you know some ready-to-use shortcodes to make your experience with WordPress that much better.
WordPress Shortcodes:
It's ridiculously easy to use WordPress Shortcodes. In order to use one, you can either make a new post or edit an existing post, switch to the HTML editor mode, and type a shortcode contained in brackets like
[showcase]
You can also use attributes with shortcodes, like this:
[showcase id=”2″]
Content can be embedded via shortcodes, like this:
[url href=”http://www.mywebsite.com”%5DMy Website[/url]
Shortcode API is the set of functions in WordPress 2.5 that handles shortcodes. As soon as you click the ‘Save' button on a post, the content is parsed and the shortcode API changes the shortcode into whatever function they're supposed to perform.
Simple WordPress Shortcodes Creation:
It really is easy to create shortcodes. Remember your coding classes in college? You know, when you created the “Hello, World!” string? Let's do that to demonstrate:
1. Either open the functions.php file in your theme, or create it if there isn't one.
2. Create your function. Paste the following into your functions.php file:
function hello() {
return ‘Hello, World!';
}
3. Turn this function into shortcode. After the hello() function you just created, paste the following:
add_shortcode(‘hw', ‘hello');
This first parameter names the shortcode, and the second is the function it is calling.
Now save and close the functions.php file.
4. Use the WordPress Shortcodes you just created by creating a new blog post or editing an existing one, switching to HTML mode, and typing
[hw]
That's it! Pretty easy, isn't it?
Advanced WordPress Shortcodes:
You can use WordPress Shortcodes with attributes, which is great for passing arguments to functions. Let's look at how you can display a URL using shortcode in a similar fashion as using BBCodes from forums like PHPBB and VBulletin.
1. Open the functions.php file and paste the following:
function myURL($atts, $content = null) {
extract(shortcode_atts(array(
“href” => ‘http://’
), $atts));
return ‘<a href=”‘.$href.'”>'.$content.'</a>';
}
2. Make the function into shortcode
add_shortcode(“url”, “myUrl”);
3. Done! Now, use the shortcode in your posts:
[url href=”http://www.wprecipes.com”%5DWordPress recipes[/url]
As soon as you save your post, the shortcode displays the link “WordPress recipes” that points to the associated site http://www.wprecipes .com .
Here are some great WordPress Shortcodes that are already ready to go, as originally presented by Smashing Magazine:
1. “Send to Twitter”
Paste the following into the functions.php file:
function twitt() {
return ‘<div id=”twitit><a href=”http://twitter.com/home?status=Currently reading ‘.get_permalink($post->ID).'” title=”Click to send this page to Twitter!” target=”_blank”>Share on Twitter</a></div>';
}add_shortcode(‘twitter', ‘twitt');
Then, head to a post, switch over to HTML mode, and type
[twitter]
and the shortcode will turn into a “Send to Twitter” link within your post.
2. “Subscribe to RSS”
Be sure when placing this code into the functions.php file that you use your own URL instead of the example URL provided.
function subscribeRss() {
return ‘<div class=”rss-box”><a href=”http://feeds.feedburner.com/mysitehere”>Enjoyed this post? Subscribe to my RSS feeds!</a></div>';
}add_shortcode(‘subscribe', subscribeRss');
Within your style.css file, you can customize the box style to anything you'd like, or you can use the following (just cut and paste it into your style.css file within your theme):
.rss-box{
background:#F2F8F2;
border:2px #D5E9D5 solid;
font-weight:bold;
padding:10px;
}
WordPress Shortcodes: Google AdSense Wherever You Want It
To embed AdSense anywhere within posts, create the following shortcode in your functions.php file, using your own AdSense code instead of the example JavaScript code provided below.
function showads() {
return ‘<div id=”adsense:><script type=”text/javascript”><!–
google_ad_client = “pub-XXXXXXXXXXXXXX”;
google_ad_slot = “466891978”;
google_ad_width = 468;
google_ad_height = 60;
//–>
</script><script type=:text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script></div>';
}add_shortcode(‘adsense', ‘showads');
Upon saving the php file, you can use the shortcode [adsense] anywhere within your posts and pages.
4. Embedded RSS Reader
Within the function.php file, paste the following:
include_once(ABSPATH.WPINC.'/rss.php');
function readRss($atts) {
extract(shortcode_atts(array(
“feed” => ‘http://’,
“num” => ‘1',
), $atts));return wp_rss($feed, $num);
}add_shortcode(‘rss', ‘readRss');
When you want to use this shortcode, type
[rss feed=”http://feeds.feedburner.com/mysite” num=”5″]
where the attribute ‘feed' is the embedded URL and ‘num' is the number of items to display.
5. Shortcode In Sidebar Widgets
WordPress doesn't allow shortcode in sidebar widgets per se. However, paste the following into your functions.php file:
add_filter(widget_text', ‘do_shortcode');
There you go! You just placed a filter on the widget_text() function in order to execute the do_shortcode() function.
Is it as easy as you thought?
Photo courtesy of webtreats via Flickr Creative Commons
