How to create custom WordPress shortcode?

By Faruque Ahamed Mollick

WordPress shortcodes are one of the most useful features after it first introduced in version 2.5. We often find plugins available that provides one or multiple shortcodes that we can use in our posts and pages.

In this tutorial, I will teach you how you can create your own WordPress custom shortcode.

Creating a WordPress custom shortcode is quite easy. Here I am going to show you the basic idea so that you can also do it by yourself.



WordPress already provides us the shortcode API which you can use to create your own WordPress shortcode in an easy way. There is a set of functions that we can use to register and create our shortcode.

The WordPress add_shortcode function is used to register a shortcode handler.

Below is the syntax of add_shortcode function:

add_shortcode( 'custom_shortcode', 'custom_shortcode_handler' );

 

Basic WordPress custom shortcode

Now we are going to create our basic custom WordPress shortcode.

Below is our code:

function cs_custom_shortcode() {
   // content for our custom shortcode
   $shortcode_content = "This is content coming from shortcode function";
   return $shortcode_content;
}
// Register shortcode
add_shortcode('cs_shortcode_content', 'cs_custom_shortcode');

We can add the above code in our site-specific plugin or inside our theme’s function.php file.

After that, we can write our shortcode [cs_shortcode_content] inside our posts or pages and we will able to see the content we have inside our post or page.

 

WordPress shortcode with attributes

We can also see shortcode that looks something like you can see below:

[cs_shortcode_content att1=”Shortcode att1 value”]

In the above shortcode, you are passing an attribute value. I hope you have seen many time in many plugins this type of shortcode with one or more attributes.

So now we are also going to create WordPress shortcode with attribute just like you can see in many plugins. It needs a little bit of more extra code than you have seen above.

Below is the code to create WordPress shortcode with the attribute:

function cs_custom_shortcode( $atts ) {
    $a = shortcode_atts( array(
        'att1' => 'att1 default value',
        'att2' => 'att2 default value',
    ), $atts );

    return "att1 = {$a['att1']}";
}
add_shortcode( 'cs_shortcode_content', 'cs_custom_shortcode' );

That’s it.

We have taken the attributes and set its default value in an array.

Now you just have to put the shortcode into your post or page to see the result. Let’s see after you put the [cs_shortcode_content att1=”My att1 value”] in your post what it shows.

If you put [cs_shortcode_content att1=”My att1 value”] in your post then you will be able to see the content you can see below:

att1 = My att1 value

If we are not providing any value then it will show the default value that we have set in the array which you can find in the code.

Without the default value or with [cs_shortcode_content att1] only it will show the result:

att1 = att1 default value

I hope you enjoyed this tutorial. Now you also can try by yourself with your own style and coding structure. Now you can create your own plugin and implement it there.

Leave a Reply

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