How to Create Your Own WordPress Shortcodes

Have you ever been faced with a situation where you have been required to manually add the same text in various posts or pages on your website???  If yes then ‘Shortcodes’ is what you are looking for. However, the full potential of shortcodes is not limited to just adding text to posts. You can insert a host of elements such as audio, video, gallery, buttons etc using shortcodes. Shortcodes can also be programmed to display content from a particular category of your blog or display the most recent posts of your blog. Shortcodes take WordPress to an entirely different level. A non-programmer is now empowered to insert elements which he would not have been able to do himself otherwise.

The Shortcode API which was introduced in  WordPress 2.5 came as a boon for WordPress users. Reason: It provided functions used to create code which allows users to add custom content to posts and pages. Shortcodes essentially detect a square bracket in your code and then replace the contents of the square bracket with other pre-specified content.

So if you want to display the following message below every post on your blog page.

Please let us know if this article was helpful for you. Contact Us for any other queries and we’ll be happy to help.

Simply insert the line below in your code at each point you want the content.

[feedback]

Of course, your aim is not achieved by solely writing [feedback] in your code! There is some coding too involved in the background. However, before I go on to give you a detailed explanation on how to achieve your goal, here are some default shortcodes that are included in WordPress 2.5

Word of Caution – Take a backup of files before you edit them to avoid any panic attacks later.

Three Easy Steps to Create Shortcodes

Note: The code for the two points above can be added in the theme’s or plugin’s functions.php file. Alternatively if there are many shortcodes to be added, you can create a separate php file which can then be included in the functions.php file. To include any php file in functions.php add the below line of code.

include yourfilename.php;

1. Create a callback function which returns the desired content every time a shortcode is called.
2. Use the add_shortcode function provided by the shortcode API to add the shortcode to WordPress.
3. Lastly use the shortcode as needed by adding [yourshortcode] to the content of your post or pages.

How to Create Self Closing Shortcodes

A self-closing shortcode is basically some content enclosed in a pair of square brackets. [feedback] is an example ofself-closing shortcode. Let us now create a shortcode [feedback] which will encourage users to give us a feedback for our posts. This shortcode can be included at the end of every post.

Create a call back function in functions.php, which returns a message encouraging users to provide their feedback.

function feedback_shortcode()

{

return ‘Please let us know if this article was helpful for you. <a href=”//wisdmlabs.com/contact-us/”>Contact Us</a> for any other queries and we’ll be happy to help.’;

}

Now add the shortcode to WordPress using the add_shortcode function in the functions.php file.

add_shortcode(‘feedback’,’feedback_shortcode’);

Now use the shortcode to display your message at the end of every post.

[feedback]

How to Create Enclosing Shortcodes

Enclosing Shortcodes come with a closing tag and looks something like [your-shortcode]your-content[/your-shortcode]. Creating enclosing shortcodes is much the same, except that it passes content to the $content parameter of the callback function. The demo below will help you get a better understanding of what I’m saying. Let’s assume for simplicity that we want to share our post on some social network, and we want to add a link for the same below every post. We can do that using enclosing shortcodes.

Create a callback function

function share_shortcode($atts, $content)

{

$post_url = get_permalink($post->ID);

$post_title = get_the_title($post->ID);

$share = ‘<a href=”http://facebook.com/home/?status=Read ‘ . $post_title . ‘ at ‘ . $post_url . ‘”>’. $content .'</a>’;

return $share;

}

Now add the shortcode to WordPress.

add_shortcode(share,’share_shortcode’);

This is the step where the usage of shortcode changes for the user. It should be used as below.

[share]Share on Facebook[/share]

Now the Question is Which Shortcode to Use Among the Above Two

Intrinsically the difference between enclosing and self-closing shortcodes is that, enclosing shortcodes allow you to pass dynamic content to the callback function. So, if you require to display content that is dynamic, or you need to send content to the callback function which will be processed, then use enclosing shortcode. Also if the amount of data to be added is large, then use enclosing shortcode for the sake of a clean code. If your requirement does not fall under any of the above categories, then feel free to use the shortcode of your choice.

How to Create Shortcodes with Attributes

Shortcodes with attributes allow you to pass additional data along with the name of the shortcode in the square brackets. For demonstration purposes I am going to create a short code which will display an image i.e my organization’s logo. The attributes we will be able to specify are the height and width of the image.

The callback function for this shortcode is as below.

function logo_shortcode($atts)

{

extract(shortcode_atts(array(

‘width’ => 200,

‘height’ => 200,

), $atts));

return ‘<img src=”//wisdmlabs.com/site/wp-content/uploads/2014/07/download.jpg” width=’. $width . ‘ height=’. $height.’>’;

}

Now add the shortcode to WordPress.

add_shortcode(logo,’logo_shortcode’);

While using the shortcode  you can provide the attributes as required, or simply just use the shortcode as is, and it will use the default dimensions provided within the callback function.

[logo height=50 width=50]

Or

[logo]

The image below displays how the content would look, once each type of shortcode is implemented.

So henceforth, do not waste your precious time by searching for a plugin which would be appropriate for your requirement. Simply follow the three basic steps and create any kind of shortcode. You can also read the following article for more on shortcodes.

• WordPress Tips & Tricks
• With tags: shortcode