Why You Need WordPress Shortcodes (And How to Create Them)

Editor’s note: Previously, this post had custom styles associated with it to display the example shortcode buttons. We have since removed these styles, so the buttons will no longer appear as described in the post.

When you write content for your website, chances are, you’ll use a lot of the same HTML and CSS to include special functionality on specific pages.

The problem is, repeating this code, day in and day out, can be tedious and prone to errors.

How can you avoid this heart-ache?

There’s a WordPress feature called shortcodes, and when you implement them, you’ll be able to call regularly used pieces of code in seconds while decreasing the chance of mistakes.

Oh, and the best part? Shortcodes work beautifully with the Thesis Theme. So, keep reading!

What Are WordPress Shortcodes?

Shortcodes are just that, short bits of code that cut down on repetitive strings of HTML, and can be inserted anywhere in your site.

For instance, you could create a shortcode to insert a call to action button, or to display a Google AdSense ad, or to create 3 columns of content without any HTML markup.

What do shortcodes look like?

A shortcode is a descriptive bit of text wrapped in square brackets, e.g. [adsense] – which could be dropped into your WordPress post to display a block of Google ads.

The question is, how does this save you considerable time?

Take a look at this button code I made for a client:

<a class="button" href="https://www.google.com"><span>Google</span></a>

Using that as raw code, my client would have to remember to:

• assign a class to a link
• wrap the button in a span tag

Think about it…

Every time my client needed a button, she would have to remember to do those two specific steps, which, for non-technical people, is like asking them to get a root canal without an injection.

So, to spare my client much agony, I created a shortcode that makes more sense:

[button link="https://google.com"]Go to Google[/button]

The shortcode above creates a button with the text “Go to Google” which could link to google.com, just like the one below.

Go to Google

How to Create a WordPress Shortcode in Thesis

If you want to begin using shortcodes, there’s a few minutes of prep work, but it’s worth it because you’ll save much time later.

Step 1 — Open your custom_functions.php file and your custom.css file.

Step 2 — Paste the following in your custom_functions.php file:

function sButton($atts, $content = null) {
   extract(shortcode_atts(array('link' => '#'), $atts));
   return '<a class="button" href="'.$link.'"><span>' . do_shortcode($content) . '</span></a>';
}
add_shortcode('button', 'sButton');

That was easy, right? However, what’s going on here?

1. We’re telling WordPress to create a new, empty function, called sButton
2. Then, we tell it to wrap this shortcode .do_shortcode($content) in some HTML
3. Doing this, allows us to add our own URL to the button in the $link position.
4. Finally, we want WordPress to create a new shortcode add_shortcode('button', 'sButton');, naming the button “button” and linking it to the sButton function we’ve just created.

So far our button doesn’t look very impressive…

Go to Google

…But don’t worry because you can add some style and images to make it stand out.

For example, if you paste this code in your custom.css:

a.button {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    height: 31px;
    padding-right: 10px;
    color: #183f4c;
    background: transparent url(images/sm_a.png) no-repeat top right;
    text-decoration: none;
}

a.button:hover {
    color: #fff;
    background-position: bottom right;
    text-decoration: none;
}

a.button span {
    display: block;
    line-height: 14px;
    padding: 8px 0 9px 10px;
    background: transparent url(images/sm_span.png) no-repeat top left;
}

a.button:hover span {
    color: #fff;
    background-position: bottom left;
}

Then, upload these 2 images to your images folder (you can find your images folder in your custom Thesis folder):

• sm_a.png
• sm_span.png

Note: To save these images, right click on the link and click “Save Link As.”

If you’ve followed along, you’ll now be able to generate your button by adding [button link="#"]Go to Google[/button] anywhere in your post or Page.

The result?

Go to Google

What About WordPress Shortcodes in Widgets?

Personally, I’m a huge fan of keeping clients away from the code editor – non-technical people tend to get overwhelmed by looking at lines of code.

Unfortunately, WordPress doesn’t offer widget support for shortcodes by default. To solve this, you must add a little bit more code to your custom_functions.php file:

add_filter('widget_text', 'do_shortcode');

Job done! Now all your text widgets will accept shortcodes, and in the space of a couple of minutes, you’ve added a lot of easy-to-use functionality to your site.