Have you ever had a time when you wanted to add specialized content to your WordPress post or page, but weren't sure how? Perhaps you wanted to embed a Twitter widget or some content returned from some website or API. How can you easily add this type of content to your WordPress post? Fortunately, WordPress provides something called a shortcode to make this type of task extremely easy. This tutorial will walk you through the process of creating, installing, and using a shortcode in your WordPress installation. Let's start by looking at what a shortcode is.
In short, a shortcode is a special tag that you can enter in a post that is replaced with a different content when viewing the post on the website. If you have ever embedded a WordPress gallery on your blog, then you have already seen the embedded shortcode.
When you load a blog page with the [gallery] shortcode, WordPress replaces the [gallery] shortcode with all the code that actually displays a gallery of your images.
As you can see in the example above, a shortcode is similar to an HTML tag, but it's enclosed in square brackets instead of angle brackets. This code is replaced with other code when the page loads in a web browser. The really cool thing is that WordPress allows you to create your own custom shortcodes to display just about anything. You can use it to display a Youtube video, display your latest tweets, or even customize it however you like.
In case that doesn't make sense, let's look at an example. Let's say I want to run an AdSense ad inside my post. I could go into the HTML mode of the WordPress content editor and copy and paste the Adsense code block into it, but this would be tedious and potentially distracting with all the extra markup on my post. Also, if I wanted to change the ad unit, I would have to go back to each post to change it to the new one. An easier and more reliable way to add the Adsense block where I wanted would be to use an AdSense shortcode. The shortcode could look like this:
[adsense]
Looking at the post on your website, the shortcode would be replaced with the Adsense ad unit. So how to create this shortcode? Obviously, you need to tell WordPress to replace the shortcode in some way. Let's take a look at that next.
Fortunately, WordPress makes it pretty simple to make your own shortcodes, so we're actually going to implement the [adsense] shortcode. The first thing we need to do is define a function that generates the actual Adsense code. All of the following code will go in functions.php in your theme (it could also go in a separate plugin file). I have it? Ok, so let's see that function.
función get_adsense ($ atts) return '';
This function is pretty straightforward - it just returns my Google Adsense code as a string. Whatever this function returns is what my shortcode will be replaced with, so it could potentially have returned the html for a Twitter widget, or a list of its child posts, or anything else.
Now that we have a function that returns what we want, how do we connect it to a shortcode? Now this is where the WordPress API comes into play. Again, let's see how we do it and then explain what's going on. Here is the call to set up the AdSense shortcode.
add_shortcode ('adsense', 'get_adsense'); That's it! The first parameter passed is the name of the shortcode, so in our case, 'adsense' tells WordPress to create the [adsense] shortcode. The second parameter designates the function to be called when the new shortcode is found. Again, in our case, 'get_adsense' tells WordPress to replace [adsense] with the results of our get_adsense method.
Not so bad, right? Now that this is a very simple shortcode, WordPress allows you to do a lot more with your shortcodes, including adding parameters (perhaps you want to choose between AdSense blocks?). The complete API can be seen in the WordPress Codex.
This last part is simple, just add the [adsense] shortcode in the HTML or Visual views of the Posts or Pages content editor. That's it! You have created your first shortcode.
John Gadbois he is the co-owner and technical lead of Domain Superstar, a domain name tool site. He also runs CalculatorPro, a cool calculator site with all kinds of financial calculators. He enjoys learning and programming with Ruby on Rails, jQuery, WordPress, and PHP.