Adding shortcode functionality to WordPress plugin

Posted in Tutorials

In a previous tutorial, we showed you how the default Hello Dolly plugin works.  In this tutorial, we will learn how to add shortcode functionality to this WordPress plugin.

A shortcode is a code bounded by square brackets that you can add to a post or a page.  When rendered, WordPress will replace that code with generated output.

Here we see a placement of the [hellodolly] shortcode in a post …

But it won’t do anything yet, we have to add functionality to this shortcode so that the output would be some random Hello Dolly lyrics.  To add shortcode functionality to the Hello Dolly plugin you just have to add a few lines of code.

1. First open the hello.php file (by default, located in /wp-content/plugins/hello.php)

2. Before the last closing PHP tag ?> add the following code…

3. We registered the shortcode using “add_shortcode”.  The first parameter is the shortcode “hellodolly” that is the code to be placed in between square brackets.  The second parameter tells what function to execute when generating the output of the shortcode.  Here we tell it to execute the hellodolly_func function when it encounters the code [hellodolly].

4.  In our definition of the hellodolly_func function, it takes one parameter of $atts.  In this function, we return what we want to output to the post.  We call hello_dolly_get_lyric() which is already a defined function in the plugin that will return a random lyric.

5.  That’s it. Now we can check it by adding the shortcode [hellodolly] in a post or page and it will be shown in the front-end as a random lyric.  Make sure the Hello Dolly plugin is activated.  Here is the rendered shortcode output…

 Shortcode Parameters

Shortcode can take parameters.  That is what the $atts param in the hellodolly_func is for.

Suppose we want to be able to place the following shortcode with a “case” parameter of value “upper” in our post …

[hellodolly case=”upper”]

in order to make the rendered output be all upper case.

Just change our code to access the shortcode parameters from the $atts array.   To get the value of the parameter “case”, we do …

$atts[‘case’]

as in the following …

It is possible to have un-named parameters such as …

[hellodolly upper]

It can be retrieved by …

$atts[0]

Shortcode with Default Parameters

You can provide default values for the parameters by using shortcode_atts …

The $atts array is merged with the default array provided.

WordPress Shortcode with Content

A shortcode can by content such as …

[hellodolly]Quote:[/hellodolly]

You can pick up this content from the plugin code by …

If the user did not provide a content in the shortcode, the $content variable will be empty string which can be detected by …

if ( empty($content) )

There is more in that you can have shortcode within shortcode.  But that is an advanced topic in which you can read more about in sitepoint article.

 

---