Shortcode Tutorial - Enclosed Shortcode with Parameters

Passing parameters to shortcodes is super easy to do. In the last tutorial we have seen about the concept of enclosed shortcode in wordpress. We will continue the same example but we pass some parameters into it.

Syntax to pass parameters to shortcode

[shortcode_name key1="values1" key2="value2" ...] Your Content [/shortcode_name]

Examples

[h2_text fontSize="20px" color="#d33a2c"] Hi, Web Tutor [/h2_text]

Here, fontSize and color are keys of shortcode whereas 20px and #d33a2c are values of those and Hi, Web Tutor is the content. We read these values with callback function of shortcode. You can define your own keys and values.

In case if you want to create shortcodes with optional parameters then you can also do it. We will use wordpress function shortcode_atts().

Here, is the complete code of plugin.

<?php

/*
Plugin Name:  Simple Basic Shortcode
Description: It will display message into h2 tag
Author: Online Web Tutor
Author URI: https://onlinewebtutorblog.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: basic-shortcode
Version: 1.0
*/

function owt_basic_shortcode_text_heading($attributes, $content)
{
    $args = shortcode_atts(array(
        // default values
        'fontsize' => '16px', // Default Font Size
        'color' => 'red' // Default Color

    ), $attributes);

    $heading = "<h2 style='font-size:" . $args['fontsize'] . ";color:" . $args['color'] . ";'>" . $content . "</h2>";

    return $heading;
}

add_shortcode('h2_text', 'owt_basic_shortcode_text_heading');

In your post/page you can use this shortcode.

[h2_text fontsize="40px" color="#d33a2c"] Hi, Web Tutor [/h2_text]

[h2_text fontsize="35px" color="#d99a2c"] Hi, Online Web Tutor [/h2_text]

Generated HTML

Output

Successfully, we have now created enclosed shortcode with parameters in wordpress.

Next Topic >> About do_shortcode() Function