What are WordPress Shortcodes?
A WordPress shortcode is a code word or phrase enclosed in square brackets: [sampleshortcode]. Depending on the shortcode, its output can be customized by parameters: [sampleshortcode category=”tech” display=3]. You see the code in the brackets when you are editing the post or page (no matter whether you’re in the Visual or Text editor), but when the post or page is viewed (whether on your site or via an RSS feed), you see the final result. A shortcode tells WordPress to display something else via a PHP function when the post or page is viewed.
Why would I want to use a shortcode?
It can be tricky to use Javascript or a code snippet full of div tags within a post. Rather than pasting a large chunk of often-used HTML code in the Text tab of every post, it’s easier to create a shortcode so you can simply type the shortcode wherever you want the code to appear.
Perhaps you find yourself typing out a sentence or paragraph repeatedly (for instance, a disclosure or disclaimer). If you create a shortcode with that text, you’d only need to type the shortcode wherever you want it to appear.
Maybe you want to place a set of images and text within or at the end of some posts, but you’ll want the option to edit that in the future without having to edit each individual post. For example, I made a shortcode for this #31 Days series Become Savvy Inside WordPress. I wanted each post to link to the series landing page, but I also wanted to be able to change the wording of the link when the series was finished. So I have the [ ] shortcode that asks for your Q&A submissions right now, but once the series is finished, I’ll change it to link to the series landing page as well as my latest posts about WordPress.
Where do I find shortcodes?
Self-hosted WordPress includes a few built-in shortcodes, including [gallery] and [caption]. Many shortcodes include parameter options: [gallery columns="5" orderby="rand"].
Theme frameworks often come with their own set of shortcodes. In a post or the meta info on a site using the Genesis Framework by StudioPress, I could use the shortcode [[post_author_link]] to provide the link to the author’s website (Genesis Framework Shortcode Reference). In a page of a site using a WooThemes theme like Canvas, I could type [fblike] to display the Facebook like button or [related_posts limit=”3″] to show three related posts (WooThemes Shortcodes Documentation).
Plugins can add a plethora of shortcode choices. For instance, I use the Contact Form 7 plugin on my Contact page. I use the shortcode [[contact-form-7 id=”7775″ title=”Contact form 1″]] on that page to specify exactly which contact form to use. List Category Posts creates the shortcode [catlist name=”tech” numberposts=10] that will display a list of the most recent posts from a specified cateogry. The options are as endless as the plugins in the WordPress directory.
WordPress.com supplies an extensive collection of shortcodes, including [googlemaps] and [twitter-timeline], since you can’t create your own shortcodes on WordPress.com (Shortcodes Support on WordPress.com).
When can I use shortcodes?
You can use shortcodes in posts, pages, widgets, and post meta areas. You can even use shortcodes in conjunction with hooks (in Canvas Hooks or with the Genesis Simple Hooks plugin) to “hook” a shortcode function in a certain spot within your theme. To use a shortcode within a theme file, you need to use the do_shortcode function.
How do I make my own shortcodes?
Try plugins like Shortcodes Pro, Post Snippets, or WordPress Shortcodes. Or, if you’re familiar with editing your functions.php file, you can use a generator like Generate WordPress Shortcodes or simply create your own shortcodes using the following as a template (be careful not to use single quotation marks unless you first escape each of them with a backslash):
function get_insidewp($atts) { return '<p style="text-align: center;"><a title="Become Savvy Inside WordPress in 5 Minutes a Day" href="https://gretchenlouise.com/become-savvy-inside-wordpress/"><img class="alignleft size-thumbnail wp-image-11053" alt="Become Savvy Inside WordPress in 5 Minutes a Day (a #31Days series by @GretLouise)" src="https://gretchenlouise.com/wp-content/uploads/2013/09/become-savvy-inside-wordpress-150x150.jpg" width="150" height="150" /></a></p> <hr noshade="noshade" size="1" width="50%" /> <p style="text-align: center;"><sup><em>This post is part of my #31Days series "<a title="Become Savvy Inside WordPress in 5 Minutes a Day" href="https://gretchenlouise.com/become-savvy-inside-wordpress/"><strong>Become Savvy Inside WordPress in 5 Minutes a Day</strong></a>". <strong>Make sure you are <a title="Subscribe & Connect" href="https://gretchenlouise.com/connect/">subscribed</a></strong>--via <a href="http://feeds.feedburner.com/littlepinkhouse-tech">RSS</a>, <a href="http://www.bloglovin.com/blog/6872913">Bloglovin</a>, or <a title="Subscribe & Connect" href="https://gretchenlouise.com/connect/">email</a>--so you do not miss any of the posts! <strong>Got questions? </strong>Comment here and I will do my best to answer them in the comments or in the Q&A post at the end of October.</em></sup></p>'; } add_shortcode('insidewp', 'get_insidewp');
Got more than 5 minutes?
I’m showing you the shortcodes within this post by doubling up the brackets before and after the shortcode. Double brackets cancel out the actual shortcode function for currently available shortcodes. And that bit of PHP code I showed you? I enclosed it in [[php] and [/php]] so that the plugin SyntaxHighlighter Evolved would put it in a special code box.
Just remember that if you use framework-based shortcodes and switch themes, you may have naked shortcodes. (If there’s no matching shortcode function, WordPress will simply display the shortcode name within brackets like you see it in your post editor.) And if you create your own shortcodes in your functions.php file, be sure to back them up and move them to a new child theme if you change themes.
Want to read more about shortcodes? Check out Smashing Magazine’s WordPress Shortcodes: A Complete Guide and visit WPBeginner’s How to Add a Shortcode in WordPress.
I visited my friend Dawn Perkins‘ blog on Monday to talk about hooks, shortcodes, and automatic affiliate disclosure. Go check out my post over at The Momma Knows for more uses for shortcodes–and to find out just how easy it is to include automatic disclosures: 6 Ways to Add Automatic Affiliate Disclosure in WordPress.
Great description of shortcodes! I am still a little clueless about them, but I use them, if that makes sense? I have never created one but I think it’s on my to-do list now. I have some plugins that use shortcodes and I have used those with good results. Time to learn a little more. 馃檪
Good morning Gretchen, Wow! You know how to hit a need on the head. (and thank you for the help with a plugin for an in text editor) I added the amr shortcode editor a while back to insert a subscription widget within a post on the landing page for my 31 days series. It worked but it disabled my comments- well it made all my comments become subscription requests actually. Anyways, where can I go to get help figuring out why things like that happen? (Especially when I don’t have IRL friends with know how like you!) Thanks, Amy
Hi Amy! Wow, that’s an interesting problem. Did you use a plugin or some custom code to add the shortcode?
I’m always glad to help with troubleshooting issues: https://gretchenlouise.com/services/ 馃檪