WordPress Shortcodes

February 18th, 2011 at 12:31am Jason 96 views

Creating a Simple Shortcode

The thing to remember with shortcodes is that they’re very easy to create. If you know how to write a basic PHP function, then you already know how to create a WordPress shortcode. For our first one, let’s create the well-known “Hello, World” message.

1.Open the functions.php file in your theme. If the file doesn’t exists, create it.
2.First, we have to create a function to return the “Hello World” string. Paste this in your functions.php file:

function hello() {  
return 'Hello, World!';  
}

3.Now that we have a function, we have to turn it into a shortcode. Thanks to the add_shortcode() function, this is very easy to do. Paste this line after our hello() function, then save and close the functions.php file:

add_shortcode('hw', 'hello');

The first parameter is the shortcode name, and the second 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:

[hw]

You’re done! Of course, this is a very basic shortcode, but it is a good example of how easy it is to create one.

Creating Advanced Shortcodes

As mentioned, shortcodes can be used with attributes, which are very useful, for example, for passing arguments to functions. In this example, we’ll show you how to create a shortcode to display a URL, just as you would with the BBCodes that one uses on forums such as VBulletin and PHPBB.

1.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>';  
}

2.Let’s turn the function into a shortcode:

add_shortcode("url", "myUrl");

3.The shortcode is now created. You can use it on your posts and pages:

[url href="http://www.wprecipes.com"]WordPress recipes[/url]

When you save a post, the shortcode will display a link titled “WordPress recipes” and pointing to http://www.wprecipes.com.

Code explanation. To work properly, our shortcode function must handle two parameters: $atts and $content. $atts is the shortcode attribute(s). In this example, the attribute is called href and contains a link to a URL. $content is the content of the shortcode, embedded between the domain and sub-directory (i.e. between “www.example.com” and “/subdirectory”). As you can see from the code, we’ve given default values to $content and $atts.

Now that we know how to create and use shortcodes, let’s look at some killer ready-to-use shortcodes!

via: http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/

Entry Filed under: WordPress Tagged with: API Shortcode wordpress

Share This Post 丨 Subscribe 丨  Print This Post 丨 Save As PDF