An Ultimate Guide to Use WordPress Shortcodes

An Ultimate Guide to Use WordPress Shortcodes

Shortcodes were introduced in WordPress 2.5v, and they have been widely used to increase the functionality of WordPress. In most cases, those shortcodes come bundled with plugins and themes, which vary greatly depending on what you’ve instructed WordPress to do. In this guide, we’ll show how to create and use simple shortcodes to enhance blogging experience.

For those of you getting accustomed to using WYSIWYG and may feel a little bit confused about shortcode usage, we’ll give a detailed explanation of WordPress shortcodes as follows.

What Is WordPress Shortcode?

A shortcode is a code phrase or word that is usually enclosed in square brackets like [simpleshortcode]. It can be a perfect replacement for complicated and ugly code (like a code snippet full of div tags), which allows you to do nifty things without requiring programming skills. Most importantly, its output can be further customized by parameters.

What Is WordPress Shortcode

For instance, instead of inserting a series of video or audio files in a post, you can use the shortcode . In some cases when you want to display videos in dark style, just use this shortcode. To specify the IDs of video files out of the media library, simply put it like . More examples of shortcodes are included in this WordPress codex page.

How to Create a Simple Shortcode in WordPress?

It’s pretty easy to create a WordPress shortcode, and this doesn’t require any advanced technical knowledge. For the purpose of this tutorial, we’d like to create the “Hello, World” message. Below is a quick checklist of what you should do.

  1. Log onto the WordPress dashboard and open your functions.php file by going to “Appearance” > “Editor”. If this file doesn’t exist, create it via the control panel.
  2. Enter Functions File

  3. To add a string to return your “Hello World” string, just copy and paste the below code to the functions.php file.
  4. function hello() {
        return 'Hello, World!';
    }
    
  5. Now that you’ve created a function, it’s time to turn it into a shortcode. To do so, just embed the following code to the end of our hello() function. Note that, the first parameter is the name of shortcode and the second one is the function to be performed.
  6. add_shortcode('wh', 'hello');
    
  7. Now, this shortcode has been created successfully, and you can apply it into any posts/pages by switching to HTML mode and typing this shortcode [wh].Below is an example of how your “Hello, World” message will be look like.
  8. Example Hello World

Top Tips to Use Shortcodes in WordPress

As shown, shortcodes make it much easier to insert elements into WordPress posts/pages. For instance, you can add infinite scroll experience within both supported and unsupported themes via handy shortcodes. In the following, we will share top tips to use them in WordPress.

  1. Use shortcodes properly. Although a shortcode is easy to create, it’s not a good idea to use it in every post. If you’re using the shortcodes to add the same elements like banner and signature within every theme, then you will need to hire a developer or use a plugin to do this code work.
  2. Enable shortcodes in widgets. Shortcodes are not limited to posts/pages, and you can use them inside WordPress “Text Widget”. Just drag and drop this “Text” widget to the right sidebar and then add a shortcode inside it. Remember to add the following code to your functions.php file.
  3. add_filter('widget_text', 'do_shortcode');
    

    Add Shortcodes in Widget

  4. Hide a broken shortcode. Many WordPress users alter their themes without changing the old shortcodes accordingly. The result is that their readers will encounter odd text when viewing an old post/page. To fix it, you can manually remove all shortcodes from every post, or better yet add this configuration code to the same functons.php file.
  5. add_shortcode( 'shortcodetag', '__return_false' );
    
  6. Add shortcodes to theme files. To output shortcodes inside theme files, simply use this:
  7. <php echo do_shortcode("[your_example_shortcode]");
    

WordPress Shortcode Plugins that You Can’t Miss

With the use of WordPress plugins, you can add shortcode functionality to a site with very little effort. In consideration of convenience and simplicity, we’ve selected out the best shortcode plugins that help you style posts and pages.

WordPress Shortcodes
WordPress Shortcodes allows you to add an amazing set of elements to your WordPress site. For instance, it includes functionality for layout management, user interface creation, buttons, smart links and message boxes, etc. This popular plugin has over 100,000 downloads in the plugin repository.

Download URL: https://wordpress.org/plugins/synved-shortcodes/

WordPress Shortcodes

Easy Bootstrap Shortcode
By using Easy Bootstrap Shortcode, you can easily add bootstrap styles to a WordPress site. As for features, this robust plugin gives you the ability to add editor icons, use js file from CDN, specify column settings and customize grid size on extra-small, small and medium-sized screens.

Download URL: https://wordpress.org/plugins/easy-bootstrap-shortcodes/

Easy Bootstrap Shortcode

Shortcodes Ultimate
As the most popular shortcode plugin, Shortcode Ultimate has been downloaded around 780,000 times from the plugin repository. This plugin lets you easily create boxes, sliders, buttons, tabs and responsive videos with an abundance of premium features included.

Download URL: https://wordpress.org/plugins/shortcodes-ultimate/

Shortcode Ultimate

Shortcodes Pro
Instead of offering ready-to-use shortcodes, the Shortcode Pro plugin supports a quick creation of WordPress shortcodes directly from your administrator panel. In the further, it is built with WordPress API and can be translated into French and Spanish.

Download URL: https://wordpress.org/plugins/shortcodes-pro/

Shortcode Pro