Site icon Hip-Hop Website Design and Development

Multiple do_shortcode($content) within one shortcode

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!