Managing a WordPress website consists of much more than just writing blog posts.

There are themes and plugins to update, backups and security scans to run, comment moderation, database maintenance, and a myriad of other tasks… most of which are rather boring and repetitive.

But the most annoying tasks are the ones that crop up right in the middle of writing a post, like having to hunt down a piece of code to insert an ad, signup form, icon, or other common element into your post or page.

If you find yourself using the same bit of code over and over again, there’s an easier way — a shortcut that could save you a ton of time on managing your blog.

Instead of typing out all the code, or hunting it down to copy and paste it, you could use shortcodes.

You’ve probably used shortcodes before, maybe a native WordPress one or a custom shortcode that came with a theme or plugin.

But did you know it’s pretty easy to create your own, with no plugins necessary?

If you can copy and paste code, you can create your own shortcodes, and save yourself a ton of time on repetitive tasks. This tutorial will show you how.

What are shortcodes in WordPress?

what are shortcodes

If you haven’t used shortcodes in WordPress before, you’re missing out on an incredibly useful and versatile feature that makes managing your site a whole lot easier.

In a nutshell, a shortcode is a shortcut for code.

Specifically, it’s a shortcut for PHP code. But don’t worry, you don’t need to be a programmer to create your own. If you’re already copying and pasting this code into your posts and pages manually, you have what it takes to create your own shortcodes.

A shortcode is a word in brackets that looks like this:

[shortcode]

You type your shortcode into the WordPress editor when you’re creating a post or a page. WordPress then recognizes the shortcode and replaces it with whatever code it’s linked to.

WordPress comes with some shortcodes already set up out of the box (you can check out a short list of WordPress.org shortcodes in the codex). Most of them are for easily embedding content like audio and video files or image galleries. Often themes and plugins will enable new shortcodes, too.

By default, shortcodes only work on posts or pages. However, you can enable shortcodes in widgets with a plugin, or by adding a bit of code to your functions.php file (more on that later).

Why use shortcodes?

Why use shortcodes for WordPress

There are two main benefits to shortcodes:

  • They save you time. If you use the same code over and over again, you can use a small shortcode to quickly insert code instead.
  • They look better. Yes, code can be beautiful — but maybe not in the middle of your blog post. It’s difficult to proofread a blog post or edit it when there’s a big lump of code in the middle of your words. Shortcodes make it easier to read and edit your blog posts without code getting in the way.

What might you create a shortcode for? How about:

  • Inserting ads into the middle of a post
  • Displaying icons, graphics, or buttons
  • Using an email optin form in the middle of a post or page
  • Adding social sharing icons or links to your post
  • Adding a Paypal donation or buy now button

Ready to get started creating your own?

How to create your own custom shortcodes

WordPress Shortcodes Tutorial

In order to use your own shortcodes, you need to tell WordPress what code to use when it sees your shortcode. You do this by registering new shortcodes in your functions.php file.

The functions.php file is an essential file included with every WordPress theme. It can be used to change or add functionality to WordPress. You can find your functions.php file in your theme file directory, which is in the directory WordPress is installed to in your wp-content/themes file. Your functions.php file can also be edited from your WordPress dashboard in Appearance > Editor.

A word of warning: Be sure to backup your website, and your original functions.php file, before changing your functions.php file, since something as minor as a misplaced semicolon can crash your website. It’s better to edit functions.php from your web host’s file manager or via FTP, so that you can fix it right away if your site crashes and you’re no longer able to access the WordPress dashboard.

Once you have your site backup and your functions.php backup ready, here’s how you can start creating your own shortcode:

Step 1: Prepare your code

First, you’ll need to have your code ready. (This is the code you want WordPress to insert whenever you use your shortcode.)

The code must be PHP code. PHP can be recognized by its opening and closing tags, which look like this:

<?php
 ?>

If you have HTML code instead, and you don’t know PHP code, you can use an HTML to PHP converter to “translate” it.

As an example, let’s say we want to create a shortcode to display this icon, called client-icon.png, from the Cat Commerce Icons by Iconka.com:

Client Icon

(I don’t know why you’d use this so often you’d need a shortcode for it, but I’m not here to judge.)

To display this icon, you might use HTML code that looks like this:

<img src="http://wpsuperstars.adamconnell1.netdna-cdn.com/wp-content/uploads/client-icon.png" alt="client-icon" width="128" height="128" class="alignleft size-full wp-image-1381" />

In order to make this a shortcode, we need that to be PHP code instead, so I’ll run it through that converter. Here’s the result:

<?php

echo "<img src=\"http://www.kerilynnengel.com/wp-content/uploads/client-icon.png\" alt=\"client-icon\" width=\"128\" height=\"128\" class=\"alignleft size-full wp-image-1381\" />\n";

?>

As you can see, it now has the PHP opening and closing tags. You can get rid of those, so we can just use the code in the middle:

echo "<img src=\"http://www.kerilynnengel.com/wp-content/uploads/client-icon.png\" alt=\"client-icon\" width=\"128\" height=\"128\" class=\"alignleft size-full wp-image-1381\" />\n";

Step 2: Create your shortcode function

Next, we’re going to use that bit of code to create a function to add to your functions.php file.

You’ll need to come up with a shortcode tag name, which is the word you’ll use in brackets. Avoid using spaces or hyphens, since these could cause your shortcode to not work, or behave unexpectedly.

You’ll also have to name your new function. For PHP function names, you can use underscores to separate words if you’d like.

For our cat icon, we’ll use the shortcode tag “clientcat,” and the function name “clientcat_function.”

Now, we need to register our new shortcode with WordPress. Here’s what the code to do that looks like:

function clientcat_function() {

echo "<img src=\"http://www.kerilynnengel.com/wp-content/uploads/client-icon.png\" alt=\"client-icon\" width=\"128\" height=\"128\" class=\"alignleft size-full wp-image-1381\" />\n";

}

add_shortcode( 'clientcat', 'clientcat_function' );

To use your own code instead, you’ll need to replace the bold text with your own shortcode tag, function name, and code.

Step 3: Add your new shortcode function to functions.php

Now, access your theme’s functions.php file, located in your theme’s file directory in wp-content/themes/, and add the code you created to the end of the file. Save your changes, and check to see if your website is still up.

If you’re getting a blank white screen instead of your website loading, check your functions.php file and make sure you correctly copied and pasted the code. Review the directions above step by step: there should be no opening or closing PHP tags, and it should all be PHP code (no bare HTML).

Step 4: Test your shortcode

Now that your new shortcode is registered, give it a try! Use your new shortcode in a post or page, and make sure your code is working correctly.

If you’ve used the example code above, you should be able to use the shortcode [clientcat] in a post and see the wonderful image above.

The power of shortcodes

Shortcodes make so many things easier.

That includes everything from adding opt-in forms to other eye-catching elements.

Now you’ll be able to create your own shortcodes – the sky is the limit!

Posted by KeriLynn Engel

KeriLynn Engel is a copywriter & content marketing strategist. Keri loves working with B2B & B2C businesses to plan and create high-quality content that attracts and converts their target audience. When not writing, you can find her reading speculative fiction, watching Star Trek, or playing Telemann flute fantasias at a local open mic.