Shortcodes are powerful, little snippets of code that gives you the wherewithal to place specialized content anywhere on your site. And the best part! When they are implemented, you can call used pieces of codes again and again without repetitively editing the code.
For example, rather than embedding a bevy of images to create a gallery, you just need to utilize the shortcode. As you can see in this example,
Shortcode resembles a HTML tag, except that it is wrapped in square brackets instead of angled brackets.
There are a few shortcodes that WordPress offers to you by default, and there are a truckload of them available via plugins. Other than your HTML editor, there are other places where you may want to use shortcodes. For one, you can use them in sidebar widgets and they can also be used directly on your themes files.
Another great aspect about WordPress shortcodes is that they save a lot of time. Wondering how? Take a look at the below example to get a better understanding of this perspective:
<button style="color:'.$atts['color'].'; background: '.$atts['bg'].'">'.$atts['text'].'</button>>
Every time when my clients would need to control the color and style of a button, they would have to remember to implement the above line of code, which, for non-tech savvy people could be a bit confusing and mind-boggling at the same time. In fact, implementing the code repetitively could be time-consuming as well.
However, creating a function for my shortcode just once, and calling it whenever there is a need to insert a button can assist in reproducing the same operation, as discussed above. This eventually helps save a lot of time that otherwise is wasted in pondering over the code snippet.
But, probably by now you’ll be thinking of how you can create a shortcode and utilize it in your theme.
How to Create Custom Shortcode?
I’m writing code for a simple shortcode that will allow me to embed custom button into my post. This code will give you a basic understanding of how you can implement a shortcode in your WordPress website.
The following code should be included in function.php file.
$atts = shortcode_atts( array( 'text' => 'Shortcode 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_first_shortcode');
Creating a shortcode isn’t a complex task, however most of us, especially the non-technical people might find the above code difficult to understand. So, to make the code easier for you to understand, let me break the code line by line:
- 1 ) In the very beginning, you’ll need to define a function. In our example, we’ve named it ‘my_first_shortcode’. This function will help create the output of the shortcode.
- 2 ) Inside the function, another function “shortcode_atts” is included. It is a default WordPress’ function used for defining different attributes in the custom shortcode.
$atts = shortcode_atts( array( ‘text’ => ‘My Custom Button’, ‘color’ => ‘#ffffff’, ‘bg’ => ‘#cccccc’ ), $atts, ‘my_button’);
- 3) The return statement will assist you to control the color and style of the button.
return ‘<button style=”color:’.$atts[‘color’].’; background: ‘.$atts[‘bg’].'”>’.$atts[‘text’].'</button>’;
- 4 ) In the fourth step, the function gets closed.
- 5 ) The add_shortcode function take two argument: my_button and my_first_shortcode. This function will search whether my WordPress website contains a shortcode named as ‘my_first_shortcode’, and then will tie up the shortcode ‘my_button’ with the function: my_first_shortcode($atts).
add_shortcode( ‘my_button’, ‘my_first_shortcode’ );
- 6 ) In the last step, you simply need to save your theme’s function.php file.
How to Use Shortcode?
There are two simple options following which you can utilize the newly created shortcode:
- By using the following code directly in your theme files:
<?php echo do_shortcode( ‘ [my_shortcode_button]’ ) ?>
- Or use custom shortcode directly within the wp-editor that looks something like:
What About Using Shortcode with Arguments?
In the above example, we talked about how you can use the shortcode without any parameters. But, what if you want to them with parameters? Once again, you’ll have to follow the same two options like the ones discussed above. However, there will a minor change in the first option, the code that you need to use directly in your theme files will contain arguments:<?php echo do_shortcode( ‘[my_shortcode_button color=”#cccccc” bg=”#cccccc” text=”Button with attributes”]’ ) ?>
The second option will remain the same.
Let us now see, how both these options will look like in the WordPress editor screen:
After completion of this step, you can see the custom shortcode in your theme’s front end (that looks something like the below screenshot):
As you can see in the above screenshot, two buttons are visible:
- “Button with attributes”: This button is the one with attributes.
- “My Custom Button”: This button is one with no attributes.
That’s it! Isn’t it amazing how you can recall the same element in your theme multiple times without fiddling with the code?
Similarly, you can choose to create custom shortcodes to insert any element you would like to display in your page or post. All you need to do is create a function for your custom shortcode once, and then you can use that shortcode anywhere within your WordPress theme. You can even use it in your widgets and inside the wp-editor.
This tutorial is aimed at giving you a clear-eyed understanding of the process of injecting shortcode in your website. However, I’ll recommend you to carefully review your requirements first, and make a note of the things that are repetitive. And then, create a function(s) for your shortcode.
I have have been using shortcodes since the release of WordPress 2.5, and I have found them to be amazingly useful. For the folks who are yet to try them out, it is worth knowing that they can help you save a lot of your time – that you otherwise spend in writing code for the same function repetitively.
About Author: Ben Wilson is a professional WordPress developer for a leading company WordPrax Ltd. He also provides the services like HTML to WordPress theme conversion and many more. If you are looking for the afforsaid services feel free to contact him.