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!

  • 1
    maybe you just need single shortcodes then and no nested and get your different classes otherwise? – André Kelling Feb 25 at 15:21
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/

  • 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. – AlmostPitt Feb 25 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]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.