All of us have used shortcodes at some point since WordPress 2.5 was released. Shortcodes are fragments of code that come with themes and plugins. They help to create macros for the content of your website. With shortcodes, simply inserting common text within square brackets can allow users to use pre-defined functions that could be a simple phrase or a large PHP function. Shortcodes that come bundled with WordPress plugins and themes are great because they speed up the process of website creation.
For example, the shortcode
[gallery id='123' size="medium"]will create an image gallery easily, without you having to write the HTML code for it and maintain consistency each time images are uploaded. With this shortcode, the gallery markup will be created automatically and dynamically. Other default plugins that come with WordPress include
[caption][audio]and
[video]At the same time, the WordPress plugin developer and other users may like to know how to create their own shortcodes. Here is a brief guide to help you get started with how to do this and arm yourself with greater functionality in WordPress.
What Can Shortcodes Do For You?
Shortcodes give you versatility – you can do anything you want with them and get as creative with them as you like. However the skill behind using shortcodes is to tailor them to your site. It can be great to have plenty of shortcodes with a theme but they have to be functional and aesthetic once applied. Keep your users in mind before using them.
The Basics of a Simple Shortcode
Shortcodes are designed with PHP, which can put many people off. But they are really among the easiest of PHP basics to grasp. The API for a shortcode is simple. First create a callback function. This will run every time you use the shortcode. Next, tie the function to a particular shortcode and you can begin to use it.
Note that the shortcode is typically in functions.php. If you decide to use several, however, it will be more convenient to have each shortcode in its own file and included in functions.php.
Now let’s get down to creating a simple shortcode. Let’s consider that you want to write the code to return a filler text each time you type [filler] in the editor. Next you have to add the shortcode [filler]either to the functions.php file or to another file that you include in it. You can do this with the add_shortcut function, which takes 2 arguments: the name of the shortcode and the function to link with. For our example, it will look something like this:
function filler_function() {
return ' Curabitur ac eros dictum, blandit ligula non, malesuada massa. Vivamus nec,
laoreet ipsum vel, sagittis dui. Proin in leo vehicula, tempus metus ac, aliquam lacus.
Donec magna tellus, egestas nec elit sed, ullamcorper rutrum lectus.';
}
add_shortcode ('filler', 'filler_function');The above example was the simplest possible. You can of course add more attributes to your shortcodes. For instance, if you want to add pictures of different sizes, it can help to have a single function that you can insert like this:
The function for a random image generator will be like this:
function rand_pic ($atts) {
extract (shortcode_atts(array(
'width'=>500,
'height'=>500,
), $atts));
return '<img src= "insert image link here/'. $width. '/'. $height.'"/>';
}Now let’s look at a breakdown of the function above. We’ve named it rand_pic. Also, we’ve used the parameter $atts because the function needs to accept arguments. The attributes themselves require 2 functions. The shortcode_atts function is a WordPress default function that enters default values to be used when you don’t provide any at function call. In the above case, since we’ve provided image size values at function call, the defaults will not be used. The second default function that we use is the PHP extract function. This helps to ‘extract’ the image attributes we’ve defined for our shortcode.
Now that the function has been created, it has to be linked to the shortcode like this:
add_shortcode('pic', 'rand_pic');CSS and Implementation in WordPress
After having created your shortcode for the image insertion, for example, you can decide additional CSS features you want it to have, such as styles, margins, positioning etc. After you have written out your CSS code for the function, placed it in your style.css file or other stylesheet, placed all your PHP code in functions.php, you can begin to use your shortcodes. When you want to use the shortcode, simply use
[pic]...[/pic].That is all there is to it! Using shortcodes you can go on to add colored boxes to match your theme, sticky notes, drop caps, columns etc. Little shortcodes for elements of your blog or website that you use often can definitely help to speed things up. You can do anything you want with shortcodes and personalize your website exactly as you like.