Shortcodes are a very powerful feature in WordPress that allows you to replace some text with something else when the page is displayed. Since the processing for the shortcode happens in the background at runtime, the result can be different. Perhaps you want to pull a value from a database. In this step by step tutorial with screenshots, I'll show you how to add a shortcode, and how we can make it progressively more useful.

Step 1: Adding a Basic Shortcode to WordPress

To start with, you'll need to know how to add code to your WordPress installation either through functions.php, or via a custom plugin. I suggest the latter, and show you how to do this in an earlier tutorial. Once you know how to add code like this, copy and paste the following into either functions.php or your custom location:

function basic_function( $atts, $content = null) {
    return 'Hello World';

}
add_shortcode( 'sample_shortcode', 'basic_function' );

Save your changes. Now open up a new test post and type the following:

[sample_shortcode]

Like this:



In the text editor, it shows up as a shortcode. But if you now preview the post, you will see this:



We've replaced [sample_shortcode] with "Hello World". The function "add_shortcode" accepts the name of our custom shortcode, and the name of the function that handles it. In this case, the function name is "basic_function" and it just returns "Hello World".

This is an example of a self-closing shortcode. It has just one section. But shortcodes can have beginnings and endings.

Step 2: Creating Enclosing Shortcodes

Sometimes you want the shortcode to process a bit of text. In that case, we can enclose the text in the shortcode like this:

[sample_shortcode]This is the content[/sample_shortcode]

Note how we've included a closing shortcode tag with [/sample_shortcode]. When sent to the function, the text will be stored in the $content variable. For example, this code:

function basic_function( $atts, $content = null) {
    return $content;

}
add_shortcode( 'sample_shortcode', 'basic_function' );

Will just print whatever's inside the shortcode. Like this:



Again, not much use to us. But we can manipulate the text before printing it. Which brings us to attributes.

Step 3: Using Attributes with Shortcodes

Attributes in shortcodes allow the writer to include some customizations. For example, I'm going to include two attributes with our shortcode:

"bold" - if 'yes, we want the text to be bold

"italics" - if 'yes', the text will be italicized as well

So for example, here is the shortcode I'll use in the text editor with the two parameters:

[sample_shortcode bold='yes' italics='yes']This is the content[/sample_shortcode]

I've used two attributes and given them both the value of "yes". Here is the code:

function basic_function( $atts, $content = null) {
    if ($atts['bold'] == 'yes')
        $content = '<strong>'.$content.'</strong>';
    if ($atts['italics'] == 'yes')
        $content = '<em>'.$content.'</em>';

return $content;

}

Attributes are accessible using the $atts array. So the values of "bold" and "italics" can be accessed via:

$atts['italics']

$atts['bold']

Here we just check if either of these is "yes", and if so, we just add the HTML and return the value of $content. The output of the shortcode:



As you can see, the text is both bold and italicized. Within the shortcode, we can use any kind of PHP we want. So if we want to pull data from a table, we can specify the keys in the attributes and use them for the database query. There's really no limit to the uses we can find.

Shortcodes in WordPress make it unique. We can create websites that would otherwise be impossible with traditional CMS platforms. It's just another reason why WordPress powers so much of the web!

Updated on: 10/10/2024