This tutorial will take you through the process of creating, installing, and using simple and advanced shortcodes in your WordPress installation.
Shortcodes in WordPress serve to sanitize content that is entered into a postand protect the blog from XSS (cross-site scripting) attacks. Briefly, a shortcode is a special tag that you can enter into a post that gets replaced with different content when actually viewing the post on the website.
It looks like a descriptive bit of text wrapped in square brackets, which could be dropped into your WordPress post:
[showcase]
The shortcodes may have attributes or no attributes. A shortcode with attributes would look something like this:
[showcase id="4"]
Shortcodes can also embed content, as shown here:
[url href="http://www.info.template-help.com"]Template-Help[/url]
Creating a Simple Shortcode
1. Open the functions.php file in your theme directory (you can access it by going to Appearance -> Editor in your WordPress backend
and clicking on Theme Functions on the right.
2. Paste this in your functions.php file:
function hello() {
return 'Hello, World!';
}
3. Now you have to turn it into a shortcode. Paste this line after our welcome() function, then save and close the functions.php file (or click the “Update File” button at the bottom if you are doing this in your admin panel):
add_shortcode('hw', 'hello');
where the first parameter (‘wl) is the shortcode name, and the second (‘welcome) is the function to be called.
4. Now that the shortcode is created, we can use it in blog posts and on pages. To use it, simply switch the editor to HTML mode and type the following:
You’re done!
Creating an Advanced Shortcode
In this example, we’ll show you how to create a shortcode to display a URL.
Open your functions.php file. Paste the following function in it:
function myUrl($atts, $content = null) {
extract(shortcode_atts(array(
"href" => 'http://'
), $atts));
return '<a href="'.$href.'">'.$content.'</a>';
}
Let’s turn the function into a shortcode:
add_shortcode("url", "myUrl");
The shortcode is now created. You can use it on your posts and pages:
[url href="http://www.info.template-help.com"]Template-Help[/url]
When you save a post, the shortcode will display a link titled “Template-Help” and pointing to http://www.template-help.com.
To watch a demo movie on how to create the shortcuts, please click the button below.
WordPress. How to use shortcodes
For more information on creating shortcuts, feel free to check the following Shortcut Resources:
- Shortcode APIThe WordPress Codex page related to the shortcode API.
- WordPress 2.5 shortcodes Excellent shortcodes tutorial.
- WordPress shortcode generator The page is in French but provides a very useful and easy-to-use app to create shortcodes online.
- Using WordPress shortcode to create beautiful download boxes Another great use of shortcodes: creating fancy “Download” boxes for your blog.
- Easy way to advertise in WordPress using shortcodes Great resource to manage and insert advertising on your blog, brought to you by WpEngineer.
- Create a signature using WordPress shortcodes Really simple but really cool: a shortcode to display a graphic signature on your blog.
- How to: Use WordPress shortcodes with attributes Concise tutorial on using shortcode attributes.