December 04, 2021

Create Shortcodes in WordPress (Basic Example)

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. Learn 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. We can add a WordPress shortcode, when we need to add a functionality where a non-technical user has to place something in content of page or post. Shortcodes can also be used when reusable functionality is needed. This post explains in simple way to create WordPress shortcodes without any plugin.

 

What is a WordPress Shortcode

It is a placeholder enclosed inside brackets [] which tells the WordPress to render the content of shortcode it is created or added for. WordPress uses add_shortcode() function to register a handler function that returns the content of shortcode when a post or page is rendered.

 

Built-in Shortcodes in WordPress

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 in WordPress (Basic Example)

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 WP 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 define 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): bool|string
{
    $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();
}

The shortcode we created, 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]');

We learnt in this post a simple way to create WP shortcode with attribute and parameters. This  shortcode can be now used in content of posts, pages, custom post types, widgets and even custom page templates. When this shortcode is used, it will output a styled alert box with given message.

Home