How to Use Shortcodes in WordPress

Shortcodes are something like placeholders. You insert them into the body of a post, page or text widget and they will be replaced in the output with something different, depending on the code you use.

Shortcodes are mostly provided by plugins and themes. If you deactivate a plugin or theme, all of its shortcodes that you used will now appear unprocessed on the frontend, the way you see them in the editor.

What Shortcodes Look Like

Shortcodes are enclosed by square bracket and they start with a shortcode’s specific name (or identifier), followed by a space and then optional parameter-value pairs. Parameters are predefined for each shortcode.

Together with their values, parameters look like this: size=12 button=large title="Hello there!". All parameter-value pairs are separated from each other by spaces.

Here is a full example of a shortcode with parameters and values:

[tag_groups_alphabet_tabs exclude_letters="Z" smallest=16]

In this example “tag_groups_alphabet_tabs” is the identifier (or name) of the shortcode, “exclude_letters” is a parameter and “Z” is its value, “smallest” is a second parameter with its value 16.

Some shortcodes consist of two parts, enclosing some text, such as [my_shortcode]something[/my_shortcode]. But we don’t use them in this plugin.

Hints and Troubleshooting

If a shortcode doesn’t work or one or more parameters don’t have any effect, double-check the following points:

  1. Please make sure that you don’t have any typos in the code or the parameters.
  2. When you copy & paste shortcodes from a web site, make sure you don’t copy over any formatting (e.g. bold or formatting as code). Preferable use the “Text” mode of the classic editor to paste the code, or switch to Text mode and check for pieces inside the square brackets that don’t belong there.
  3. Also, after you copied & pasted a shortcode, it is recommended to re-type all (double) quotes since curly or tilted quotes are not recognized by WordPress.
  4. If the value of a parameter contains spaces, then you need to enclose it in quotes.
  5. If you need to use quotes inside the value, you can use single quotes or double quotes, what ever you haven’t used for the outer enclosure. Example: parameter="here is 'some text'". Some shortcodes, however, cannot handle both types of quotes, if the text becomes part of the HTML. Just try which one works.
  6. Avoid nesting or overlapping of shortcodes since WordPress is sometimes confused how to handle them.
  7. Avoid HTML code in parameter values because WordPress tries to “fix” it and thinks that the HTML outside the shortcode continues inside that value.

Unfortunately we cannot make shortcodes easier because they are a part of the default WordPress core.

Available Shortcodes

Too Complicated?

If you don’t want to mess around with shortcodes and parameters, you can also get the same results with Gutenberg, which is the default WordPress editor since version 5.0. All tag cloud shortcodes exist as Gutenberg blocks and you simply configure them through a user interface.

TGB - Gutenberg Post Edit screen
Example of the Accordion Tag Cloud as Gutenberg block. The options are available in the “Inspector” in the right side bar.