How to handle multiple nested shortcodes with different tags?

Question

Hi I'm fairly new to Shortcode programming and was wondering if it is possible to process the following nested shortcode with different shortcode tags:

[review]

    [title]Sample Review[/title]
    [image]http://localhost/wordpress/wp-content/uploads/2016/04/picture.jpg[/image]
    [criteria title="Criteria 1" score="100"]
    [criteria title="Criteria 2" score="90"]
    [criteria title="Criteria 3" score="80"]

[/review]

To produce this intended html block:

<section id="review">
    <div class="review-top">
        <h2>Sample Review</h2> <!--Content of [title][/title]-->
    </div>
    <div class="review-left">
        <img src="http://localhost/wordpress/wp-content/uploads/2016/04/picture.jpg"> <!--Content of [image][/image]-->
    </div>
    <div class="review-criteria">
        <h3>Criteria 1 - 100</h3> <!--Attribute of [criteria]-->
    </div>
    <div class="review-criteria">
        <h3>Criteria 2 - 90</h3> <!--Attribute of [criteria]-->
    </div>
    <div class="review-criteria">
        <h3>Criteria 3 - 80</h3> <!--Attribute of [criteria]-->
    </div>
    <div class="review-summary">
        <h2>90</h2> <!--Average of Criteria 1-3's score-->
    </div>
</section> 

I understand I have to use recursively use do_shortcodes($content) but doing so will call all the shortcodes from $contents and will produce the following:

<section id="review">
    <div class="review-top">
        <h2>Sample Review</h2> <!--Content of [title][/title]-->
        <img src="http://localhost/wordpress/wp-content/uploads/2016/04/picture.jpg"> <!--Content of [image][/image]-->
        <div class="review-criteria">
            <h3>Criteria 1 - 100</h3> <!--Attribute of [criteria]-->
        </div>
        <div class="review-criteria">
            <h3>Criteria 2 - 90</h3> <!--Attribute of [criteria]-->
        </div>
        <div class="review-criteria">
            <h3>Criteria 3 - 80</h3> <!--Attribute of [criteria]-->
        </div>
    </div>
    ...
</section> 

Shortcodes is the following:

function makeTitle( $atts, $content = null ) {
    return '<h2>'.$content. '</h2> <!--Content of [title][/title]-->';
} 
add_shortcode('title', 'makeTitle'); 

function makeImage( $atts, $content = null ) {
    return '<img src="'.$content.'"> <!--Content of [image][/image]-->';
} 
add_shortcode('image', 'makeImage');

function makeCriteria( $atts, $content = null ) {
    extract(shortcode_atts(
    array(
        'title' => 'Criteria',
        'score' => '0',
    ), $atts ));
    return '<div class="review-criteria">
    <h3>'.$title. ' - ' .$score. '</h3> <!--Attribute of [criteria]-->
</div>';
} 
add_shortcode('criteria', 'makeCriteria');  

function makeReview( $atts , $content = null ) {
    return '<section id="review"><div class="review-top">'.do_shortcode($content).'</div></section>';
    ...
}
add_shortcode('review', 'makeReview');

What I wanted to happen is on the first do_shortcode($content) it should only do_shortcode for [title][/title]. Thank you very much!

Answer 1

I would call your use of shortcode nesting as a bad idea, therefor what you really need is a rethinking of your strategy.

It is not bad by itself to nest shortcodes, but shortcodes should be independent entities and in your structure the inner ones will obviously depend on being "inner" and will not have any use by themselves. One wrong copy and paste, one character added in the wrong place and your whole structure fails without the user having any tools to debug it.

If your core content is a review, then just add a meta box in which it can be filled with all the relevant data and just use a [review] shortcode to display it.

Answer 2

For nested shortcode, you must do_shortcode for your $content.

function makeTitle( $atts, $content ) {
    ob_start(); ?>
    <h2>
        <?php echo do_shortcode( $content ); ?>
    </h2>
    <?php
    return ob_get_clean();
}