December 04, 2021

Create Shortcodes in WordPress (Basic Example)

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

Create Shortcodes in WordPress

WordPress shortcodes are a 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 the content of a page or post. Shortcodes can also be used when reusable functionality is needed. This post explains in a simple way how to create WordPress shortcodes without any plugin.

 

What is a WordPress Shortcode

It is a placeholder enclosed inside brackets [] which tells WordPress to render the content of the shortcode it is created or added for. WordPress uses the add_shortcode() function to register a handler function that returns the content of the 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 most used WP shortcodes are:

  • [gallery]: To display an 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 a 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 the 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 below:

add_shortcode('shortcode_name', 'shortcode_function_to_execute');

The first parameter is the name of the shortcode, and the 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 the shortcode.
  2. $content (string): Second parameter is the content of the shortcode, like URL to embed video or text content etc.

We will create a WP shortcode for a bootstrap an alert box with alert message as a parameter for the 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 the user has to define for the shortcode.
  3. $shortcode (string | optional): The name of the shortcode for which attributes are defined.

Steps involved to create a custom shortcode in WordPress are:

  • Add a hook add_shortcode with the name of the shortcode and the function to be called.
  • Create the function for the shortcode.
  • Define attributes of the 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 the ob_start() function and add HTML of an alert box with the content parameter used as the alert message.
  • Finally, return the content of the shortcode with the 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 the 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 a WP shortcode with attributes and parameters. This shortcode can now be used in the 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 the given message.

Home