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!