Nesting columns

Resolved Mizunga
(@mizunga)

10 years, 6 months ago
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://wordpress.org/plugins/bootstrap-3-shortcodes/

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author MWDelaney
(@foolsrun)

10 years ago

Hi,
Unfortunately this is a limitation of WordPress: WordPress does not support nested shortcodes of the same name (see here: http://codex.wordpress.org/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)

10 years ago

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

10 years ago
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)
http://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.

Tags