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

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) {
"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) {
"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) {
"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


Comments are closed