How to Create Nested Shrotcodes in WordPress

Are you interested to learn about how to create nested shortcode or how to use shortcode inside shortcode in WordPress, Then this article is for you.

The aim of writing this article is not just giving 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 it will display the contact email as output.

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 If, 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.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top