A “short code” is a short piece of code that you can use to add specific functionality to your WordPress site without knowing how to code HTML, CSS, or PHP. Plugin and theme developers create short codes for their end users all the time so that non-technical people (or technical people who want to save time) can customize their WordPress themes or content quickly and easily.
Short codes are enclosed in square brackets, and all you have to do is copy and paste the required short code wherever you want its result to appear. For example, suppose that you want to put a nice looking form on your contact page instead of just posting your email address. You can choose from the many “contact form” WordPress plugins that use short codes to display customizable forms. The short code itself might look something like this:
[contact_form]This is what you would insert into the text editor when creating a post or page in WordPress. When you visit your contact page in your web browser, the form should automatically show up. It won’t be visible from your WordPress admin area, unless you click the “Preview” button to preview your post.
Other short codes may have opening and closing tags, as opposed to having all of the code inside one pair of square brackets. For example:
[container] some content here [/container](The closing tag is the same as the opening tag, except for the “/” character.)
For demonstration purposes, let’s use the plugin called “Contact Form Clean and Simple”. (This is not an endorsement of the plugin; it’s being used as an example only.) The plugin is available from the following URL:
Once you’ve activated the plugin, you can customize the settings on the plugin’s “Settings” page. When you’re ready to go, just copy and paste the plugin’s shortcode into your contact page (or wherever you’d like the contact form to appear).
When you visit the page/post in your web browser, the form should appear:
A contact form is just one of the many use cases for short codes. Other uses include but are not limited to:
- Adding Google AdSense to your posts
- Adding a newsletter subscription form to every post or in your sidebar
- Adding a “Purchase” or “Donate” button where appropriate
- Changing the layout of your content area without writing or modifying any HTML or CSS code (e.g., using multiple columns instead of one)
- Inserting a photo gallery
- Inserting an audio or video playlist
- Adding a self-serve appointment scheduler for your clients
Without short codes, you would have to go into the Theme Editor in WordPress and modify one or more PHP files to accommodate the desired functionality. For the uninitiated, there’s a high risk of messing up the existing code and causing one’s site to be displayed improperly (or not at all — this is affectionately known as the “WordPress White Screen of Death”).
More Short codes Tips
1) Don’t bold, underline, or italicize the shortcode. Otherwise, it won’t work.
2) Make sure the shortcode is enclosed in square brackets, not curly braces or parentheses:
correct: [shortcode] incorrect: {shortcode} or (shortcode)
3) What if you want to insert text that’s represented by one of your short codes?
This is a common issue for developers when writing the documentation for their plugins. It can also be an issue for bloggers who write tutorials about how to use certain short codes. If you want the short code to appear literally in your content, instead of whatever content the short code is supposed to insert, then you need to “escape” the short code by adding additional bracket characters.
If the original shortcode is
, for example, but you want to write something like, “This is how to use the short code”, then you would have to put the following short code in your post instead of the original:
If the short code has an opening and closing tag, you must escape the first and last brackets, not the ones in the middle:
[[container] some content here [/container]]Escaping short codes only works if the short code is “registered” as a short code in WordPress. This will have already been done for you if you’re using a plugin or theme developed by someone else, but if you’re creating your own custom short codes, you may need to modify your theme’s functions.php file (see below).
4) Using custom short codes
If you have some knowledge of HTML and PHP, you can create your own short codes to save time when incorporating repetitive code into your WordPress site, such as buttons, text, or forms that you’d like to appear on every page or post. Typically, you’ll need to edit your theme’s functions.php file. Using the Twenty Twelve theme as an example, go to the Editor and click on “Theme Functions”. This will open the functions.php in the text editor.
You can add your custom code to toward the beginning of the file (or anywhere, really, as long as you don’t “break” any existing code). Your code will consist of a PHP function that returns the content that you want to display, followed by a call to the add_short code function that’s built into WordPress. This is how you “register” a short code.
Here’s a very simplistic example. All this short code does is insert the HTML code, “<p>This is a test of the short codes demo.</p>” wherever the short code has been placed. The short code itself is [short code_test].
The add_shortcode function has two parameters: the text that you want to use as the short code (minus the brackets) and the name of the PHP function associated with the short code. To use the short code, enter [shortcode_test] in the text editor when creating a new page or post, as shown below.
When viewing the new page in a web browser, the appropriate text is displayed:
For more information about creating your own short codes, check out the WordPress Short code API:
http://codex.wordpress.org/Shortcode_API
http://codex.wordpress.org/Shortcode
4) How do you add short codes to widgets?
Most short codes are meant to be added to the content area of pages or posts. If you want to use short codes in sidebar widgets, for example, they won’t show up without a bit of tweaking. Go to the Editor and find your functions.php file again. Add the code that’s in the red box shown below, and click the “Update File” button to save the file:
// allow short codes in widgets
add_filter('widget_text', 'do_shortcode');
Now go to the Widgets area in your WordPress control panel. Drag and drop a Text widget to the sidebar, and add your short code. For example:
Now when you view the site again, your short code content should show up in the sidebar:
5) How to put a short code within another short code
There may be occasions where you want to put the content of one short code inside another short code, like so:
[container][shortcode][/container]Since WordPress doesn’t support this functionality by default, you have two options. You can either add code to WordPress to make it handle nested short codes, or you can take the easy route and use a plugin called Outerbridge Nested Short codes, which is available here: