Press enter to see results or esc to cancel.

How to create your own WordPress shortcodes

What is a WordPress shortcode?

Shortcodes are a part of WordPress since WordPress 2.5. Shortcodes represent just that, short pieces of code developed to be inserted anywhere on a WordPress website in place of repetitive content.

What does a WordPress shortcode look like?

A WordPress shortcode is represented by a descriptive string inside square brackets []. It can support any number of attributes (options).

An example shortcode

An example of a built-in WordPress shortcode is [embed]…[/embed]. The embed shortcode allows you to embed media in a post or page without having to remember how to format the embed HTML. The embed shortcode is explained in detail on this WordPress codes page. The shortcode accepts two optional attributes (options): width and height.

So, a shortcode used to embed the following YouTube video with a height of 320 px and a width of 420 px would look like this:
[embed width=”420″ height=”320″][embed]

It evaluates to the following:

How to create your own WordPress shortcode?

Creation of a custom WordPress shortcode is quite simple thanks to the WordPress Shortcode API.

Let’s say I wanted to place this website’s slogan “Cubicle’s are for suckers!” inside p and strong HTML tags as follows <p><strong>Cubicles are for suckers!</strong></p> and wrap the resulting html in a handy shortcode called [[cnmslogan]] which I can then insert into my content whenever I wanted to write the slogan.

To accomplish this I would edit my theme’s functions.php and add the following lines:

function cnm_slogan($atts, $content = null) {
    return '<p><strong>Cubicles are for suckers!</strong></p>';
add_shortcode('cnmslogan', 'cnm_slogan');

This simple code allows me to now call the shortcode [[cnmslogan]] and get the following output:

Simple yet very useful, isn’t it?

Yet, this felt like and was quite a trivial example. What if we wanted to do something more complex? Say, we wanted to create a more generic shortcode [slogan] which when placed within content outputs any message passed in between the square brackets as HTML. In addition, what if we attributed this new shortcode with an option bold which when set to 1 renders a bolded text while when set to 0 renders normal text.

Here is how we would go about implementing this shortcode:

function generic_slogan($atts, $content = null) {
    extract( shortcode_atts( array(
	      'bold' => false,
     ), $atts ) );
    return '<p>' . ($bold ? '<strong>' : '') . $content . ($bold ? '</strong>' : '') . '</p>';
add_shortcode('slogan', 'generic_slogan');

The shortcode_atts function does the following (from WordPress codex):

Combines user shortcode attributes with known attributes and fills in defaults when needed. The result will contain every key from the known attributes, merged with values from shortcode attributes.

The extract function than declares each argument in the array as it’s own variable. So $atts[‘bold’] becomes $bold.

Finally, we can use the new shortcode as follows to get a bolded slogan:
[slogan bold=’1’]This is a new slogan[/slogan]
which displays as:
[slogan bold=’1′]This is a new BOLDED slogan[/slogan]

And, we can use the new shortcode to get a normal slogan as follows:
[slogan bold=’0’]This is a new slogan[/slogan]
and it displays as:
[slogan bold=’0′]This is a new NORMAL slogan[/slogan]

And finally, if you are wondering how to escape a shortcode (ie. to write it in WordPress content without having WordPress evaluate it), there are two ways to do so. You can escape the external brackets by writing them twice as so [[shortcode]] or you can use the ASCII representations of [ & ]: &#91; & &#93; to write the shortcode as &#91;shortcode&#93;.



Leave a Comment