How to create your own WordPress shortcode


Shortcodes are used by a large number of WordPress plugins and themes to introduce a lots of new feature to add in their website without editing a lots of code.

Shortcodes can be defined using Shortcode API and functions that you can define inside your theme’s functions.php file or the same you can define inside your own shortcode plugin.

WordPress Shortcode for WordPress

In this Shortcode creation tutorial for WordPress theme, we will generate a simple plugin that will generate command buttons for you.

In addition to creating your own shortcode, WordPress by default provide 5 default shortcodes for you, They are

  • Audio – Allows you to add audio files
  • Caption – Allow you to define captions for your contents, mostly used with images
  • Embed – This shortcode allow you to add different type of media with your wordpress site like audio, video , tweets etc.
  • Gallery – Perhaps this is the widely used shortcode to generate image galleries.
  • Video  – Allows you to add video files

Though these shortcode are available to all WordPress users and this functionality is embedded inside the WordPress core, rarely people use these shortcode in their production website.

Before we begin our own Shortcode plugin, You are requested to take backup of your WordPress website.

Creating a Basic WordPress ShortCode  Example

To give you a good understanding of how the WordPress Shortcode API works, let us start with a basic shortcode function.

Please remember that shortcodes should be created for content and functionality that you use frequently. The whole point of using shortcodes is to save someone time. If you are only going to use something once, there is not much point in creating a shortcode for it.

I used to write a lots of Premium themes and plugin review on my websites that needs download and demo that theme and plugin along with hosting recommendations.

So in this tutorial, We will generate a small shortcode, firstly on our theme and then we will port the same shortcode on a separate plugin.

To do this first of all you have to create a  unique function inside your functions.php file


// function to add shortcode function that will actually render your code
Function bn_shortcode_button() {
Return ‘This is my first shortcode’;
}
add_shortcode (‘bn_button’,’bn_shortcode_button’);

Allow me to dissect these program lines one by one. The first line is better known as comment that is only added here for other programmers.

Second line that start with function word  generate a function “bn_shortcode_button” and receive no parameters at all and return “This is my first shortcode” on the call of this function at any location.

Please remember it very clearly that every function must return something otherwise your shortcode will not be able to render anything, thus return is almost compulsory for every shortcode functions.

Now the next line

add_shortcode (‘bn_button’,’bn_shortcode_button’);

This generate a new shortcode for us with a shortcode name “bn_button” ie whenever we will write

[bn_shortcode]

WordPress will automatically replace this code with

“This is my first shortcode”.

I used a simple message in this example, however you could modify this to display many other things like You can create a shortcode to display Adsense or any other complicated thing.

Creating a Shortcode With Attributes

Shortcode attributes can expand the functionality of your shortcode a lot by allowing them to pass function arguments in your shortcode.

In below example I will show you how you can expand the functionality of your shortcode by passing parameter


Function bn_shortcode_button($attr){
$color = $attr[‘color’];
$color =’Background:red; color:’.$color .’;padding:8px 10px margin:10px 0px;display:inline-box;’;
return ‘<span style=”$color”> This is me  </span>’;
}

Now we will apply this in our shortcode like this

[bn_button  color=”red”]

Color will be passed in $attr array as a key and ‘red’ as its value the same we have received in a php variable $color and the same we have received using $attr[‘color’]  code.

Creating a Shortcode With Contents

Shortcodes with contents are the most common on WordPress themes and plugins so how we can do this in our own shortcode.

Now we want a shortcode to display text in  color using content like this

[bn_button color =”green”] Wallpaper Theme Demo [/bn_button]

And want result like this on the screen


// shortcode function with attribute and content
Function bn_shortcode_button($attr, $content){
$color = $attr[‘color’];
$color =’Background:red; color:’.$color .’;padding:8px 10px margin:10px 0px;display:inline-box;’;
return ‘<span style=”$color”> $content  </span>’;
}
add_shortcode (‘bn_button’,’bn_shortcode_button’);

Now check how we have adjusted the $content parameter in this return statement. Although this was a basic example of how attributes and contents work, it is easy to see how plugin developers can use the shortcode API to make complicated functions more user-friendly for users.

Overview on how to create WordPress Shortcodes in WordPress theme

If you will follow the exact steps listed in this tutorial, You will have the basic understanding of Shortcode development using WordPress Shortcode API and you can generate your own shortcode very easily.

Shortcodes are a great way to ease complicated tasks, Define some WordPress shortcodes for your own website.

3 Brilliant Comments - Join Discussion Now!

  1. Hey Rakesh,

    I have been working with the WordPress codex for a long time. It’s really important to have an idea about the basics.

    Shortcodes can be used anywhere. In most of the premium themes, you can find the shortcodes for the tooltip and many others.

    Thanks for sharing with us.
    ~Ravi

  2. You really made my life easy. I was looking for the solution regarding WordPress short codes, and above mentioned tips helps me to perform it precisely.

  3. nice post for wordpress user

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>