Using shortcodes in WordPress like a boss

Using shortcodes in WordPress like a boss
Published: by
Categories
Website Development

One of the many handy features in WordPress is its shortcode functionality. Shortcodes come in many shapes and sizes, but ultimately it is like using a shortcut to display larger pieces of code. This post will go through some basic principles of creating and using shortcodes in WordPress.

This is an ongoing post. Please suggest corrections, explanations, etc. in the comment section at the bottom of this page.

Most WordPress users will at some point (probably early on) be confronted with using shortcodes. Fortunately they are easy to understand and even easier to use.

What is a shortcode

In its simplest form, a shortcode is a piece of code that represents a larger piece of code. It is basically a short piece of code used as a shortcut for a larger piece of code. Shortcodes are easily identified by being encapsulated in square brackets (e.g. [shortcode_name]). By using shortcodes, functional pieces of code is easy to incorporate into content sections of WordPress without interfering too much with its workflow. Code can be in the form of PHP, HTML, Java Script, CSS, etc.

Why use shortcodes

Apart from shortening pieces of code, shortcodes are also often used to ‘recycle’ code. Messages, or other functionality, that will be used on various, but manual sections of a website are often converted into a shortcode. When a shortcode is used over and over again, by only changing the source, the code will be changed at each place the shortcode is used – saving time.

WordPress plugin and theme developers often use shortcodes to incorporate functionality for their users. The WordPress core itself has a couple of very handy built-in shortcodes which users can easily insert into sections of their website.

Example

As an example, lets say you want to add the following message into your website:

Make sure to like us on Facebook!

The HTML and CSS code for this message will look as follows:

<div style="text-align: center; background: red; color: white; margin: 20px; padding: 20px; width: 80%;">Make sure to like us on <a href="https://www.facebook.com/RimorIugoFirmoAbire/" target="_blank" rel="noopener">Facebook</a>!
</div>

This code can simply be placed one by one into the content area of your web pages, but if you know that you will be using this exact same code/message multiple times at multiple locations, it is better to turn it into a shortcode.

Creating your own shortcodes

Shortcodes are often used by developers for easy insertion of complex code into custom areas. This does not mean you cannot create your own shortcodes. In WordPress, shortcodes can be either created using a plugin (e.g. the Shortcoder plugin) or by inserting code into your (child) theme’s functions.php file.

Creating shortcodes using the Shortcoder plugin

The Shortcoder plugin is a free WordPress plugin developed by Aakash Chakravarthy.  It is used to create, manage and update shortcodes without being code savvy. At the time of writing Shortcoder was at version 4.3, had more than 40 000 active installs and an average rating of 5 out of 5 stars.

Shortcoder plugin

After installing and activating the Shortcoder plugin from the WordPress Plugins section, its settings are available under WordPress Settings -> Shortcoder. New shortcodes can easily be created and named.

Using the sample described earlier, simply Create a new shortcode, name it, and paste the code into the Shortcode content section and save the content by clicking on the Create shortcode button at the bottom. Multiple shortcodes can be created. Shortcoder will make sure that there are no duplicate shortcodes names.

Shortcoder sample

As with any shortcode, shortcodes created with Shortcoder can either be copied and pasted, or inserted into content areas using the Shortcoder button the the top of the post/page content pages. By using, for example, “my-facebook-message” as the name of the shortcode, Shortcoder will create a shortcode named [sc name="my-facebook-message"].

Shortcoder insertion button
After the Shortcoder plugin has been installed, a Shortcoder button will start to appear on the top of the post/page content sections.

Creating shortcodes using the functions.php file

For those that doesn’t like plugins, like to have more control and/or is a bit more code savvy, shortcodes can also be created as functions before assigning them to a shortcode name in WordPress.

WordPress functions can be created in a couple of ways, but for now let’s add one to the (child) theme’s functions.php file. To create a function to output the example message described earlier, the following code needs to be added before the closing ?> tag:

function facebook_message_function() {
  return = '<div style="text-align: center; background: red; color: white; margin: 20px; padding: 20px; width: 80%;">Make sure to like us on <a href="https://www.facebook.com/RimorIugoFirmoAbire/" target="_blank" rel="noopener">Facebook</a>! </div>';
}

In this case facebook_message_function is the name of the function. To be able to use the function as a shortcode, it needs to be registered with WordPress. This is done with the add_shortcode function which requires two arguments:

  1. The shortcode tag to be used within the text editor
  2. The name of the function handling the execution of the shortcode (in this case facebook_message_function)

Both these arguments should be unique enough so they don’t interfere with other shortcodes included by WordPress core, themes or plugins. To follow our example earlier, this is what the code to be added to the functions.php file should look like:

add_shortcode( 'my-facebook-message', 'facebook_message_function' );

The code can either be added directly above or directly below the facebook_message_function. The first value will go within square brackets in the text editor i.e. [my-facebook-message]. The second will match the function name you wrote in the previous step. Multiple shortcodes can be created by giving them unique names and functions.

Inserting shortcodes into WordPress

Registered shortcodes can be used in one of two ways in WordPress. The easiest way, which is also their intended way, is by placing the shortcode name (e.g. [my-facebook-message]) where it is required in the content sections of posts/pages. The content of the shortcode will not show until the post/page is saved and previewed.

For areas of a website which is not accessible through the text editor, e.g. the footer area, shortcodes can be added using PHP. The following code will add our earlier example:

<?php echo do_shortcode('[my-facebook-message]'); ?>

or

<?php echo do_shortcode('[sc name="my-facebook-message"]'); ?>

in the case of a shortcode created by Shortcoder.

About the author
Renier busies himself with improving his English writing, creative web design and his websites, photoshopping, micro-electronics, multiple genres of music, superhero movies and badass series.

Save, share & Disqus

Use the buttons below, on the left or the bottom of this page to share this post. Your comment is important, but don't be a shit. Keep it constructive and polite.

Comment via Disqus

Disqus is a worldwide comment hosting service for web sites and online communities. This secure platform ensures a pleasant commenting environment which is manageable from one account. Use the Login button to sign up.

More website development related posts

Try one of Lynda.com’s online software and skills learning courses
Try one of Lynda.com’s online software and skills learning courses
21 February 2019
Ad: Improve your knowledge on anything from programming to business skills with Lynda.com’s huge range of professional video courses. More…
Using the Media Library Assistant plugin for WP
Using the Media Library Assistant plugin for WP
5 January 2019
WordPress websites with a large amount of Media content can become overwhelming to manage. With expanding libraries, images and other media can start to disappear in a sea of files which can make finding them very difficult. With the Media Library Assistant plugin for WordPress, searching and organising Media files becomes a breeze. More…
Categories
Website Development
Disabling the Gutenberg Editor in WordPress 5
Disabling the Gutenberg Editor in WordPress 5
9 December 2018
Most WordPress users are probably happy with regular updates on their favourite content management website software, but for me, a striking difference starting at WordPress 5 was the Gutenberg Editor instead of the, now, Classic Editor. Without going into to much of a discussion, this post will show how disable the Gutenberg Editor. More…
Categories
Website Development
Creating custom social media share buttons for posts
Creating custom social media share buttons for posts
27 October 2017 | Updated 12 December 2018
Website developers might find it necessary to have custom social share buttons at the top/bottom of their web pages. Custom buttons, as suppose to the regular/default buttons, allows better integration with the rest of a website’s styling and create a more unique look and feel. More…