Short codes are special functions in the WordPress Platform that give your posts additional functionality. It’s just a matter of your creativity that can limit what you can do with short codes. With this tutorial, I’ll be teaching you the basics of WordPress Short Codes and we’ll be creating three specific and useful examples: A Twitter Short code, a Plurk Short code and a Facebook Short code.
Hit the jump for the start of our tutorial.
Login to your WordPress blog’s admin page, go to themes editor and open your theme’s functions.php. Let’s try adding a Hello World short code to our template:
//Let's define our Hello World code here:
function hello_world() {
return 'Hello, World!';
}
//Add the Hello World to the functions list
add_shortcode('hw', 'hello_world');
When you add [hw] to any of your blog posts, you’ll get:
Hello, World!
Simple right? Now let’s start the tutorial.
Custom Short codes
For people who want more functionality and customization for their themes, you can create your very own short code for use with social networking sites, here’s a few examples:
Twitter Short code for WordPress
function twitt() {
return '<div id="twitit"><a href="http://twitter.com/home?status=Reading @techiexplorer '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></div>';
}
//Add the Twitter to the functions list
add_shortcode('twitter', 'twitt');
When you add [twitter] to any of your blog post, you get something like this:
Plurk Short code for WordPress
function plurkk() {
return '<div id="plurkit"><a href="http://plurk.com/?qualifier=shares&status=Reading http://techiexplorer.com/?p='$post->ID' ('.get_the_title($post->ID)')" title="Click to send this page to Plurk!" target="_blank">Plurk This!</a></div>';
}
//Add the Twitter to the functions list
add_shortcode('plurk', 'plurkk');
When you add [plurk] to any of your blog post, you get something like this:
Facebook Short code for WordPress
Facebook as a special API just for sharing so we’ll use that instead of generating a link
function fbshare_script() {
return '<div class="fbshare"><script src="http://widgets.fbshare.me/files/fbshare.js"></script></div>';
}
//Add the Fbshare to the functions list add_shortcode( 'fbshare', 'fbshare_script' );
When you add [fbshare] to any of your blog post, you get something like this:
This was inspired by Smashing magazine’s article on WordPress shortcodes
