How to Add a WordPress Shortcode to Your Site

The shortcode is a powerful tool for anyone interested in modifying the way their WordPress site works, since shortcodes offer the ultimate customization without forcing you to know much about coding in general.

Shortcodes are essentially short words or phrases that are placed in brackets [like-this]. You can place a WordPress shortcode into the editor, which then references additional information in your functions.php file to reveal something on the frontend of your website.

For example, if you want to embed a video file for a blog post, simply place brackets [ ] around the word video to reference a video that was previously uploaded on your site. Shortcodes are great for creating things like buttons, accordion style sliders, Twitter widgets, dividers, and all sorts of formatting goodies that would typically force you to understand PHP coding.

Shortcodes are meant to make your life easier, but to add new shortcodes to your WordPress site you need to actually tell the system what you want the shortcode to be replaced with. Let’s take a look at some methods to add new WordPress shortcode options to take full control of your site.

Start With the Default WordPress Shortcodes

WordPress actually comes packaged with a few default shortcodes for you to use without placing anything in your functions.php file. Click on the links below to learn more about the default WordPress shortcodes:

The WordPress API lets you generate an exponential amount of other shortcodes, but unfortunately, people tend to forget about these powerful features and only stick with the default shortcodes. Read on to see how you can stop settling for what is provided and create custom shortcodes to make your site look just the way you want.

How to Create a WordPress Shortcode

To start, we want to make a shortcode that delivers an Adsense module by simply typing [adsense] into the editor.

Step 1: Place the Function into functions.php

Find the functions.php file for your WordPress site, and paste the following function in the file. We are using the Adsense function as an easy example. A function is basically the piece that tells the shortcode what to reveal on the frontend of your site. In this case, when we place the [adsense] shortcode in the site, it uses the following function to show an ad.

function google_adsense() {
return '<script type="text/javascript"><!--
google_ad_client = "<em>your client id</em>";
google_ad_slot = "<em>your ad slot id</em>";
google_ad_width = <em>width</em>;
google_ad_height = <em>height</em>;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
';
}

This code that you just placed into your functions.php file is what replaces the shortcode on the frontend–in this case a simple Adsense module. Depending on your function and shortcode you can add columns, custom buttons, social media widgets, and more.

Step 2: Linking Your Shortcode to the Function

Just because you created the shortcode and function doesn’t mean the two are linked together. Now we need to add a final call to pair the two. Use the call below:

add_shortcode('adsense', 'google_adsense');

The first word is what you want to call your shortcode. So, since we listed it as “adsense,” WordPress automatically generates an [adsense] shortcode. We called the function google_adsense so the second parameter in our call tells WordPress that it needs to use that particular function whenever you place the proper shortcode on your website.

Keep in mind that this is just one of many shortcodes you can create on WordPress. If you are interested in generating more, go to the WordPress shortcode API.

Step 3: Making the Shortcode Work on Your WordPress Site

To see what your shortcode generates on the actual frontend of your site you need to open a page or post in WordPress and place the [adsense] shortcode in the text. Click to preview what shows up on your site or publish the page or post to make it permanent. That’s it! You are now well on your way to cutting down loads of time by using shortcodes.

Consider Using Shortcode Plugins to Simplify the Process

If you don’t want to mess with functions, simply activate a plugin to complete the dirty work for you.

#1 Shortcodes Ultimate

Shortcodes Ultimate is one of the more popular options if you don’t want to create the shortcodes yourself. Find shortcodes for new tabs, boxes, buttons, sliders, and more. It’s nice because you can upgrade to the premium version to receive additional shortcodes if you start using them more often.

Keep in mind that when you choose a shortcode plugin you need to ensure that the design is responsive so you can manipulate your shortcodes while on other devices and the shortcodes actually respond to various devices when they are being displayed on the frontend.

#2 Easy Bootstrap Shortcode

Easy Bootstrap Shortcode has a simple interface, which is nice for the beginner webmasters out there. It has an interesting feature that lets you create a shortcode in the plugin and forget about typing in the shortcode to the editor. In my opinion, it’s not that hard to put a shortcode in, but I guess it saves you an additional step.

This fancy plugin also offers you the power to disable the plugin’s CSS. This gives you a chance to utilize any custom CSS that you made yourself. I’ve used this plugin several times in the past, and the developer actually updates it with new shortcodes all the time. This is nice because you receive a bunch of free new toys to play with whenever an update is released.

#3 CPO Shortcodes

CPO Shortcodes isn’t anything different from the other plugins, so feel free to try it out and see if the interface works better for you. There are over 30 shortcodes included with the plugin such as shortcodes for progress bars, inline maps, team members, notifications, and more.

It has a nice visual shortcode creator so you can see what the result is before you even publish to your website. The plugin also includes a tab at the top of your editor for easy access.

#4 Olevmedia Shortcodes

Olevmedia Shortcodes also adds a visual design module and a button above the editor for you to get an idea of the shortcodes you want to use before implementing them on your site. Try out some of the cooler shortcodes like markers, tables, infoboxes, pricing tables, logos and more.

A big plus is that the shortcode layout is completely responsive, so when you publish a post or page with a shortcode, people can view it just fine if they are using a tablet or mobile device. You’ll also notice that many of these plugins include screenshots and helpful tutorials to see exactly what the shortcodes are going to look like before you even have to install the plugin.

I like scanning through the shortcodes offered in each plugin beforehand, so as not to waste any time installing a dozen plugins and playing around with each one to figure it out.

#5 Shortcoder

Shortcoder is a unique take on the traditional shortcode plugin. Instead of just providing a bunch of prepackaged shortcodes it assists in developing your own custom shortcodes. You store the HTML or other snippets in the plugin itself and link it to any shortcode you want.

The visual editor is pretty darn nice for seeing what you are creating, and it seems to work nicely for both beginners and experts alike, since you can customize from scratch or pull from templates.

We hope this post has heelped you add shortcut to your WordPress site. You may want to see our guide on how to add a Custom Logo to Your WordPress Site.

Share your thoughts in the comments section if you have any questions about WordPress shortcode options and how to use them on your site. Are there any particular WordPress shortcodes that you just can’t live without? Let us know!

1 Comment Leave a Reply