Post Image

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 audio 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:

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.

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.