0

TLDR; How can I run a shortcode with multiple shortcodes inside of it?

I'm trying to run a shortcode with multiple shortcodes inside of it.

I can successfully run a shortcode with one shortcode inside of it with the following code in the theme:

add_shortcode('outside_shortcode', function($attr, $content = null) { return ' <section class="example_section"> <div class="container"> <div class="row"> ' . do_shortcode($content) . ' </div> </div> </section> '; }); add_shortcode('inside_shortcode', function($atts, $content = null) { $atts = shortcode_atts( array( 'link' => 'https://link.com', 'image' => 'nameofimage', ), $atts); return ' <div class="col-6"> <a href="#!"> <div class="example"> <span class="helper"></span> <img src="/wp-content/themes/mytheme/assets/images' . $atts['image'] . '.png"> </div> </a> </div> '; });

and the following within the texteditor on Wordpress:

[outside_shortcode] [inside_shortcode link='https://mysite/section1' image='funimage'] [inside_shortcode link='https://mysite/section2' image='coolimage'] [/outside_shortcode]

However, I want to add a second div within the outside shortcode and add a second shortcode within that. My idea was something like:

add_shortcode('outside_shortcode', function($attr, $content = null) { return ' <section class="first_section"> <div class="container"> <div class="row"> ' . do_shortcode($content) . ' </div> </div> </section> <section class="second_section"> <div class="container"> <div class="row"> ' . do_shortcode($content) . ' </div> </div> </section> '; }); add_shortcode('first_inside_shortcode', function($atts, $content = null) { $atts = shortcode_atts( array( 'link' => 'https://link.com', 'image' => 'nameofimage', ), $atts); return ' <div class="col-6 iamfirst"> <a href="#!"> <div class="example"> <span class="helper"></span> <img src="/wp-content/themes/mytheme/assets/images' . $atts['image'] . '.png"> </div> </a> </div> '; }); add_shortcode('second_inside_shortcode', function($atts, $content = null) { $atts = shortcode_atts( array( 'link' => 'https://link.com', 'image' => 'nameofimage', ), $atts); return ' <div class="col-6 iamsecond"> <a href="#!"> <div class="example"> <span class="helper"></span> <img src="/wp-content/themes/mytheme/assets/images' . $atts['image'] . '.png"> </div> </a> </div> '; });

However, the problem is that the reader doesn't know how to distinguish between $content.

Any idea how to fix this problem?

I have also tried 

do_shortcode( ' [first_inside_shortcode] ' )

but, then I cannot have multiple sections within the code on the WordPress editor

For example, this does not work:

[outside_shortcode] [inside_shortcode link='https://mysite/section1' image='funimage'] [inside_shortcode link='https://mysite/section2' image='coolimage'] [/outside_shortcode]

Instead, it only reads the first one.

Thanks!

Improve this question
1
  • 1
    maybe you just need single shortcodes then and no nested and get your different classes otherwise? Commented Feb 25, 2019 at 15:21

2 Answers 2

Reset to default
0

You will need to work with $content inside your shortcodes PHP code. So you went already right.

There is info in the WP docs about nested Shortcodes

https://codex.wordpress.org/Shortcode_API#Nested_Shortcodes

i found this information useful too:

https://www.sitepoint.com/wordpress-nested-shortcodes/

Improve this answer
1
  • Any idea how exactly I can work with the $content? I have also tried to create a filter for each, but that hasn't worked. Commented Feb 25, 2019 at 15:25
0

I figured it out!

Thanks @André Kelling for your help!

So, I made three sections of code and put them inside of each other in the shortcodes within the WP editor.

Here is the PHP

 add_shortcode('main_section', function($attr, $content = null) { return ' <section class="main"> <div class="container"> ' . do_shortcode($content ) . ' </div> </section> '; }); add_shortcode('middle_section', function($atts, $content = null) { $atts = shortcode_atts( array( 'class' => 'all', ), $atts); return ' <div class="row middle example-' . $atts['class'] . '"> ' . do_shortcode($content ) . ' </div> '; }); add_shortcode('inside_section', function($atts, $content = null) { $atts = shortcode_atts( array( 'link' => 'https://example.com', 'image' => 'imagename', ), $atts); return ' <div class="col-6 col-md-4 col-lg-3 col-xl-2 mx-auto"> <a href="' . $atts['link'] . '"> <div class="image-cover"> <span class="helper"></span> <img src="/wp-content/themes/mysite/assets/images/main/logos/' . $atts['image'] . '.png"> </div> </a> </div> '; });

And here is how I did it within the editor:

[main_section] [middle_section class='all'] [inside_section link='https://example.com/section1' image='image1'] [inside_section link='https://example.com/section2' image='image2'] [/middle_section] [middle_section class='telco'] [inside_section link='https://example.com/section3' image='image3'] [inside_section link='https://example.com/section4' image='image4'] [/middle_section] [/main_section]
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.