• Resolved Mizunga

    (@mizunga)


    When I try to get nested columns it doesn’t work. Maybe I’m doing something wrong, I got the following structure:

    [container] [row] [column md=”6″]

    [row]
    [column md=”4″]
    HERE IS AN IMAGE
    [/column]
    [column md=”8″]
    HERE IS SOME TEXT
    [/column]
    [/row]

    [row]
    [column md=”4″]
    HERE IS AN IMAGE
    [/column]
    [column md=”8″]
    HERE IS SOME TEXT
    [/column]
    [/row]

    [/column] [/row] [/container]

    I’m following the bootstrap grid page: https://getbootstrap.com/examples/grid/

    <div class="row">
            <div class="col-md-8">
              .col-md-8
              <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
              </div>
            </div>
            <div class="col-md-4">.col-md-4</div>
          </div>

    https://www.ads-software.com/plugins/bootstrap-3-shortcodes/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author MWDelaney

    (@foolsrun)

    Hi,
    Unfortunately this is a limitation of WordPress: WordPress does not support nested shortcodes of the same name (see here: https://codex.www.ads-software.com/Shortcode_API#Nested_Shortcodes)

    Because this is a limitation of WordPress, and not of this plugin, we do not plan to support nested shortcodes of the same name.

    Thanks!

    Thread Starter Mizunga

    (@mizunga)

    Ok thanks, a solution would be to have column1, row1, column2 and row2 (for example) only to use as subelements.

    There are good reasons why shortcode nesting doesn’t work. But it does make the job harder when nesting. I managed with a little help from Google to use the below code, which will allow you to nest one column set.

    This is how nested shortcodes are suggested to work. Notice the row-b and column-b

    [row]
    [column sm="6"]
    
    start of col 1
    
    [row-b]
    [column-b sm="6"]
    
    sub col 1
    
    [/column-b]
    [column-b sm="6"]
    
    sub col 2
    
    [/column-b]
    [/row-b]
    
    end of col 1
    
    [/column]
    [column sm="6"]
    
    col 2
    
    [/column]
    [/row]

    Functions to add to your functions.php. Essentially it extracts the shortcode and re-wraps it.

    add_shortcode('column-b', 'col_cb');
    add_shortcode('row-b', 'row_cb');
    
    function col_cb( $atts, $content ) {
    	$attr = array();
    	foreach($atts as $key=>$att){
    		$attr[] = ' ' . $key . '="' . $att . '"';
    	}
    	$content = do_shortcode('[column' . implode('', $attr) . ']' . $content . '[/column]');
    	return $content;
    }
    
    function row_cb( $atts, $content ) {
    	$attr = array();
    	foreach($atts as $key=>$att){
    		$attr[] = $key . '="' . $att . '"';
    	}
    	$content = do_shortcode('[row' . implode('', $attr) . ']' . $content . '[/row]');
    	return $content;
    }

    You could nest deeper by just adding.

    add_shortcode('column-c', 'col_cb');
    add_shortcode('row-c', 'row_cb');
    add_shortcode('column-d', 'col_cb');
    add_shortcode('row-d', 'row_cb');

    Orginal post (This helped me)
    https://wordpress.stackexchange.com/questions/125328/how-to-parse-nested-shortcodes

    Once again thanks to the plugin maker, this is a great plugin I use in all my sites.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Nesting columns’ is closed to new replies.