Imagine a world where non-programmers can include advanced functionalities to their website without the need to learn how to code or learn complicated procedures. With WordPress, this world exists, thanks to shortcodes.
A shortcode is just what its name suggests: a short way to include code. It allows you to integrate advanced functionalities, such as a gallery, a complex layout, or some interactive elements, very quickly and effortlessly.
WordPress’ shortcodes are usually included by inserting them between brackets [] to define their use. Each of these codes has a specific use and can be adapted. For example, most modern form plugins in WordPress use shortcodes to let you include the forms anywhere on your site. The shortcode can then be used in your content, ideally in a block since the introduction of Gutenberg, or in a template using the do_shortcode function. The shortcode will often have one or more variables, for example the ID of the form in our form plugin example.
By default, WordPress includes the following shortcodes:
[caption]allows you to wrap captions around content
[gallery]allows you to show image galleries
[audio]allows you to embed and play audio files
[video]allows you to embed and play video files
[playlist]allows you to display collection of audio or video files
[embed]allows you to wrap embedded items
As you can see, these are some pretty advanced features, although they are relatively unkown to most common users of WordPress.
For plugins developers, shortcodes are a popular way to allow the users to include functionalities on page, some plugins even use it for their main functionalities, such as the ability to embed PDFs with a plugin like Wonder PDF Embed.
Some other plugins will be designed specially to allow you to create many things, such as tabs, buttons, layouts, documentations, RTL support, etc… using shortcodes. For examples, the Shortcodes Ultimate plugins will generate more than 50 different shortcodes for your WordPress website.
For a bit more advanced users, you can work with Shortcoder, a plugin that gives you the opportunity to turn any code into a shortcode. Obviously, this requires a minimum of HTML, CSS and JS skills, but it stays much easier than coding everything in the template or in a plugin.
Using shortcodes in WordPress as a user is a simple process, but it doesn’t work the same depending on where you want to add it. Keep in mind that each shortcode can have some attributes, so make sure to read the documentation before adding a specific shortcode.
First, you must go in the page or post where you want to insert your shortcode. If you use Gutenberg, as you should, you can add the shortcode in the dedicated block “Shortcodes”, in the “Widgets” section.
Starting from WordPress 4.8, you can also insert shortcodes in Widgets. To add them, go to Appearance > Widgets and add a Text widget in the section that should display the widget.
If your theme is using custom fields, you may also use shortcodes in it.
If you are a WordPress developper and you code your own themes and plugins, you can create shortcodes that will extend the functionalities of your code and empower your users.
For that, you should read the documentation to get a good understanding of the ins and outs or working with shortcodes for developpers. Once you are familiar with it, try the dedicated add_shortcode() functions to make some tests.
However, the easiest way to create WordPress shortcodes if you are a WordPress developper is to use a dedicated generator that will make it very easy.