jump to navigation

How To Use and Implement WordPress Shortcodes May 28, 2011

Posted by Tournas Dimitrios in Wordpress - 3.

WordPress shortcode API is a powerful functionality which was introduced from version 2.5, it’s just a simple set of functions for creating macro codes in post content. If you’ve developed a Vbulletin forum before, you would have been familiar with the shortcode (something called BBCode) but the WordPress users maybe not . The most awesome thing with WordPress shortcodes is that you are able to create your own shortcodes and “call” them across your application with a simple directive like [gm] (the name is up to you )   . In this article, I would like to show you how to create and use shortcodes by a couple of practical examples .

First  , I have to mention that these configurations can only be implemented on a  hosted WordPress  account ( NOT on WordPress.com ) , as you must have access to some application files .

The two files that we must have access to are :

  1. functions.php  : This file is located in
  2. style.css : This file is located in

Let’s go straight to an practical example :

Open the functions.php file and paste the following code at the bottom :

function text() {
return 'Good morning from the shortcode example'; }
 add_shortcode('gm', 'text');

As you see in the code above, the first thing I do is create a function like any other WordPress functions, the function will return the text “Good morning ……” when called . Then I add the API call to register the shortcode handler . The first parameter is a name of the shortcode and the second parameter is the name of the function will be called (in my example the name is “text” ) .

How to use? When posting a new article, whenever you want to display the “Good morning …” text, switch the editor to HTML mode and type the following shortcode: [gm]

Let’s create a download button :

 functions.php file
function navTo($atts, $content = null) {
		"url" => ''
	), $atts));
	return '<a class="download" href="'.$url.'">'.$content.'</a>';
add_shortcode('linkbutton', 'navTo');
style.css file
.download {
display: inline-block;color:#fff;
background : -webkit-gradient(linear, left top, left bottom, from(#88c841), to(#73b338));
background : -moz-linear-gradient(center top, #88c841, #73b338);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 20px;
text-align: center;
-shadow: 0px 1px 0px #6c0909;

.download:hover {
background : -webkit-gradient(linear, left top, left bottom, from(#73b338), to(#88c841));
background : -moz-linear-gradient(center top, #73b338, #88c841);

Switch to HTML mode of an article and type the following shortcode :

[linkbutton url="http://www.google.com"]Visit Google search engine[/linkbutton]

See a picture of the final result :

WordPress shortcode is a way to centralize the code (DRY , don’t repeat yourself ) , so debugging and updating the code is very simple .

Links :


1. vans - October 26, 2011

Good job men! Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s