Become Wordpress Professional - Your Ultimate Wordpress Guide

Thursday, 30 May 2013

How to Create Shortcodes for Wordpress Themes

Similar to a great number of useful functionality of wordpress, it also allows us to create our own custom shortcodes that can then be used inside the posts or pages.

For instance a shortcode [form] when placed inside the post editor and published will render a simple form upon output or another shortcode [info] inside a post or a page will render the author info. The main reason we use these shortcodes without just adding HTML is that it makes it quite easier, cleaner, understandable and it also helps people who do not know HTML very well to work with ease.

We need to register each shortcode before it is used inside wordpress posts or pages that is done in functions.php of the theme files.

Understanding How to Create a shortcode with the help of an example

First of all log into your wordpress admin panel.

Next navigate to Appearance > Editor. Now you will see a list of theme file names available on the right hand side. Click on functions.php.

Next we need to create a function for the shortcode that we want. Upon call, this function will render whatever it has inside it, as mentioned before it will surely have some HTML code.

So lets create a simple function for a shortcode [author] that will render a box with author name and description.

// function "authorinfo" that will render a box with author name and description. It accepts "$attr" as an argument.
function authorinfo($attr){
// Extract function extracts the array key and value pairs and stores them into their individual variables. For the array $attr that contains the author name and author description, if no arguments are passed, defaults take place otherwise the defaults are overwritten. 
extract( shortcode_atts( array(
  'name' => 'Default Author Name',
  'description' => 'This is default author description'), $atts));
// now that we have extracted the array we can use the name and text as variables such as "$name" and "$description".
// Returning the final output (a box with author name and description)
return '
Authorname: .$name.'\n'.'Description: '.$description.
'; }
Next we simply need to register this shortcode so that wordpress knows that by entering "[author]" in a post or a page, it will have to render the authorbox. Here is the code for that:
// The following code tells wordpress that for the shortcode "[author]", use the function authorinfo which is defined above.

Styling the Authorbox

Next you can easily style the box div with class name "authorbox" in your theme's style.css file.

Shortcode Usage inside posts or pages

Now you can use the shortcode "[author]" to generate an author box in a post or a page, but wait what if you want a different author name and description. For that, simply pass in the name and description values inside the shortcode such as: [author name="AUTHOR NAME HERE" description="DESCRIPTION HERE"]


Post a Comment

Please Avoid Spamming. Comments will be moderated before they are published.