December 04, 2021

Create Shortcodes in WordPress

A WordPress shortcode is piece of code wrapped inside brackets which is used to add custom functionality and feature to content of website post or page. Understand how to create custom shortcodes in WordPress without a plugin.

Create Shortcodes in WordPress

WordPress shortcodes are great way to add dynamic content to posts and pages without writing complex code. It is a placeholder enclosed inside brackets [] which tells the WordPress to render the content of shortcode it is created or added for. This post explains in simple way to create and add WordPress shortcodes without any plugin.

 

WordPress Shortcode Example

WordPress comes with some built-in shortcodes providing some commonly used functionality. Some of the mostly used WP shortcodes are:

  • [gallery] : To display image gallery.
  • [audio] : To add an audio player where it is used.
  • [video] : To add a video player where the shortcode is used.
  • [embed] : To add an embed frame like youtube or dailymotion video embed.

How to Create a Custom Shortcode

Custom shortcodes are created by adding a piece of code and utilizing the add_shortcode function of WordPress. This code block is usually added in functions.php of active theme. We are going to demonstrate how to create a custom WordPress shortcode without using any plugin. The WordPress function to add shortcode is as bellow:

add_shortcode('shortcode_name', 'shortcode_function_to_execute');

The first parameter is the name of shortcode and second parameter is the function that will be executed to add shortcode functionality. The function that will be executed for shortcode functionality accepts two parameters. 

  1. $attributes (array): An array of attributes that are to be used in shortcode.
  2. $content (string): Second parameter is the content of shortcode like URL to embed video or text content etc.

We will create a shortcode for bootstrap alert box with alert message as parameter for shortcode content. The attributes for short can be defined using the function shortcode_atts which accepts three parameters.

  1. $pairs (array | required): The complete list of attributes with default values.
  2. $attributes (array | required): The attributes user has to defined for shortcode.
  3. $shortcode (string | optional): The name of shortcode for which attributes are defined. 

Steps involved to create a custom shortcode in WordPress are:

  • Add a hook add_shortcode with name of shortcode and function to be called.
  • Create the function for shortcode.
  • Define attributes of shortcode that are going to be used. In our case we are using a class attribute for alert box class i.e. alert-success, alert-danger etc which are bootstrap classes.
  • Start an output buffer with ob_start() function and add HTML of alert box with content parameter used as alert message.
  • Finally return the content of shortcode with ob_get_clean() function.
// Add shortcode with function to execute
add_shortcode('bootstrap_alert', 'bootstrap_alert_shortcode');
function bootstrap_alert_shortcode($attributes, $content = null) {
    $attributes = shortcode_atts([
            'class' => 'success'
        ], $attributes, 'bootstrap_alert');

    ob_start();?>

    <div class="alert alert-<?=$attributes['class'];?>">
        <?=do_shortcode($content);?>
    </div>

    <?php
    return ob_get_clean();
}

This shortcode can be used like in snippet below:

// To use in pages, posts and widgets content
[bootstrap_alert class='danger']This is an example shortcode for bootstrap alert box.[/bootstrap_alert]

// To use in template code
echo do_shortcode('[bootstrap_alert class="danger"]This is an example shortcode for bootstrap alert box.[/bootstrap_alert]');

You learnt in this post a simple way to create WP shortcode with attribute and content parameter. You can use shortcodes in content of posts, pages, custom post types, widgets and even custom page templates.

Home