Wordpress

How to Add A Shortcode in WordPress?

Have you ever had a time where you wanted to add some specialized content to your WordPress post or page, but weren’t sure how? Maybe you wanted to embed a Twitter widget or some content called back from some website or API. How can you easily add this type of content to your WordPress post? Fortunately, WordPress provides something called a shortcode to make this kind of task extremely easy. This tutorial will take you through the process of building, installing, and using a shortcode in your WordPress installation. Let’s start by seeing what a shortcode is.

What is a WordPress Shortcode?

Briefly, a shortcode is a special tag that you can enter into a post that gets replaced with different content when actually viewing the post on the website. If you have ever embedded a WordPress gallery on your blog, then you’ve already seen the built in short code .

When you load a blog page with the

shortcode, WordPress replaces the

shortcode with all of the code that actually displays a gallery of your images.

As you can see from the above example, a shortcode looks similar to an HTML tag, but is enclosed with square brackets instead of angle brackets. This code gets replaced with some other code when the page is actually loaded in a web browser. The really cool thing is that WordPress allows you to create your own custom shortcodes to display pretty much anything! You could use it to output a Youtube video, show your latest tweets, or even customize it however you like.

In case that doesn’t make sense, let’s look at an example. Let’s say I want to output an AdSense ad within my post. I could go into the HTML mode of the WordPress content editor and copy and paste the Adsense code block into it, but this would be tedious and potentially distracting with all the extra markup in my post. In addition, if I wanted to change the ad block, I would have to go back to each and every post to change it to the new one. An easier way and more reliable way to add the Adsense block wherever I wanted would be to use an adsense shortcode. The shortcode could look like this:

1 [adsense]

When actually looking at the post on your website, the shortcode would be replaced with the Adsense ad block. So how do you create this shortcode? Obviously, you need to tell WordPress what to replace the shortcode with somehow. Let’s look at that next.

How do I Create A Shortcode?

Fortunately, WordPress makes it pretty simple to make your own shortcodes, so let’s actually go about implementing the [adsense] shortcode. The first thing we need to do is define a function that outputs the actual Adsense code. All of the following code will go in functions.php in your theme (it could also go in a standalone plugin file). Got it? Ok, so let’s look at that function.

01 function get_adsense($atts) {
02     return '<script type="text/javascript"><!--
03 google_ad_client = "pub-546321545321589";
04 /* 468x60, created 9/13/10 */
05 google_ad_slot = "54321565498";
06 google_ad_width = 468;
07 google_ad_height = 60;
08 //-->
09 </script>
10 <script type="text/javascript"
12 </script>
13 ';
14 }

This function is pretty straightforward – it just returns my Google Adsense code as a string. Whatever this function returns is what my shortcode will be replaced with, so I could potentially have returned the html for a Twitter widget, or a list of the child posts of this one, or anything else.

Now that we have a function that returns what we want, how do we hook that up to a shortcode? Now this is where the WordPress API comes in. Again let’s look at how we do it and then explain what’s going on. Here’s the call to set up the adsense shortcode.

1 add_shortcode('adsense', 'get_adsense');

That’s it! The first parameter passed in is the name of the shortcode, so in our case, ‘adsense’ tells WordPress to create the [adsense] shortcode. The second parameter designates the function that will be called when the new shortcode is encountered. Again, in our case, ‘get_adsense’ tells WordPress to replace [adsense] with the results of our get_adsense method.

Not too bad is it? Now this is a very simple shortcode, WordPress allows you to do much more with your shortcodes, including adding parameters (maybe you want to choose between adsense blocks?). The full API can be seen at the WordPress Codex.

How do I Use my Shortcode?

This last part is simple, just add the [adsense] shortcode in the HTML or Visual views of the Post or Page content editor. That’s it! You’ve created your first shortcode.

John GadboisJohn Gadbois is the co-owner and technical lead at , a domain name tools site. He also runs CalculatorPro, a cool calculator sites with all sorts of financial calculators. He enjoys learning about and coding with Ruby on Rails, jQuery, WordPress, and PHP.

Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.
WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Paul

    Just came across this as I’m looking to add my own shortcodes, I can understand the function part of it, but which document do you include the “hook up”

    “add_shortcode(‘adsense’, ‘get_adsense’); line”

    that would be helpful to me

    Thanks

  2. Patrick

    I’m clueless and am trying to create a short code to insert the blog’s owner’s user name. Any ideas?

    • Editorial Staff

      Write a function that outputs the username. Then put that function in the shortcode output. Unfortunately, we do not write custom codes like those on requests.

  3. The Dividend Ninja

    You forgot to put the semicolon after the ‘ on line 13, which would cause an error, and show people how to call the function. So it would look like this:

    </script>
    ‘;
    }
    add_shortcode(‘adsense’, ‘get_adsense’);

    But nice job explaining :) Cheers!

  4. wt

    So how to add a box with a CSS style using shortcode?Where should I put CSS content in?

  5. ayushwhizkid

    I have installed a plugin that uses shortcodes to add styled boxes. I want to add the box to my posts by putting in the single.php. How to insert shortcode content to php file.

    p.s. want to use the box for author info!

  6. KishaanSha

    I added a shortcode:

    add_shortcode(‘post_title’, ‘get_the_title’);

    which returns post title.. But that post title doen’t displays in rss feed. What may the problem? Where that shortcode [post_title] shoul appear, there is blank space only. Can anyone help me to fix it.. Thank you.

  7. BlogAid

    I can see a lot of custom uses for this. Thanks for the post. ~ MaAnna

  8. denisa

    how to make a short code for the archive page, whether this be?

  9. Crysislevel

    thanx for this…i added many shortcodes to my site with the help of plugins and implemented them in my single.php file!

  10. Groho

    I think it’s the very basic tutorial to add shortcode in wordpress

  11. graphicbeacon

    This is pretty basic. The links below will provide a detailed use of wordpress shortcodes.

    http://www.problogdesign.com/wordpress/working-with-wordpress-shortcodes/

    http://www.graphicbeacon.com/how-to-add-a-paypal-donation-shortcode-button-to-your-posts/

    A flexible shortcode is one that will allow you to edit certain attributes. Couldn’t the google adsense code be tweaked to allow the user to set attributes such as the width/height and even ad client?

  12. Glenn

    wow nice, so I need to add my shortcode in my functions.php just in case I changed my wordpress theme?

    • Editorial Staff

      Yes, it is crucial that you update the functions to the next functions.php file if you change themes.

  13. Bill

    Straightforward enough, except where do I put the

    add_shortcode(‘adsense’, ‘get_adsense’);

    statement?

    • Editorial Staff

      You put this right below the function that is mentioned in the article in your functions.php file.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s