WordPress Shortcodes: Get Started Today

WordPress Shortcodes: Get Started Today

shortcodes-header

Shortcodes allow you to insert chunks of text or code into your WordPress posts, simply by typing an assigned word into a post.

For example, by typing the shortcode

[contactform]

in your post, you can quickly and easily insert a fully fledge contact form. That is, if you are using a theme, framework or plugin that includes built-in shortcodes.  Unfortunately, out of the box, WordPress does not come with any such shortcodes (apart from the gallery shortcode).

The good news is that it is rather easy to create your own shortcodes, allowing you to insert larger pieces of text into your posts, whether it is HTML or PHP or something else of your choosing.

There are a few good reasons to this powerful function of WordPress, which include the ability to save time by preventing the need to repeatedly enter the same text over and over again. By inserting a tested piece of code into your posts by using shortcodes, you can also reduce the risk of errors occurring, that can happen when typing the code in manually each time you want to use it.

Also, for web designers, shortcodes are an excellent way to add extra functionality to your designs that users with less technical knowledge can use simply by entering a shortcode.

In a nutshell, shortcodes are a great way to increase efficiency, reduce errors and add extra functionality to your WordPress sites.

Examples Uses of Shortcodes

Here are a few examples of shortcodes to give you an idea of what they can do and how you could benefit from using them:

Contact Details

If you are displaying your telephone number in multiple posts, you can use a shortcode to store the number, so that should it change at a later date, you don’t have to search for all the posts that contain the number and then change it. Storing the number in a shortcode and then simply typing [contact-number] in the posts is a great way to easily keep everything up-to-date. You could also use this for email addresses, names, title changes should someone get married and change from Miss to Mrs; the list of uses is endless!

The Facebook Link

If you are often entering a string of text into your posts, such as ‘Don’t forget to check out our Facebook page!’ then a simple shortcode could be just what you didn’t know you were looking for! By creating your own shortcode, you could simply type

[facebook]

into your post, and the call to action you’ve been manually adding to posts would be inserted.

Google AdSense Shortcodes

For those of you who are using Google AdSense to monetise your sites, you could insert your AdSense code into your posts using a shortcode. As the shortcode calls the AdSense code from one external location, if you ever wanted to change your AdSense code, you can just make the changes at the external location. This would then update all the posts where you used the shortcode, preventing you from going into each post manually.

For Web Designers

If you are a web designer who creates sites for people with little to no coding skills, you can easily allow them to insert elements into their pages without using any HTML, simply by using shortcodes to insert snippets of code you have written for them. These could include buttons, specific links, images, forms or anything that you can think of.

Even though most premium themes and frameworks come with their own libraries of shortcodes, there are still plenty of occasions when creating your own makes sense. Making your own shortcode is easier than you might think and getting started is very simple.

How to Create Your First Shortcode

Hopefully you’re now starting to see the potential of shortcodes which means it’s time to have a go at creating your first one. This does involve editing one of the essential WordPress files, so make sure you create a backup of the functions.php file located in the ..wp-content/themes/theme-name/ directory before you start.

Simple Link Shortcode

This shortcode is ideal for quickly inserting a link to a specific page into your posts:

  • In your WordPress dashboard, go into the Editor, found under the Appearance sub-menu.
  • Select functions.php from the file list on the right hand side of the page.
  • Add this code to the end of the file:

// start shortcode twitter
add_shortcode('twitter', 'twitter_shortcode');
function twitter_shortcode() {
return '<a href="http://twitter.com/joecanwrite">Follow me on Twitter!</a>';
}

  • Click the ‘Update File’ button to save the file.
  • In a WordPress post or page type [twitter] and upon previewing the page you should see a text link to Twitter.

Explanation of the Shortcode Code:

The first line is just a comment to remind you and let people know what the code is for. The second line gives the shortcode its name and handler. In this case ‘twitter’ is the name of the shortcode and what you must type in your post to execute it (inside square brackets i.e.
[twitter]
). You can change this to something else if you want. The next line is what will be returned when the shortcode is executed. You can also change this to whatever you want, including a link to your own Twitter account or another page entirely.

While this is a basic example of a shortcode, it should hopefully illustrate their potential. This shortcode, for example could be used several times throughout a post to prompt your readers to visit a specific page, on or off your site.

Tip: You could also use some CSS to improve the appearance of the link by assigning it a custom class by adding:

<a class="twitter_sc" href=”..>

where ‘twitter_sc’ is the name of the CSS class.

Here is an example CSS class for the button to get you started (add this to the style.css file located in the directory of the theme you are using):

a.twitter_sc {
padding: 5px 10px;
display: inline;
background: blue;
border: none;
color: white;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-decoration: none;
}
a.twitter_sc:hover {
color: white;
background: green;
text-decoration: none;
}

