Wordpress - Nested shortcodes rendering - wordpress

Question

first of all I know which my problem is not at all related to the sage project but I know that your advanced wordpress knowledge can help me to get through that.
p.s. I've been creating my shortcodes upon sage scaffolding.
I built two shortcodes for nested using:
[outdoor]
[outdoor_item title="My title 1" color="orange"]<strong>The</strong> 1st Content[/outdoor]
[outdoor_item title="My title 2" color="blue"]<strong>The</strong> 2nd Content[/outdoor]
[outdoor_item title="My title 3" color="green"]<strong>The</strong> 3rd Content[/outdoor]
[outdoor_item title="My title 4" color="red"]<strong>The</strong> 4th Content[/outdoor]
[/outdoor]
After lots of hours searching something in stackoverflow and google I figured it out that I had to apply do_shortcode() in my RAW outdoor shortcontent content... something like this:
add_shortcode('outdoor', function($atts, $content, $tag) {
return '<div class="outdoor">' . do_shortcode($content) . '</div>';
});
and then my problem comes out... the function do_shortcode() renders ONLY my first outdoor_item and ignores every outdoor_item else. It outputs something like this:
<div class="outdoor">
<div class="outdoor-item" style="background-color: orange">
<h1>My title 1</h1>
<div class="outdoor-item-content">
<strong>The</strong> 1st Content
</div>
</div>
</div>
p.s. I've tried do_shortcode(), apply_filters('the_content', $content) and even call wp_reset_postdata() after each outdoor_item. What else could I try?

Answer 1

Recently I had similar issue.
I needed to wrap elements into the bootstrap table so the shortcode should be the following:
[table]
[fb_review href="" name="" date=""][/fb_review]
[fb_review href="" name="" date=""][/fb_review]
[fb_review href="" name="" date=""][/fb_review]
[fb_review href="" name="" date=""][/fb_review]
[fb_review href="" name="" date=""][/fb_review]
[/table]
and this should produce the following html:
<div class="row">
<div class="col-md-6"><div class="fb-review">Some content</div></div>
<div class="col-md-6"><div class="fb-review">Some content</div></div>
</div>
<div class="row">
<div class="col-md-6"><div class="fb-review">Some content</div></div>
<div class="col-md-6"><div class="fb-review">Some content</div></div>
</div>
<div class="row">
<div class="col-md-6"><div class="fb-review">Some content</div></div>
</div>
I looked for different ways how to handle this but then decided to parse the $content string by myself
here is the part of functions.php:
//this function just wraps the compiled nested shortcode elements
function responsive_table($attrs, $items = []) {
if (count($items) > 0) {
$result = '';
$counter = 0;
foreach ($items as $item) {
if (!($counter % 2)) {
$result .= '<div class="row">';
}
$result .= '<div class="col-md-6">' . $item . '</div>';
if ($counter % 2) {
$result .= '</div>';
}
$counter++;
}
if ($counter % 2) {
$result .= '</div>';
}
return $result;
} else {
return '';
}
}
// this function parses the content, fetches internal shortcodes, compiles them and passes to responsive_table
function responsive_table_for($attrs, $content=null) {
if ($content != null && $content != '') {
$content_matches = [];
preg_match_all('/\[.+?\[.+?\]/', $content, $content_matches); // TODO: this doesn't support nested shortcodes
$content_array = [];
foreach ($content_matches[0] as $item) {
$content_array[] = do_shortcode($item);
}
return responsive_table($attrs, $content_array);
} else {
return '';
}
}
add_shortcode('table', 'responsive_table_for');
Maybe this way is not the best but it works for me.