How To Create Shortcode With Attributes In WordPress?

WordPress, since version 2.5, allows you to create shortcode for your built in themes and plugins. We also already had the surface look about what is shortcode in WordPress as well as how to create simple shortcode for your theme/plugin built. Now here, as we already stated we will learn about how to create shortcode with attributes hence, here we will learn about it.

Surface look on about what is shortcode in WordPress

You already may have viewed this blog post to know about what is shortcode in WordPress. If not then, here we will describe it shortly.

Shortcode in WordPress, was introduced in version 2.5, in order to be used as the macros in the created WordPress posts/pages. It helps you to embed any file or the object as required for your site, which can reduce the usage of too much complicated code within just a 1 single line.

Here, below you can see about how the shortcode can be used for your site:

[shortcode]

The above example is for displaying the shortcode content without any attributes, which we already described about how to create it here. And for with the attributes, the shortcode will be similar as below:

[shortcode content="Hello! This is shortcode."]

In above example, if you are displaying the content of the shortcode via the function dynamically then, the output for above will be: Hello! This is shortcode.

How to create shortcode with attributes in WordPress?

We already described about how to create shortcode without any attributes in our previous post here. However, if you want to recall, you need to create the function, which holds the shortcode return value and bind that function to add_shortcode() function. Here, below, is the same example for the previous post:

function theme_slug_lorem_shortcode() {
    $output = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

    return $output;
}

add_shortcode( 'lorem_ipsum', 'theme_slug_lorem_shortcode' );

Similarly, you can create the shortcode with attributes to make the shortcode even more dynamic with your site requirement. Hence, here we will move ahead and create shortcode with attributes in WordPress now.

First of all, as in earlier posts, we need to create the function, which holds the shortcode render dynamically. But now, since we are passing attributes in the shortcode we we are about to create, hence, in the function, we need to pass $atts as parameter within the function created.

So, open up your functions.php file of the theme and then, paste the below PHP code in that file to create the function, which holds the shortcode attributes to render:

function theme_slug_dynamic_image( $atts = '' ) {
    $value = shortcode_atts( array(
        'width' => 300,
        'height' => 250,
    ), $atts );

    return '<img src="https://via.placeholder.com/'. $value['width'] . 'x'. $value['height'] . '" />';
}

Now, since the function is create, now you need to bind/hook it to the add_shortcode() function to work. So, let’s create that function too as below in the same file:

add_shortcode( 'image_dimension', 'theme_slug_dynamic_image' );

Output of the shortcode created with attributes

Here, in the above function created, you can see we have passed the argument of $atts = '' in the function created to make that shortcode dynamic. And to not create any issue, we also passed default value of empty to that variable too, to take the passed default values as in function, you can see width of 300px and height of 250px.

From from early post, you may now know that you need to use the shortcode of [image_dimension] to render that created shortcode. Also, in our case, since we passed default value, if you add it single line: [image_dimension] then, default value passed will get displayed. However, if you pass now with attributes: [image_dimension width="500" height="700"] this will overtake the default value with the new value added within shortcode.

Now, as for the output for the single shortcode, ie, without attributes, you can see the similar output of it as shown in below screenshot:

And the output via using the shortcode with attributes will be as below screenshot:

Now, from above images output of the created shortcode with or without attributes, you now may be more familiar on about how to create shortcodes for your WordPress projects with more ease than before if you have got the same output of it as we have.

You may also want to read:

Conclusion

If you have followed up the tutorial properly and now can create shortcode with attributes in WordPress with ease then, we can say that you are now more familiar on this than before. However, if you are still confused on the same and want to know more about it then, drop the comment below in the comment box and we will follow it up.