Shortcode

Home » Shortcode

Shortcodes are tiny code snippets that, when displayed on the frontend of your site, outputs a specific feature or thing to your page.
The ability to use shortcodes was added to WordPress many years ago in version 2.5. Shortcodes were introduced so users can add code inside WordPress pages, posts and widgets without actually writing complex code in the visual editor.

Shortcodes allow you to execute large functions as many times as you want throughout your website. The shortcode that initiates the code is much smaller by comparison than the markup that the shortcode produces.

They are made to be as small as one line in your editor. This is good for keeping the size of your database down (generally the smaller the better) and also means that the complex parts are kept out of the hands of the average user that may cause trouble if they accidentally touch something.

WordPress has a number of shortcodes built in out of the box. These include audio, caption, embed, gallery, playlist and video. Other shortcodes are added to your website via plugins.

A commonly used shortcode is the WordPress gallery shortcode. The gallery shortcode looks like this:

[gallery]

Shortcodes would not be nearly as useful if they weren’t dynamic. Shortcodes often include additional attributes to customise how they are output on the page. The gallery shortcode with attributes looks like:

[gallery id="123" size="medium"]

Both examples will display an image gallery. Being able to use shortcodes means you do not need to maintain the HTML markup for it and keeping it in sync with newly uploaded images. Shortcodes dynamically and automatically output the necessary markup for you from predefined code.

Gallery Shortcode in the WordPress Editor
The gallery shortcode displays visually in the WordPress editor.

The above code will display like the following in the visual editor

Most shortcodes have its own set of attributes available to it but sometimes the shortcode is so specific that it doesnt need attributes.

There are literally hundreds of thousands of different uses for shortcodes. Your site may already be using shortcodes if you have a contact form or an eCommerce store. Shortcodes are used to add the features from these plugins into your page.

Other common uses for a shortcode include adding the following to your page: buttons, embedding files, accordions, sliders etc.

Some themes include bundled shortcodes however the best practice is to use shortcodes from a plugin. This is because you will more often change your theme than you will a plugin and if your shortcodes are included in your theme and you change your theme then they will all stop working.

On the off chance that you want to display the text of the shortcode rather than execute it, you can do so by escaping the shortcode. To escape a shortcode you use double square brackets. To do so, you simply wrap the shortcode with another pair of square brackets so it would look like this:

[[gallery]]

Shortcodes are a great feature of WordPress. They simplify new additions to your site and reduce the amount of code required to create something great. All of the code that is produced by shortcodes would require a lot of hours to produce if done manually. The most convenient part about shortcodes is if you need to move the shortcode to another section of the page or even another page, you simply copy and paste it and you’re good to go.

Posted on