Simple Link Button Shortcode

This is another simple shortcode that creates a clickable button on your page which you can use to make your links standout to your readers:

  • At the end of the functions.php paste the following code:

// start shortcode linkbutton
add_shortcode('linkbutton', 'linkbutton_shortcode');
function linkbutton_shortcode( $atts, $content = null ) {
return '<button type="button">'.do_shortcode($content).'</button>';
}

  • In a WordPress post or page type [linkbutton]button text[/linkbutton]
    and preview the page.
  • You could also combine the previous example with this one for an example of a nested shortcode: [linkbutton][twitter][/linkbutton]

Creating an External Shortcodes File

The functions.php file is an important file. Adding lots of custom code to it increases the risk of it getting corrupted. For best practice, it is advisable to create a new file that contains your shortcodes, instead of putting them directly into the functions.php file.

Also, as functions.php is part of the theme you are using, changing themes, or sometimes upgrading a theme, can overwrite this file, and in the process erase all your custom shortcodes which can cause lots of problems! By putting your shortcodes in their own file, in a different directory, you can minimise the risk of this happening.

Follow these steps to create an external file to store your shortcodes:

  • Remove any of the shortcodes you might have added to the functions.php from following this guide.
  • Create a new file called shortcodes.php in the wp-content directory.
  • Include this line in your functions.php file:
    include(WP_CONTENT_DIR . '/shortcodes.php');
  • On the next line enter this code:
    add_shortcode( 'twitter', 'twitter_shortcode' );
    which you will notice is the first line of the first shortcode we created.
  • Now add the following to the the shortcodes.php file:

<?php
// start shortcode twitter
function twitter_shortcode() {
return '<a href="http://twitter.com/joecanwrite">Follow me on Twitter!</a>';
}
?>

  • When adding another shortcode, add this line to the functions.php file:

add_shortcode( 'linkbutton', 'linkbutton_shortcode' );

  • where ‘linkbutton’ is the name of the shortcode and ‘linkbutton_shortcode’ is the function name.
  • Then add the shortcode code to the shortcodes.php file like so:

Although you are still editing the functions.php, most of the code is kept in an external file which should reduce the risk of something getting broken in the functions.php file, while also making it easier to reactivate the shortcodes when changing themes.

The Best WordPress Shortcode Plugins

Now that you’ve seen the power of shortcodes you should be interested in some of these shortcode plugins.  While creating your own shortcodes from scratch is fun, it can be a steep learning curve so these mostly free plugins can really speed up the process and have you using shortcodes on your site in no time at all.

Easy Shortcode Buttons

shortcodes-easy-shortcode-buttons

This simple yet effective free plugin allows you to use shortcodes to create attractive Web 2.0 style buttons. Installing this plugin adds a new button to the visual post editor which when pressed enters this shortcode into you post:

Joe

You can then edit this to change the colour, size, shape and alignment of the button without the need to know, or enter, any HTML or CSS. If you are only interested in adding great buttons to your posts then this is the plugin for you.

Either install it from your WordPress dashboard by searching for ‘easy shortcode buttons’ or download it from here.

Shortcodes Ultimate

shortcodes-shortcodes-ultimate

This free plugin brings many of the features you only get with premium themes to your WordPress site. Not only can it create amazing buttons at the touch of button, but you can also add columns to your layouts, tabbed boxes, information boxes, attractive list icons and many other features.

Search for ‘shortcodes ultimate’ to install this plug or download it from the plugins directory.

WordPress Shortcodes

shortcodes-wordpress-shortcodes

This plugin has a whole raft of shortcodes to add attractive elements to your posts and pages such as buttons, tabbed boxes, author cards, lists and columns. While the interface is a bit clunky, and some of the elements aren’t as attractive as the screenshots suggest, WordPress Shortcuts does contain a lot of elements that can be added to your site and is well worth a look when it comes to getting ideas and inspiration for creating your own shortcodes.

There is also a premium version of this plugin available which can spruce up the elements quite a bit, but the free version probably has enough for most users to get started.

As usual, search for the title of this plugin ‘wordpress shortcodes’ from the ‘add new plugins’ page in your WordPress dashboard or download it from here.

Shortcode Developer

shortcodes-shortcode-developer

This plugin makes it even easier to create your own shortcodes as you can create and edit them through the WordPress dashboard rather than delving into the functions.php and other important files.

To install search for ‘shortcode developer’ or for more information visit the page for this plugin at WordPress.org

Hopefully this guide to WordPress shortcodes has covered everything you need to know to start using them on your blog with confidence, whether you choose to make them yourself or use the free and premium shortcode plugins available today.