Using WordPress ShortCodes to Insert Dynamic Content in Your Posts

Posted on

While most WordPress posts consist of plain text and images, it’s possible to include quite a bit of your own programming functionality as well. Using a feature known as WordPress shortcodes, you can insert placeholders that perform specific functions ranging from something as simple as inserting HTML, to as complex as creating a gallery, or a poll. All this with just a single line of code.

Let’s say you want to create a shortcode for inserting a bit of HTML. As an example, we’ll use:

<h2>Hello World</h2>

Whenever we want to insert this, we simply write [insert_stuff] in the post. This is of course an extremely basic example, but it’ll help illustrate the important aspects.

Self-Closing Shortcodes

Open your functions.php file and add these lines of code to the end:

function insert_stuff_func($atts) {
   return '<h2>Hello World</h2>';


Straightaway we see how easy it is to accomplish what we want. The “add_shortcode” line at the end tells WordPress to call the “insert_stuff_func” function whenever it sees the short code [insert_stuff]. And whatever is returned to this function will simply replace the shortcode when the post is displayed. In this case, it is a simple static piece of HTML.

With Parameters

Now that we see how easy it is to replace the shortcode with text or HTML, let’s add parameters. Say that instead of “Hello World”, we want to vary the text enclosed within the h2 tag from post to post. In order to specify what we want to enclose, we use the following variation:

[insert_stuff title="whatever content"]

Which will give the desired output:

<h2>whatever content<h2>

In other words, we just passed a variable called “title” to our shortcode. So how do we go about inserting this title within h2 tags? Modify the code at the end of your functions.php to this:

function insert_stuff_func( $atts ) {
extract( shortcode_atts( array(
'title' => 'Hello World',
), $atts ) );

  return "<h2>" . $title . "</h2>";
add_shortcode( 'insert_stuff', 'insert_stuff_func' );

We’ve added a new function called “shortcode_atts”. This takes two parameters – an array of attributes with their defaults, and the attributes passed to the function. In this case, if we simply write [insert_stuff] without the “title” attribute, the default will be “Hello World”. If instead we choose to pass a specific title like say [insert_stuff title=”First Post”], the $title variable will hold “First Post” instead. This is because we are using the function “extract” on the output. As you can see, the return value simply encloses $title within h2 tags.

Enclosing Shortcodes

This might strike you as being a bit clumsy. While it gets the job done, it’s not convenient to pass the content to be enclosed as a variable. What you would truly like is to write something like this instead:

[insert_stuff]This is what I want enclosed[/insert_stuff]

Much better isn’t it? We want the output for this to be:

<h2>This is what I want enclosed</h2>

Of course if you’re going to all this trouble, you might as well write the latter in the first place! But this is just an example. You can perform whatever manipulations you want in a real shortcode implementation.

This is an example of an enclosing shortcode. We wrap content inside it. This is automatically passed to the shortcode function and is immediately available for manipulation. In this case, it becomes trivial to return it enclosed in h2 tags. Here’s what the code will look like:

function insert_stuff_func( $atts, $content = 'Hello World') {
return '<h2>' . $content . '</h2>';
add_shortcode( 'insert_stuff', 'insert_stuff_func' );

This is simplicity itself. The “insert_stuff_func” now has an additional parameter called $content that defaults to “Hello World” if nothing is enclosed. Otherwise it takes on whatever is within the shortcode tags. In this example we simply wrap it in an h2 tag and send it back.

So we’ve looked at two types of shortcodes. Self-closing and enclosing. The functionality that you can put into a shortcode is limited only by the capabilities of PHP. It is an extremely powerful tool that you can use to create dynamic content within your posts.

External Resources:

3 Comments on “Using WordPress ShortCodes to Insert Dynamic Content in Your Posts”!

Leave a Reply

Your email address will not be published. Required fields are marked *