Sami Greenbury
Technology, Teaching & Travel

WordPress Shortcodes for Website Editors

Overview of Shortcodes

WordPress Shortcodes are snippets of code which WordPress turns into more advanced things. For example the gallery shortcode is very simple in the editor, but turns into a complicated bunch of code for displaying many images.

A basic shortcode is a word wrapped in square brackets, like this:

[gallery]

Simple Shortcode

A shortcode to display the most recent posts might look like this:

[recent-posts]

you can put that anywhere you like in your post body and when you view it on the front-end of the website it’ll display a list of recent posts.

Closing Shortcodes

Some shortcodes can be wrapped around some text, for example a shortcode might make a paragraph stand out and flash. In this case you put the usual shortcode form above before the content, and a repeat of it but with a forward slash added after the first square bracked after the content.

[stand_out_and_flash]This is the content[/stand_out_and_flash]

The shortcode will then generate some code to go before and after the content – in this case to make it stand out and flash.

Shortcode Settings

A shortcode can also have settings – this lets you use the same shortcode in different places but with different results. Taking the example of the recent-posts shortcode above we might want to choose how many of the most recent posts to show. We do this by adding a space after the shortcode name, followed by the setting name, and equals and then the value – followed by the closing square bracket.

You can add as many settings as you like (as long as the shortcode supports them) by repeating the format.

If the value of the setting contains a space (or some other special characters) you need to put it in quotes (you can put all values in quotes if you prefer too).

You don’t repeat the settings in the closing shortcode (E.g. the [[/stand_out_and_flash]] – they are always just a forward slash followed by the shortcode name.

Here are some examples:

[recent-posts count=10 order="oldest first"]
[recent-posts count=5]
[stand_out_and_flash flash_speed=fast] This will flash really fast[/stand_out_and_flash]

Have any questions or tips about Shortcodes? Ask in the comments below.

Category:

Leave a Reply

Your e-mail address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.