A User’s Guide to WordPress Shortcodes

Shortcodes are a shorthand way of representing code in WordPress. WordPress shortcodes provide a simpler code to do rather complex tasks which would have otherwise required a lot of coding and a more technical understanding of the codes involved. Shortcodes are implemented the same way, no matter what task or volume of task it performs.

Which WordPress shortcodes are used for what purposes, and how they are implemented, is defined by a plugin or theme developer. This means, like custom fields, shortcodes in one theme or plugin may not, necessarily, work in another theme or plugin from another developer.

Implementing WordPress Shortcodes

Generally, implementing WordPress shortcodes are as simple as:

[shortcode_name param_a="SOME_VALUE" param_b="ANOTHER_VALUE" ...]

where shortcode_name represents the name of the shortcode. param_a, param_b, and param_c are parameters of the shortcode_name shortcode, with values you pass to them after an equal sign (=) and in quotes ("").

Sometimes, they are implemented as:

[shortcode_name param_a="SOME_VALUE" param_b="ANOTHER_VALUE" ...]
SOME_CONTENT_HERE or SOME_OTHER_SHORTCODE_HERE
[/shortcode_name]

Every shortcode comes with its own parameters and a range of values you can assign to each parameter. All you need to know are the various shortcodes, their parameters and possible values. See the documentation of the plugin or theme in question.

When implemented, WordPress would search and replace your shortcodes with the approrpiate corresponding code, according to as defined by the theme or plugin developer, before finally rendering and displaying the results in a browser.

For instance, the magpack_link shortcode implemented as below:

[magpack_link href="https://www.grottopress.com" label="GrottoPress"]

would be executed by WordPress as:

<span margin="0">
    <a href="https://www.grottopress.com">GrottoPress</a>
</span>

which would display the following link to our homepage:

GrottoPress

There are, primarily, 2 types of shortcodes: self-closing and enclosing shortcodes.

Self-closing Shortcodes

Under Implementing Shortcodes above, you should have read 2 ways of implementing shortcodes. The first example shortcode is a self-closing shortcode. In simple terms, it does not require a closing tag. It is self-closing 🙂

They are, generally, in the following format:

[shortcode_name param_a="SOMETHING_HERE"]

The magpack_link shortcode is an example of a self-closing shortcode.

A shortcode tag is simply a shortcode name surrounded by square brackets ([]). Closing tags always have a forward slash (/) after the opening square bracket ([), as opposed to opening tags. Closing tags always have the same name as the name of the shortcode they are closing.

Enclosing Shortcodes

Enclosing shortcodes require a closing tag. They usually have some content between the opening and closing tags.

They are, generally, in the following format:

[shortcode_name param_a="SOME_VALUE"]
SOME_CONTENT_HERE
[/shortcode_name]

Enclosing shortcodes can also accept other shortcodes between the opening and closing tags:

[shortcode_name param_a="SOME_VALUE"]
[another_shortcode_name param_a="SOME_VALUE"]
[/shortcode_name]

Leave a Reply

Your email address will not be published. Required fields are marked *