For the most part, I try to keep layout code outside of the content editing experience, but there are many circumstances where it can be useful to make Bootstrap’s grid accessible to the WordPress rich text editor. If you’ve ever wanted to leverage the power of the Bootstrap Grid in your WordPress posts or pages, this tutorial will show you how.

If you’re already using Bootstrap CSS in your theme, the easiest way to do this is with a handful of simple shortcodes:

  • A [row] shortcode. Our Bootstrap grid columns will be contained within this tag.
  • A set of grid column shortcodes representing different grid column configurations:
    • [col-one-sixth]
    • [col-one-quarter]
    • [col-one-third]
    • [col-one-half]
    • [col-two-thirds]
    • [col-three-quarters]
    • [col-five-sixths]
    • [col-full]

The Code

Add the following code to your theme’s functions.php file:

// Adds a [row]] shortcode 
function wptb_row($atts, $content = null){	
	return '<div class="row">'.do_shortcode($content).'</div>';
}
add_shortcode( 'row', 'wptb_row' );

// Adds a [[col-one-sixth]] shortcode 
function wptb_col_one_sixth( $atts, $content = null ){
	return '<div class="col-sm-2">'.do_shortcode($content).'</div>';	
}
add_shortcode( 'col-one-sixth', 'wptb_col_one_sixth' );

// Adds a [[col-one-quarter]] shortcode 
function wptb_col_one_quarter( $atts, $content = null ){
	return '<div class="col-sm-3">'.do_shortcode($content).'</div>';	
}
add_shortcode( 'col-one-quarter', 'wptb_col_one_quarter' );

// Adds a [[col-one-third]] shortcode 
function wptb_col_one_third( $atts, $content = null ){
	return '<div class="col-sm-4">'.do_shortcode($content).'</div>';	
}
add_shortcode( 'col-one-third', 'wptb_col_one_third' );

// Adds a [[col-one-half]] shortcode 
function wptb_col_one_half( $atts, $content = null ){
	return '<div class="col-sm-6">'.do_shortcode($content).'</div>';	
}
add_shortcode( 'col-one-half', 'wptb_col_one_half' );

// Adds a [[col-two-thirds]] shortcode 
function wptb_col_two_thirds( $atts, $content = null ){
	return '<div class="col-sm-8">'.do_shortcode($content).'</div>';	
}
add_shortcode( 'col-two-thirds', 'wptb_col_two_thirds' );

// Adds a [[col-three-quarters]] shortcode 
function wptb_col_three_quarters( $atts, $content = null ){
	return '<div class="col-sm-9">'.do_shortcode($content).'</div>';	
}
add_shortcode( 'col-three-quarters', 'wptb_col_two_thirds' );

// Adds a [[col-five-sixths]] shortcode 
function wptb_col_five_sixths( $atts, $content = null ){
	return '<div class="col-sm-9">'.do_shortcode($content).'</div>';	
}
add_shortcode( 'col-five-sixths', 'wptb_col_five_sixths' );

// Adds a [[col-full]] shortcode 
function wptb_col_full( $atts, $content = null ){
	return '<div class="col-sm-12">'.do_shortcode($content).'</div>';	
}
add_shortcode( 'col-full', 'wptb_col_full' );

// This filter ensures that our grid shortcodes
// don't inherit WordPress's automatic
// insertion of <p> </p> tags 
function wptb_grid_content_filter( $content ) {
	$shortcodes = array(
		'row', 
		'col-one-sixth', 
		'col-one-quarter', 
		'col-one-third', 
		'col-one-half', 
		'col-two-thirds', 
		'col-three-quarters', 
		'col-five-sixths', 
		'col-full'
	);
	$block = join( '|', $shortcodes );
    $rep = preg_replace( "/(<p>)?\[($block)(\s[^\]]+)?\](<\/p>|<br \/>)?/","[$2$3]", $content );
	$rep = preg_replace( "/(<p>)?\[\/($block)](<\/p>|<br \/>)?/","[/$2]", $rep );
	return $rep;
}
add_filter( 'the_content', 'wptb_grid_content_filter' );

Usage

You can now use these shortcodes in the WordPress editor, like this:

[row]
[col-one-half]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit varius libero. In pulvinar orci sed dapibus condimentum. Donec bibendum eget neque varius gravida. Praesent nec facilisis nulla, in molestie eros.
[/col-one-half]
[col-one-half]
Quisque volutpat efficitur erat, pulvinar ultrices mauris consectetur non. Sed et imperdiet arcu, sagittis accumsan metus. Nullam in lacus sed enim posuere faucibus. Fusce in dictum leo.
[/col-one-half]
[/row]

Result

The resulting post or page (from the example above) renders like this on screens sizes “small and up”:

Two responsive columns of text, thanks to our simple WordPress Bootstrap grid shortcodes.