How to create custom WordPress shortcode?

If you are a big WordPress fan, then most probably, you are aware of shortcodes and also used them during making a WordPress site.

WordPress shortcodes are one of the most useful features. It was first introduced in the WP version 2.5. We often find plugins available that provide one or multiple shortcodes that we can use in our posts and pages to make it work.

In this tutorial, I will teach you how you can create your own WordPress custom shortcode in PHP for users to use.

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. 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():

add_shortcode( 'custom_shortcode', 'custom_shortcode_handler' );


Basic WordPress custom shortcode

Now we are going to create our very basic custom WordPress shortcode using a few lines of PHP code so that you can understand how it works.

Below is our PHP 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

You may be aware of the fact that many times we have to provide attributes to the shortcode for using the specific feature or for configuration or to use some kind of settings.

An example of a shortcode with an attribute is given below:

[cs_shortcode_content att1=”Shortcode att1 value”]

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

So now we are also going to create a 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 PHP 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 it 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 *