WordPress shortcodes are simple pieces of code contained within brackets [ and ] that make it easy for site owners to include more complex content on their website.
When editing a post or page, you will see the shortcode in the WordPress editor. However, when WordPress sends your content to the web browser, it converts the shortcode into raw HTML code. This HTML code is then parsed by your browser, and your site’s visitors will experience the final rendering of the code.
While they can be used for nearly any type of content, WordPress shortcodes are most commonly used for embedding audio & video, creating image galleries or sliders, and inserting contact forms.
How Shortcodes Work
Shortcodes make it easy to manage what would otherwise be difficult to manage with raw HTML code. When you insert a shortcode in the WordPress editor, WordPress processes the shortcode and converts it into HTML code that a web browser understands.
Your site visitors then get to experience an advanced piece of content (like a video embed, audio playlist or contact form), all while you have a super easy way to manage it within WordPress. It’s the best of both worlds.
Default WordPress Shortcodes
WordPress comes pre-installed with several helpful shortcodes you can use right away.
embed Shortcode
The embed shortcode is used to embed video, tweets, images, audio & other multimedia content on your WordPress site. In many cases, WordPress will automatically embed items when the URL is simply pasted on its own line in the WordPress editor.
However, the embed shortcode gives you the option to provide a maximum width and height for your embedded content.
Example Usage
Here’s an example for embedding a YouTube video with a max width & height. Remove spaces around the brackets [ and ].
[ embed width="123" height="456" ]http://www.youtube.com/watch?v=dQw4w9WgXcQ[ /embed ]Related Articles
- How to embed a YouTube video in WordPress
- How to embed a Tweet in your WordPress sidebar
- How to embed a Facebook post in your WordPress sidebar
- A Complete Guide on WordPress oEmbeds
- Which sites can I embed content from?
[gallery] Shortcode
The gallery shortcode lets you include an image gallery on your WordPress site. You can add as many images as you’d like, as well as control certain options for your gallery. A simple image gallery shortcode looks like this:
[gallery ids="729,732,731,720"]The WordPress gallery shortcode accepts the following parameters to customize your gallery:
- orderby – The parameter you’d like to use to order your images. Choose between title, post date, menu order, ID or random.
- order – ASC or DESC (ascending or descending)
- size – The image size that you’d like to use for all images in your gallery
- columns – A numerical value for the number of columns in which you’d like your images displayed
- id – A list of the image IDs that you’d like to include in your gallery
- link – Choose where the image should link to, or no link
You can also adjust the HTML tag(s) used when outputting your image gallery.
Related Articles
[caption] Shortcode
The caption shortcode is used when inserting a single image into a post or page, and writing a caption for it. The caption shortcode is automatically added for you, if you add a caption to your image. WordPress takes care of everything.
Here’s an example of the caption shortcode. Remove spaces around the brackets [ and ].
[ caption id="attachment_4941" align="aligncenter" width="1092" ]<img class="size-full wp-image-4941" src="yourimage.jpg" alt="Image Alt Text" width="1092" height="618" /> This is your image caption[ /caption ]The placement and style of an image caption varies based on which theme you are using, but the caption shortcode is always used to output the proper HTML code for an image and it’s corresponding caption.
[video] Shortcode
The WordPress video shortcode allows you to embed an HTML5 video on your site. In most cases, I do not recommend this. Hosting your own video files can take up an enormous amount of your server’s storage space & bandwidth. The more the video gets watched, the more you could have to pay your hosting company.
Hosting videos on YouTube, Vimeo, Wistia or another third-party service is often much more cost effective.
If you choose to use the video shortcode, an example would look like this:
[video src="video-file.mp4"]You can also replace the src attribute with individual file types. So instead of having just one src, you could include:
[video mp4="file.mp4" ogv="file.ogv" webm="file.webm"]There are also a number of other parameters you can use to customize the WordPress video shortcode:
- poster – Choose an image to show as a placeholder, before the video plays
- loop – ON or OFF. Setting to ON will play the video over and over again.
- autoplay – ON or OFF. Setting to ON will play the video immediately after it loads.
- preload – Specifies if & how the video should be loaded when the page loads
[audio] Shortcode
The WordPress audio shortcode is very similar to the video shortcode, only it plays a single audio file. It supports the following audio file formats:
- .mp3
- .m4a
- .ogg
- .wav
- .wma
You can use the src attribute to embed a single audio file type, or replace src with multiple file formats from the list above.
[audio mp3="file.mp3" ogg="file.ogg" wav="file.wav"]And just like the video shortcode, you can set the following options:
- loop
- autoplay
- preload
[playlist] Shortcode
The WordPress playlist shortcode allows you to group multiple audio or video files into a playlist, and embed the playlist onto your site. You cannot mix audio and video files together; you must choose one or the other.
Here’s an example of 3 video files being displayed in a dark style playlist:
[playlist type="video" ids="123,456,789" style="dark"]The playlist shortcode accepts quite a few parameters to customize its output:
- type – “audio” or “video”
- orderby – choose how you want to sort the playlist
- order – ASC or DESC
- style – “light” or “dark”
- ids – which files to include in the playlist
- tracklist – whether to show or hide the playlist
- tracknumbers – whether to show or hide the numbers next to entries in the playlist
- images – show or hide the video or audio thumbnail
- artists – whether to show or hide artist name in the playlist
Other WordPress Shortcodes
Aside from the default WordPress shortcodes, many WordPress plugins use shortcodes to insert content onto a page. One of the most common examples is contact form plugins, which use shortcodes to insert a form onto the page. Image slider plugins also use shortcodes.
Here’s an example of a Gravity Forms shortcode:
[gravityform id=1 title=false description=false]Custom WordPress Shortcodes
In addition to plugins, you can also create your own custom WordPress shortcodes. Shortcodes can be created by customizing your theme, or building your own custom plugin.
For example, you might have a number that you reference on multiple pages throughout your site, and that number constantly changes. Instead of updating the number on a bunch of different pages, you can use a shortcode in its place. Then just update your custom shortcode one time, and your new number will appear on all pages.
Creating custom WordPress shortcodes is outside the scope of this article, but I’ll try to write a separate tutorial on that and link it up here soon.