Shortcodes are a very useful and popular feature in WordPress sites. They allow users to invoke certain functionality directly from a post, page or a widgetized area. Shortcodes are popular in plugins as well. Core WordPress already comes equipped with several shortcodes that you can use without any custom plugins or coding and you can see all Core WordPress Shortcodes if you are into that.

Shortcode In Action

Below is an image of how we add the shortcode three times. The first it counts the characters with the default message we have given, the second time we add it we count the words and use a different message for the count -There are X words in here and the third time – [count] – we rely on all default values.

Here is the result:

Sample shortcode functionality

We will build a custom shortcode that we will integrate into a particular theme so that we will be able to use the shortcode whenever that theme is active. Usually, this is the preferred method of adding functionality when it comes to display logic and it is good to create a child theme and modify the child theme instead of the parent theme. We will make a shortcode that shows the number of characters or words in the post or page that we are currently viewing.

We will add the shortcode to the theme’s functions.php file, located at /wp-content/themes/#{themeName}/functions.php and our shortcode will be available whenever that theme is active.

To add a new shortcode, we add:

add_shortcode('count', 'phpgang_getCount');

This tells WordPress to add a shortcode named count and run the phpgang_getCount function whenever a shortcode with that name is found.

Then, we define our phpgang_getCount function:

function phpgang_getCount($atts) {
    global $post;
    $content = trim(preg_replace("/\[.+\]/", "", strip_tags($post->post_content)));

    $atts = shortcode_atts(
        array(
            'type' => 'words',
            'text' => "This post contains #{c} " . ($atts ? esc_html($atts['type']) : "words" )

        ),$atts, 'count'
    );

We use the global variable $post because we want to be able to access the content of the post which triggered our function.

Then we extract the content of the post with $post->post_content and remove all HTML tags, shortcodes and trailing/leading white space from it.

Afterwards, we set some default values for our attributes (the array in the first argument). Notice that we are using a placeholder for the character/word count number – #{c} – later we will replace this placeholder with the character/word count digits. We set a default text and set the default count type to be words (it would count the total words in the post)

After the placeholder, we escape with the WP function esc_html and add to the template the type argument, if it exists, or otherwise add the string word to its end.

The second argument to shortcode_atts are the attributes as passed from the post and the third is the shortcode’s name.

if ($atts['type'] == 'characters') {

        return "<span class='count'>" .   preg_replace("/(\\#\\{c\\})/",
            "<span class='count-digit'>". number_format(strlen($content)) . "</span>", esc_html($atts['text'])) . "</span>";
    }

Then, if the type argument to our shortcode is characters, we return the template with the placeholder replaced to the characters in the post with added classes both for the entire template and the digit itself.

else {
        $contentSingleSpace = preg_replace("/[\s]+/", " ", $content);
        $words = substr_count($contentSingleSpace, " ");
        return "<span class='count'>" .  preg_replace("/\\#\\{c\\}/",
            "<span class='count-digit'>" . number_format($words) . "</span>", esc_html($atts['text'])) . "</span>";
    }

If the type is anything else than characters, it must be words. So, we use a simple method of counting the words – replacing all spaces with a single space and counting the spaces. Then, we return the processed template.

Finally, we hard code some styles directly in our theme’s styles (/wp-content/themes/#{themeName}/style.css)

.count:first-letter {
    font-size: 1.2em;
    font-family: cursive;
}

.count {
    color: #005fb3;
}
.count-digit {
    font-weight: 900;
    font-size: 1.2em;
    color: #0044cc;
}

We make the first letter bigger and using a cursive font, we change count to have a blue color and we make the digit with the actual count bigger, bolder and darker.

Conclusion

Now you know the basics of creating shortcodes. Go ahead and play around with your own shortcode and await the next part of the series.