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.
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:
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.
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.
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"].
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:
- The shortcode tag to be used within the text editor
- 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.
Save, share & Disqus
Comment via Disqus
More website development related posts
