• Home  / 
  • WordPress
  •  /  Including content in WordPress posts using custom shortcodes

Make sure you don't miss the latest insights and tips. Click here to sign up for my mailing list now! ยป

Including content in WordPress posts using custom shortcodes

Often when you’re promoting a product or service, you’ll have a banner ad or call to action that you use in several different places around your website.

This is easily achieved if you want it in the same place on every page, you can just place it directly into your theme’s template files.

But what if you want to place your call to action within the contents of your posts, at various locations? Perhaps you want t0 place it near the start of one article, but not until near the end of another one. How can you do this without manually pasting the code into each article?

The solution is the WordPress shortcode API. A shortcode is a text string between square brackets (e.g. [cta] ), which you can place anywhere in a post or page, to execute a function, which you should define in functions.php

Setting up a Shortcode

First, we define what our shortcode will do, in functions.php

function call_to_action() {
    return '<a href="http://example.com">Click Here</a>';
}

Then we just assign this function to a new shortcode, also in functions.php

add_shortcode('cta', 'call_to_action');

The first argument here is the shortcode name, and the second is the function that the shortcode should execute.

So now, you simply add [cta] anywhere in your post, and the ‘Click Here’ link will be displayed in that location.

Of course, you can customise the function to output whatever you like. The possibilities are endless!

Using Shortcode Attributes

Let’s say you want to add the Call to Action as above, but you want to use a different URL on different pages.

We can add attributes to the shortcode so that we can specify which URL we want to use.

function call_to_action($atts) {
extract(shortcode_atts(array(
"href" => 'http://'
), $atts));
return '<a href="' . $href . '">Click Here</a>';
}

Now we can use the shortcode as follows:

[cta href=”http://example.com/page”]

and change the URL to suit our needs. We can also add additional arguments as required:

function call_to_action($atts) {
extract(shortcode_atts(array(
"href" => 'http://',
"class" => ''
), $atts));
return '<a href="' . $href . '" class="' . $class . '">Click Here</a>';
}

Here, I’ve left the ‘class’ attribute without a default value, but you could specify one if you wanted. Now the shortcode would look like this:

[cta href=”http://example.com/page” class=”large-cta”]

Using Shortcode Content

We can also use a shortcode a bit like an HTML tag, by using an opening and closing shortcode tag with content in between.

For example, say we also wanted to specify the text of the CTA. We could do this with another argument, but it may be easier to use the content argument.

function call_to_action($atts, $content = null) {
extract(shortcode_atts(array(
"href" => 'http://',
"class" => ''
), $atts));
return '<a href="' . $href . '" class="' . $class . '">' . $content . '</a>';
}

And now, we place our CTA text between opening and closing shortcode tags:

[cta href=”http://example.com/page” class=”large-cta”]Sign up Today[/cta]

As you can see, this can be customised to suit almost any purpose, so you get a lot of control over how content is displayed within your posts.

About the author

Dan Johnson

Dan used to be a WordPress developer at WDFS, but now he has gone off to pursue his passion for art, and he blogs about making a living from creativity at Right Brain Rockstar

Karen - 3 years ago

This sounded good until you started making it complicated. Most users want it simple and don’t know code.

Why wouldn’t they just upload the media to the media directory, insert it wherever they need it and add whichever link they need it to go to using the editor? They already know how to that.

Why make it more complicated?

CJ Glynn - 3 years ago

One of the shortest, clearest examples of how to add a WP shortcode I have seen. Keep up the good work and keep the WP tips coming.
Thanks.

Mike Cherney - 3 years ago

Pretty Kewl; I’m devving a 2.0 site for a co., and this might just help ‘em out!! Gotta get ‘em into the new millenium somehow!!!!!!!

Comments are closed