The first thing to understand about shortcode macros is that anyone can use them. There are no skills needed. It’s a smart way to add dynamic elements to your blog, website, or store in an instant. This piece covers the essentials of WP shortcodes and how best to implement them.
Shortcode (Shortcut + Code) Is Not New
WordPress developers did not invent shortcode. The concept began in 1998 with a lightweight forum software called UBB or Ultimate Bulletin Board. They called it Bulletin Board Code (BBCode). BBCode gave forum posters a quick and easy way to format their text. The most used of these were [b][/b], [s][/s], [color=name][/color], and [u][/u].
Here’s an example of how those early shortcode tags helped posters format text.
[b][/b] made the text bold
[s][/s] added a strike through
[color=name][/color] specified the text colour
[u][/u] gave the text an underline
What Are WordPress Shortcodes?
Fast forward to today’s WordPress, and we’re still using the square bracket [] strings. Here’s a simple piece of WordPress shortcode that controls the number of posts to display.
[recent-posts posts=”5″]Posts Heading[/recent-posts]
We’ll look more into the available codes later.
Custom WordPress Shortcodes
WordPress plugin developers often use shortcode to create special features. They do this using the Application Programming Interface or API. The shortcode API is a set of software functions that eliminate the need to write regular custom expressions. Knowledgeable WordPress users can create custom shortcodes manually from within the Dashboard.
The non-technical webmaster can also create custom PHP shortcode functions using plugins. Other plugin types offer a list of useful shortcode not included in the WordPress defaults.
Where to Use Shortcodes in WordPress
You can pretty much add shortcode to any location in a WordPress post or page. That includes widget-ready areas like sidebars, headers and footers, as well as in the main content. In the past, webmasters had to open the posts or pages code editor to insert the code. Today, it’s much easier and more foolproof thanks to the WP Gutenberg editor.
Types of WordPress Shortcode
WP shortcodes are either enclosing or self-closing. The enclosing types need a closing tag to work, and self-closing ones don’t. Here’s how that looks.
[myshortcode…] <- opening
[myshortcode]My Content[/myshortcode] <- closing
Knowing the type of shortcode is not important unless you plan to write them yourself.
Where to Find WP Default Shortcodes
The 6 WordPress preinstalled shortcodes can go into posts, pages, and even text widgets. Most shortcodes have extra settings that let users tailor them to the site. Some WP themes—especially premium templates—and plugins also come with unique shortcodes. For example, a contact form plugin may have several, so that users can quickly customise appearance and functions.
WordPress has the following 6 free default shortcodes:
Shortcodes Ultimate is an excellent example of a plugin that offers a unique set.
How to Add Shortcode to a Post or Page
Adding WordPress shortcodes to a post or page is a straightforward process.
Log in to your WP Dashboard account and click Posts -> All Posts from the side menu.
Click Edit to open the post you want to add shortcode to.
- Click in the post editor window where you want to add the shortcode
- Click the Add Block + icon (top left)
- Type ‘shortcode’ into the search box
- Click the shortcode widget
The Shortcode block presents you with a box to enter the code. For this example, we’ll add shortcode to play audio files.
Type or paste the shortcode into the shortcode box.
Click the Update button to save the changes
Our sample website now displays a workable audio player that looks like this.
You can view the shortcode in the post editor screen if you’re interested in that.
- Click More Tools & Options (three dots) to expand the menu
- Click the Code Editor link
- View the shortcode in the code editor window (left)
OK, let’s now look at some of the most used WordPress API shortcode.
Audio shortcode
The WordPress audio shortcode is one of the default options, first added in version 3.6. This simple shortcode lets webmasters quickly embed audio files to their site. That could be a podcast, a musical piece, or any other kind of sound file.
To embed an audio file using a URL, the shortcode looks something like this:
Replace the web address with the actual URL of the file.
Video shortcode
Embed videos into your WP posts using the video shortcode. You can also add the video URL directly and let WordPress automatically embed it. The reason to use shortcode instead is that it gives you more options to customise the player.
Caption shortcode
This shortcode lets webmasters wrap detailed captions around images in posts and pages
Embed shortcode
Embed shortcodes let you embed social media to your posts and pages. Examples are YouTube videos, Twitter tweets, and much more.
Gallery shortcode
Gallery shortcodes let you add one or multiple images to posts and pages.
Playlist shortcode
The playlist shortcode allows you to display an entire collection of audio files. The player can go anywhere in a post, page, or widget-friendly areas, i.e., sideboards, headers, and footers.
Closing Comments
Shortcodes make site-building and customisation quick and easy for WordPress webmasters. There’s no code to write, yet these powerful snippets offer incredible features in seconds. Use shortcodes to enhance the way your posts and pages look and interact with visitors.
