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:

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:

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:

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:

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:

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:

  1. How To Display First Paragraph Only Added In Your Posts Via WordPress
  2. How To Add Header Image Support In WordPress
  3. Apply Custom CSS Code In Your Site Via Inspect Element
  4. Make YouTube And Vimeo Video Responsive In WordPress
  5. Adding Custom Site Logo Support In WordPress

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.

, , , , , , , , , , , , , , ,

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

Leave a Reply