Multiple do_shortcode($content) within one shortcode

Question

Multiple do_shortcode($content) within one shortcode

Brad Ahrens

2022年5月25日 10:06

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!

Topic shortcode php theme-development Wordpress

Category Web

Brad Ahrens · Accepted Answer · 2019年2月25日 15:38

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]

André Kelling · Accepted Answer · 2019年2月25日 15:19

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/

Multiple do_shortcode($content) within one shortcode

About