WordPress is the most used Content Management System (CMS) on the world. Its simple design makes it easy to use so everyone may learn its basics in no time. Thanks to its popularity, it is possible to find a great variety of WordPress plugins and themes on the web that fulfill almost all the common needs; like setting up a shopping cart, managing events, etc. With these plugins, you may create a very complex website without writing a single line of code.
One of the characteristics that makes WordPress very popular are its shortcodes. According to WordPress documentation
A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.
For example, a [gallery id=1] shortcode would render a photo gallery with no effort. This is a huge functionality because it eases significantly the process of adding some predefined content. Almost all plugins use this approach to allow you to add some specific functionalities to your content; like showing a list of the events you created with your favorite events plugin.
However, what happens when you would like to define a shortcode to simplify adding a recurrent content, for example your signature or your contact information? Well, you may define your own shortcode! And, like everything else in WordPress, is pretty easy! Let’s see how:
A shortcode is just a PHP function that is called every time the shortcode is used on a page or a post. So, in order to create your own shortcode, you just need to define a function that returns what you want to display when the shortcode is used and register it as a WordPress shortcode. The right place to do it is on the functions.php file of your theme. You may also create a whole plugin to hold your shortcodes in case you will define a lot of them or in case you want to use them across different sites. For this blog, we will use functions.php file.
For this example, let’s assume that we will add a shortcode that will return your contact information (name, email and phone). So, in your functions.php file, add the following code:
//[my-info]
function my_info_func( $atts ){
return "John Doe; john@doe.com; (123) 456-7890";
}
add_shortcode( 'my-info', 'my_info_func' );
Using [my-info] shortcode, will return the following:
As you may see on its definition, there are two components. First, the my_info_func function: it defines what will the shortcode render on the content. Then, the add_shortcode function call. This function is a WordPress function used to define your shortcode. It accepts two arguments: a string, that will define how our shortcode is going to be called (in this case [my-info]) and a function name that is the function associated to the shortcode.
And that’s it! In only four lines we have defined our shortcode. But it seems that it is missing something. What if we would like to display only the email or the name? Well, as we saw on the [gallery] shortcode, shortcodes may have attributes that modify what they return. So, let’s update our shortcode to allow using attributes:
// [my-info display="all"]
function my_info_func( $atts ) {
$a = shortcode_atts( array(
'display' => 'all',
), $atts );
if ( 'all' == $a['display'] ) {
return "John Doe; john@doe.com; (123) 456-7890";
}
if ( 'name' == $a['display'] ) {
return "John Doe";
}
if ( 'email' == $a['display'] ) {
return "john@doe.com";
}
if ( 'phone' == $a['display'] ) {
return "(123) 456-7890";
}
return "invalid display";
}
add_shortcode( 'my-info', 'my_info_func' );
With this small modification, you may return only the data you would like to. As you can see, we are using shortcode_atts function to get the attributes. This WordPress function allows you to normalize them and to define default values in case you do not use the attribute when using the shortcode. For our example, the “display” attribute uses “all” as its default value; so calling [my-info] will return the string with all the information.
Using [my-info display=”email”] will return only the email section of the information.
Before we finish, there is a minor improvement we may add to our shortcode. Sometimes, we need that our shortcode returns HTML code instead of just a plain string. Shortcodes allows to do this with almost no effort; let’s check it with our example:
// [my-info display="all"]
function my_info_func( $atts ) {
$a = shortcode_atts( array(
'display' => 'all',
), $atts );
$display = "invalid display";
if ( 'all' == $a['display'] ) {
$display = "John Doe; john@doe.com; (123) 456-7890";
}
if ( 'name' == $a['display'] ) {
$display = "John Doe";
}
if ( 'email' == $a['display'] ) {
$display = "john@doe.com";
}
if ( 'phone' == $a['display'] ) {
$display = "(123) 456-7890";
}
ob_start();
?> <span class="contact-info" style="color:red"><?php echo $display; ?></span> <?php
return ob_get_clean();
}
add_shortcode( 'my-info', 'my_info_func' ); Using ob_start() and ob_get_clean() allows you to return HTML code from the shortcode.
Once again, using [my-info display=”email”] will return only the email section of the information but it will use a span tag with color red to wrap the content.
And that’s it! with just a few lines, you may create a very powerful tool that will save you time when adding content to your WordPress website.
I have been working with WordPress for almost four years now, and I have always considered that shortcodes are one of its most powerful tools. They are intuitive, easy to learn and to teach and, as we saw in this blog post, easy to create and customize. Out there, there are thousands of them defined on WordPress itself and on plugins and themes that you will discover. So, start creating your own shortcodes!