Shortcodes are a very powerful feature of WordPress, which we covered a while ago. They can be used to add interactive elements to your pages and posts, and are widely used by plugins and themes alike. Without them, many popular plugins would hardly work as well as they do (Contact Form 7 comes to mind), and WordPress as a whole would lose a fair bit of its well-known flexibility.
Today we’re going to take a look at shortcodes from a user’s perspective. They are a very useful tool that can make your content really shine, so it’s worth taking the time to learn a few tricks.
A Brief Introduction To Shortcodes
For those who are unfamiliar to shortcodes, here is a simple tutorial to get you started. In simple terms, WordPress shortcodes are basically a set of tags that can format a particular piece of content. They are written much like HTML tags, except that they use brackets () instead of the less-than and greater-than signs. Additionally, a shortcode may have any number of attributes, which can have a value in order to define any special properties or variables it may have. A shortcode will typically look like one of these forms:
[[posts number=”3″]My Post List[/posts]]
In the above example, the shortcode posts is enclosing the My Post List content, and taking an attribute named number with a value of 3. This shortcode may then be used to arbitrarily format the given data into a different piece of design.
Shortcodes are primarily defined by code residing in plugins and themes, although there are a number of them defined by the WordPress core. These official shortcodes are meant for embedding media onto a page’s content, like gallery or video, but don’t provide much else.
Mastering The Use Of Shortcodes
WordPress shortcodes can be a bit daunting to use for the first time, but with a bit of practice you’ll soon become accustomed to them. The reason shortcodes are so powerfult is because they provide granular control over each element of the design. If, for example, you wish to create a page with 2 columns, you can still manipulate the content of each column with the same ease of a normal post.
Mastering shortcodes is a matter of practicing, so we will take a look at some of the things you can achieve with them with a practical example. For this guide we will be using our very own plugin, the CPO Shortcodes, and our free theme from the official repository, Intuition. While there are plenty of alternative plugins, we decided to use our own since both of them are readily available for you to use. Also, most shortcode plugins provide the same design elements– accordions, buttons, columns, and so on–, so you will be able to use any other plugin afterwards without issue.
Creating an Interesting About Page
For this guide we have created an extensive about page on one of our theme demos. The design of the page has been created using solely the CPO Shortcodes plugin, and it shows what you can do with shortcodes and a blank page using the full-width template. If you want to recreate this page on your website, all you need to do is the following:
- Download this text file, which contains the plain text code of the demo page.
- Create a new page on your website.
- Set the page to use the full-width template, so the content takes all the available space.
- Switch to the Text tab, and then paste the contents of the aforementioned text file.
- You’re done!
The demo page shows a few basic techniques for designing with shortcodes. These are fairly simple tricks you can follow to start creating better pages, even if you’re not a designer.
Separating The Content Into Columns
The most basic usage of shortcodes for layout is to create multiple columns. Separating the content into distinguishable blocks will make your content look more organized, and you can take advantage of this to add images or other media. As you work with columns, you will begin to see all the possibilities that open up– certain layouts are simply not doable without a column-based design. It is recommended you use from 2 to 4 columns, as it is a good balance between the number of content blocks and the available space of each block.
In the case of the demo, we chose to go with a two-column layout for the intro paragraph. That way we can add a brief introduction to our page, and reserve the right side for a more entertaining piece of content. Although we went with a set of progress bars denoting our skills, an image banner can be equally as powerful.
Adding Icons To Each Content Block
The second most noticeable element of the page is the use of icons. Like images, they are a great tool for breathing life into your paragraphs, so make sure you use them liberally. Icons are also a nice way to help convey your message in a clearer way: the trick is to couple each of your ideas with an icon that is highly relevant. This way, your readers will more easily associate each block of content with a specific message or feature.
It’s also important to remember the use of color. Here, the icons have a more prominent presence thanks to their vivid orange hue. It is great for breaking a monotonous page full of text into readable chunks, so make sure you always use at least some degree of color when creating pages.
Use Background Images
Shortcodes are really good for creating sections with a contrasting appearance. For example, take note of the counters at the end of the page. They stand out due to the use of a contrasting background, while at the same time having a different color from the rest of the page. Design elements like this are useful for creating visual separations between areas of your page, so that readers can clearly see where each section starts. You can take advantage of this to highlight important ideas in your site, so you can direct their attention wherever you want.
Using a blurred background image is a great way of creating a nice contrast against the rest of the page. One word of caution though: always make sure the image you choose for the background is dark enough for the white text to be readable.
Pitfalls To Avoid
While shortcodes are very powerful, they are also rather fragile. WordPress has a long history of trouble with shortcode parsing, so you’ll need to be a bit careful when adding a lot of them onto your content. While using them separately doesn’t cause any trouble, the problems may appear when trying to combine many of them and nesting multiple levels of shortcodes.
We always recommend placing shortcodes on their own line, so that they can be recognized more easily by WordPress. This alone may take care of most of your troubles, but there are a few things you should watch out for.
Nesting The Same Shortcode
The most important thing to keep in mind when dealing with shortcodes is to avoid nesting the same shortcodes one inside another. As of version 3.8, WordPress is not able to properly parse shortcodes in this manner, and as such your layout will break. This is something that occurs more often than you would think, especially when trying to create multi-column layouts.
Not Separating Attributes
Another important detail of shortcodes is that they’re very picky when it comes to formatting them in the visual editor. Attributes must be always separated by at least a space, or else the whole shortcode won’t be parsed. This means you need to avoid syntax such as title=”name”number=”2″ to get it right. In this example, you’d have to add a space just before the number attribute.
Improperly Closed Shortcodes
The last, but not any less important aspect of proper shortcode writing is line breaking. When using the visual editor, WordPress will convert every line break into a paragraph block (by adding <p> tags); shortcodes must then remove any of these tags in order to output well-formed HTML content.
The problem comes when you add a shortcode and separate it into many lines in an inconsistent manner. One example would be:
[[my_shortcode]]This is some content.
It has two lines.
In this case, the shortcode parser can have trouble finding all the <p> tags, since the first line will be counted as a single paragraph but will not distinguish between the beginning of the content and the opening tag. In any case, this issue can be solved by formatting the same content in the following manner:
This is some content.
It has two lines.
This version will make it easier for the shortcode to parse all of its contents, and then output the right result.
Shortcodes are a powerful tool that can spice up your WordPress site when used properly. Although they may take a bit of time to get used to, they’re definitely worth the effort. Thanks to the many plugins and extensions using shortcodes, you can go from having a static website to adding just about any kind of interactive content to your pages.
Do you use shortcodes regularly? What is your experience with them?