If you’ve been working with WordPress for a while now, chances are that you might have heard of how resourceful WordPress shortcodes are. But, what if you’re only vaguely aware of it, and don’t have much knowledge of the same?
Have a look at WordPress Shortcodes – An Insight
When creating a WordPress website, you would have most likely wanted to add some specialized content to your site pages or posts. For instance, you might want to embed a Twitter widget, a gallery, categories and any other type of content. WordPress shortcodes make this task extremely easy for you. They were introduced in WP version 2.5, so as to help users do nifty things – that otherwise – would require a lot of code editing. Put it simply, shortcodes are short bits of code that gets added to the HTML editor, or can also be directly used on theme files or even via widgets.
Shortcodes add files or create objects that usually require writing a lot of code. In essence, they reduce the efforts in adding a code snippet again and again in your website posts or pages. This is because they let you embed anything in just a single line without needing you to repeat the code for the same. For example, here is a shortcode that will embed a video to your website page/post.
In the above example, you can see that the shortcode looks just like an HTML tag, however, it is enclosed in square brackets rather than angled brackets. When a shortcode is inserted into a WP page or post, it gets replaced with the desired output after it is processed by WordPress. Though WordPress comes with some built-in shortcodes, but it also lets you to create your own custom shortcodes.
How to Create a Simple Shortcodes?
We’ll create the code for a simple shortcode that looks something like:
[my_button]
In our case, I’ll be creating code for a shortcode that allows me to insert a custom button in a post. The entire code will be included in function.php file.
function my_custom_shortcode($atts){
$atts = shortcode_atts(
array(
‘text’ => ‘My Custom button’,
‘color’ => ‘#ffffff’,
‘bg’ => ‘#cccccc’
), $atts, ‘my_button’);
return ‘<button style=”color:’.$atts[‘color’].’; background: ‘.$atts[‘bg’].'”>’.$atts[‘text’].'</button>’;
}
add_shortcode( ‘my_button’, ‘my_custom_shortcode’ );
For people without any coding knowledge, the above code might appear a bit confusing, but in reality this function is easy to understand. To make things easier, let’s break the code line by line.
1. The first thing we are doing is creating a function named ‘my_custom_shortcode’ to create the output of the shortcode. In addition, $atts is passed as a parameter for our custom function.
function my_custom_shortcode($atts){
2. One best aspect about shortcodes is that they’re flexible, and allows us to add parameters to extend their functionality. Let’s say, we want to change the color of the button that we want to embed into our posts. To do this, we need to add an extra option to our custom function. In our case, inside our custom function we have used “shortcode_atts” function, a WordPress’ built-in function that is used to define different attributes in our shortcode. Here the [my_button] shortcode supports three attributes: text, color and bg.
$atts = shortcode_atts(
array(
‘text’ => ‘My Custom button’,
‘color’ => ‘#ffffff’,
‘bg’ => ‘#cccccc’
), $atts, ‘my_button’);
3. In the third step, the return statement allows us to make changes to our button text and background color.
return ‘<button style=”color:’.$atts[‘color’].’; background: ‘.$atts[‘bg’].'”>’.$atts[‘text’].'</button>’;
4. And the function is closed.
}
5. In order to define our shortcode we’re using the add_shortcode function. This function takes two arguments. The first argument ‘my_button’ will be used as shortcode with or without parameters like color etc., e.g. [my_button]. The second argument my_custom_shortcode represents that the shortcode [my_button] is tied up with the function:#function my_custom_shortcode($atts).
add_shortcode( ‘my_button’, ‘my_custom_shortcode’ );
6. Now I will save my theme’s functions.php file, and call my custom function whenever I want using the shortcode ‘my_button’.
How Can I Utilize My Shortcode?
There are two different options in which I can use my custom shortcode:
Using the code directly in my theme files, by adding the following php code:
<?php echo do_shortcode( ‘ [my-button]’ ) ?>
The second option is to use the custom shortcode directly within the editor that would look like:
[my_button]
Adding Parameters
In the above section, I’ve talked about the way how you can use a simple shortcode without any arguments. Now, in order to use my custom shortcode with arguments, once again I’ll need to use two options:
Use the following code directly in my theme files:
<?php echo do_shortcode( ‘ [my_button color=”#cccccc” bg=”#cccccc” text=”My Custom Button”]’ ) ?>
Use the custom shortcode [my_button] directly within the editor and nothing else.
You can see in the screenshot below how both these options will look in a WordPress editor screen:
Now your custom button will be visible in your theme’s front end, as shown in the screenshot below:
Now you can see two buttons, one as default without any parameters and second with parameters and attributes, which are:
– “HI. MY BUTTON” is the one with attributes defined with the shortcodes.
– “MY CUSTOM BUTTON” is the one with no attributes.
So now you’ve seen how amazing it is, especially when you need to recall the same kind of elements multiple times like in this example, buttons, or maps, or posts associated with any blog categories. You need to write a function, just one time, and you’ll be able to use the shortcodes with or without different attributes anywhere within your WordPress install as per your requirement.
Wrapping Up!
WordPress shortcodes are powerful, easy to implement, and this tutorial helps you to implement them on your website. What I recommend is that you review your requirements, make a list of things which are quite repetitive. Create a function(s) accordingly with attributes and required WordPress shortcodes . Use it anywhere in your website.
