How to Create Nested Shortcodes in WordPress

WordPress Development

The aim of writing this article is not just to give you the snippets for creating the nested shortcode, but also to make you understand how it actually works.

So you can easily create nested shortcodes or can use your own custom shortcode inside the shortcode. Let’s dive into this Step by Step:

Step 1: Create Parent Shortcode Function

In the first step, I am creating an enclosed shortcode, that will accept the value as a parameter and will display the contact email as output.

I have written an article about creating different types of shortcodes, where I have outlined the enclosed shortcodes with example.

Copy the below code in your theme’s functions.php file and save it.

function diwp_display_contact_info($attr, $content){
	
        $output = '<h2>Dive in WP</h2>';
	
        $output = $output.'<p>Our Email:- '.$content.'</p>';
	
	return $output; 
}
add_shortcode('contact-info', 'diwp_display_contact_info');

Now use this shortcode to display the output.

[contact-info]...Your Content...[/contact-info]

So, I use this shortcode with the email address as content,

[contact-info]contact@diveinwp.com[/contact-info]

then it will display the output with the email address like in the below image.

create-nested-shortcode-inside-shortcode-wordpress-1

So this is your first shortcode or can say this will be parent shortcode. Now let’s create another shortcode, that will act as child shortcode.

Step 2: Create Child Shortcode Function

In the second step, I am creating a self-closing shortcode, that will display “follow me on Twitter” link as output. Let’s check it out.

I have written an article about creating different types of shortcodes, where I have outlined the self-closed shortcodes with example.

Copy the below code in your theme’s functions.php file and save it.

function diwp_twitter_link(){

  $output = '<a href="https://twitter.com/myuser">Follow us on Twitter</a>';
    
  return $output;

}

add_shortcode('twitter_link', diwp_twitter_link);

Now use the below shortcode 

[twitter_link]

in your page or post and it will display you the output as in the below image.

create-nested-shortcode-inside-shortcode-wordpress-2

Use Shortcode Inside Shortcode (Nested Shortcode)

Now let’s say, You wanted to use this [twitter_link] shortcode inside your [contact-info]…[/contact-info] shortcode along with passing email as content.

Something like this:

[contact-info]contact@yourhost.com [twitter_link][/contact-info]

But this will not work, and it will give you the output like in the below image.
create-nested-shortcode-inside-shortcode-wordpress-3

That means, parent shortcode [contact-info]…[/contact-info] is working fine. It’s accepting the parameter’s value, and returning the output.

But unfortunately, it’s not rendering [twitter_link] shortcode in it that I passed as value. So to overcome this situation, All you need to do is just make a small tweak in your parent shortcode function and that is do_shortcode();.

So In your parent shortcode function, instead of $content, use do_shortcode($content);. Let’s just changed this line 

$output = $output.'<p>Our Email:- '.$content.'</p>';

To this line

$output = $output.'<p>Our Email:- '. do_shortcode($content) .'</p>';

Now use this shortcode to display the output

[contact-info]contact@yourhost.com [twitter_link][/contact-info]

And You will see the output like in the below image.
create-nested-shortcode-inside-shortcode-wordpress-4

In the above image, you can see both shortcodes are working and giving output.

The Keypoint is, just render your parent shortcode’s output with do_shortcode(); and then you can use any shortcode in it as nested or child shortcode.

I hope this article helped you to understand, how to create nested shortcode or use shortcode inside shortcode in WordPress.

Bhuvnesh Shrivastava
Owner of diveinwp.com, solely responsible for creating helpful, informative content about WordPress, a fulltime WordPress developer with 8+ years of hands-on experience in WordPress design and development.

Related Articles