WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

How to Create Your Own Custom WordPress Shortcode

Last Updated on December 13th, 2018

Published on September 4th, 2017


Share This Article

If you’ve been using WordPress for any amount of time, you’ve probably come across a plugin that let you add functionality to your WordPress site with shortcodes. A quick perusal will turn up tons of dedicated shortcode plugins, not to mention regular plugins that use shortcodes as part of the package.

But did you know that you can actually create your own custom WordPress shortcode?

As you learn more about WordPress, things like creating your own plugins and shortcodes can unlock even more power from the world’s most popular content management system (that’s WordPress, in case you forgot!).

In this post, I’ll tell you a bit more about how shortcodes actually work. Then, I’ll give you a quick guide for how to create some basic custom WordPress shortcodes.

How Do Shortcodes Actually Work?

Ok, I said that there’s a good chance that you’ve used WordPress shortcodes, but that doesn’t necessarily mean you have an understanding of what a shortcode actually does under the hood.

Shortcodes are basically placeholders that WordPress swaps out for actual code snippets. If you’re familiar with the concept of keyboard macros, shortcodes are pretty much the exact same thing.

That is, shortcodes are a user friendly way to add more detailed content without needing to type out the whole code snippet each time.

Why Is It Helpful to Be Able to Create Your Own Shortcodes?

In my opinion, creating your own shortcodes is helpful for two main reasons.

First off, it just flat out saves you time. For example, you could create a shortcode for a call to action button so that instead of needing to type out the HTML for your button every single time, all you need to do is add a simple shortcode and WordPress takes care of the rest.

Second, shortcodes are much more friendly for casual users. That might not help you (because I’m going to assume that you know at least a little bit about HTML/PHP if you’re reading this post).

Article Continues Below

But if you have authors or users who aren’t familiar with code? It’s much easier to show them how to use shortcodes than it is to try to get them to handle the code manually.

Even if it’s something as simple as just adding a basic CSS class to a link to turn it into a button, some users might struggle with the concept. Shortcodes, though? Those are much simpler for most people.

Are There Any Downsides to Using Shortcodes?

There can be downsides to using shortcodes created by other plugins or themes because they can essentially “lock you in” to using that plugin or theme for life. But if you’re using your own shortcode, you avoid that issue because you’re always in control.

How to Create Your Own WordPress Shortcode

Assuming you have some basic code knowledge, creating your own WordPress shortcode is probably simpler than you think it is. Basically, all you need to do is tell WordPress what code to swap in when a specific shortcode is used. There’s nothing more to it.

In fact, it’s probably more complicated to write the actual code that WordPress swaps in than it is to create your own shortcode by itself.

Still, let’s go through the process in detail to make sure there aren’t any hiccups.

Because this isn’t really a tutorial for 100% beginners, I am going to assume that you know at least the basics of HTML/PHP/CSS.

While the shortcode syntax is simple enough by itself, I wasn’t joking when I said that you’ll need some HTML/PHP code knowledge to be able to create shortcodes that are actually helpful.

Step 0: Back Up and Be Safe

To create your own WordPress shortcode, you’re going to be adding PHP snippets to your functions.php file (though you can also do it in a custom plugin if you feel up to it). Now, if you’ve ever done this before, you probably know that something as small as a missed comma or bracket can take your site completely offline (at least until you go back and fix the offending error).

So…you need to be safe about this.

Article Continues Below

First, make sure you have a recent backup of your site.

Beyond that, I recommend that you play around with your custom shortcode on a local development site or staging site whenever possible so that you’re not messing around with the live version of your site.

If you don’t want to do that, at least make sure that you’re adding your code snippet via either your FTP program or cPanel’s File Manager tool.

Why? Because if you use WordPress’ in-dashboard code editor, you’re going to get locked out of the editor if you make a single syntax mistake. That’s a panic-inducing moment so…do it via FTP or File Manager so you can correct the issue right away.

With that hefty warning out of the way, let’s actually build some shortcodes.

Creating a Simple Shortcode to Display Plain Text

Let’s start with a super simple example – we’ll create a shortcode that adds a predefined bit of text to your post.

Let’s make [hey_jude] get replaced by

Hey Jude, don’t make it bad
Take a sad song and make it better
Remember to let her into your heart
Then you can start to make it better

To do that, this is literally all you need:

function hey_jude(){
echo "Hey Jude, don't make it bad<br />Take a sad song and make it better<br />Remember to let her into your heart<br />Then you can start to make it better\n";

Article Continues Below

add_shortcode('hey_jude', 'hey_jude');

The first function defines what your shortcode should do. As you can see in my example, you can use HTML inside the PHP echo statement.

Basically, you’re just using the PHP echo statement to tell the shortcode to print out the lyrics to The Beatles’ Hey Jude.

Then, the add_shortcode part tells WordPress that it should replace the relevant shortcode with the PHP function that you defined.

Add that to your functions.php file and save the changes.

And just like that, this:

example of a custom WordPress shortcode

Turns into this on the front-end:

Getting a Little Bit More Creative With Our Shortcodes

Alright, the example above is nice enough to showcase the basic principle, but it’s just that…basic.

Let’s get more creative and build our own button shortcode. To do that, we’ll need to make it so that our shortcode can accept a link variable.

This time, the code (cribbed from Dave at DIY Themes) gets a little more advanced:

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

So what’s happening in that code? It:

  • Creates a shortcode that accepts a link parameter
  • Styles the link with the custombutton class
  • Makes the anchor text be whatever comes between the opening and closing tag of the shortcode

For example, this:

Becomes this on the front-end:

Why doesn’t it look like a button yet? Because you still need to add CSS for the new custombutton class.

Once you do that, you’ll have your own fancy shortcode button:

Wrapping Things Up

Creating a custom WordPress shortcode isn’t some mystical thing that only developers can accomplish. While it might not be 100% beginner friendly, it is accessible to anyone with some basic code knowledge. And once you get the hang of it, you can create some pretty cool time-saving shortcodes that are 100% specific to your site.

Now over to you – do you have any suggestions for how to best use shortcodes to save time? Let me know in the comments, please!

Stay informed on WordPress

Every Friday you’ll receive news, tutorials, reviews, and great deals from the WordPress space.

Invalid email address
Colin Newcomer is a freelance writer and long-time Internet marketer. He specializes in digital marketing, WordPress and B2B writing. He lives a life of danger, riding a scooter through the chaos of Hanoi. You can also follow his travel blog.