What the heck is a “shortcode”?


Have you ever wanted to add a special feature or change some layout or just customize the way your WordPress website displays to your visitors? Then you will love learning about “shortcodes”.

Introduced in WordPress from 2.5 onward, they are “macro codes” you can place within your content – in the main content, in sidebars and widgets, where ever you need just a bit of customization to help your site stand out from all the others who are using a similar theme. This can be a great way to create a reusable dynamic ad spot or a call-to-action button in your posts.

Examples of custom shortcodes I’ve developed for my clients include simple “call to action” buttons and a custom module that grabs the 10 next performances from a musician performances database and then display those in a unique way on the artist’s home page.

Since shortcodes enhance the core functionality of the WordPress software, one has to know a bit about the internal file stucture of a WordPress site. Since your theme’s “functions.php” file will require a little adjustment, this brings up the issue of “where the heck to I place my shortcode code” such that it survives a software update to your theme or core WordPress itself. We’ll get to that in a minute.

If we use the call-to-action example, you could add something like this to your blogpost to show the button, and then edit the output in your templates functions.php file, which we’ll get to in a minute.


To customize the button, we could simply add something like:

[button type="twitter"]

Or to make it even better, we could use an enclosing shortcode:

[button type="twitter"]Follow me on Twitter![/button]

With some imagination, you soon realize the potential of shortcodes, and what can be done with them. In this article, I’ll show you how to create and use these three different types of shortcodes, and then I’ll show off some ready-to-use shortcodes to use on your own WordPress site.

Creating a self-closing shortcode

The simplest shortcode is the self-closing one. We’re going to create a simple link to our Twitter account, and then add it in a blog post.

All the code goes in functions.php, which is located in /wp-content/themes/your-theme/. If you don’t have one, just create it and put the code in it.

function button_shortcode() {
    return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follow me on Twitter!</a>"';
add_shortcode('button', 'button_shortcode'); 


Getting Started with WordPress Shortcodes & Sample Snippets

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.