May 27, 2015 7:25 am

How to create a Shortcode for your WordPress Theme

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.

How to create a Shortcode for your WordPress Theme

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.

How to create a Shortcode post Edit

Here is the result:

How to create a Shortcode Post View

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.

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories:

One response to “How to create a Shortcode for your WordPress Theme”

  1. Husni's Elemento says:

    awesome tutorial..
    thanks so much.
    I’ll try it.

Leave a Reply

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