Tutorial To Create And Use A WordPress Shortcode

Shortcode is one of the useful features of WordPress, used to display additional content mainly in post or page. WordPress itself provides many shortcodes, and also gives a facility to create your own. You can make your plugins and themes easier to use with its help.

So what is shortcode?

It is like a short form of group of instructions and gets replaced by the original in visual mode.
In other word it is nothing more than a function which is registered by WordPress shortcode api for use.

It is look like an html tag but the difference is that it is enclosed by square brackets [].

Look at some Built-in shortcodes:

• [audio src=""]
• [caption ]<img src="url"> image caption[/caption]
• [embed ] youtube_url [/embed]
• [gallery ids=""]
• [video src=""]
• [playlist]

Use of shortcode is simple jut put it in the page or post and publish it.

Now, how can you create WordPress shortcode?

From a developer's perspective, it helps to add any special kind of content of your choice. So to create it refer to the following procedure:

Basic: 

It has three simple steps:

1. Create a function
2. Define that this function is a shortcode.
3. Initialize it. 

All the code will be added in functions file of active theme. Let's take a deep look on these steps.

In first step, we will create a function to get some output.

function example()
{
echo "Testing for new";
}

This function will simply show a sentence.

Now let's define that the above function is a shortcode. The name should be unique.

function register_shortcodes()
{
add_shortcode('my_first_example','example');
}

Then initialize it:

add_action('init','register_shortcodes');

That's it, you have created a WordPress shortcode , now use [my_first_shortcode] in your website's page or post to show the output of your function.

Advanced: 

So to make it more functional, only need to update your function with additional parameter and then use it in the shortcode. How? Let take the same function and add parameter.

function example($color)
{
extract(shortcode_atts(array(
      'color' => '',
   ), $attr));

$content="Test line";

 if($color="blue"){
$attr="<p style='color:#1565B2'>".$content." </p>";}
elseif($color="gray"){
$attr= "<p style='color:#333'>".$content." </p>";}
elseif($color="green"){
$attr= "<p style='color:#008400'>".$content." </p>";}
else{
 $attr= "<p>".$content." </p>";}
return attr;
}

Likewise you can add more parameters. Here you have seen that we have used two additional functions here, shortcode_atts() and extract(). First will append user's arguments with Inherent arguments and second one will extract them.

Now you can write shortcode with an option, like:

[my_first_shortcode color='green']

If you skip the option, it will take default value.

WordPress Shortcode Plugins:

So if you don't want to code, use plugins to create it. You can find a list of great plugins at WordPress plugins directory.

All in all, I have explained the WordPress shortcode with very basic examples to understand easily. Hopefully it will take you to the advanced level.