Bootstrap Shortcodes for your theme

Quick add-ons for WordPress

Here is a quick add-on for your theme’s functions.php, formatting for posts and pages that is easier than adding divs, spans, or tables. I have been wanting to add this functionality to my themes for some time now. I had some free time the other day and finally got around to testing it. Works like a charm!

Bootstrap is based on a 12-grid system which makes it perfect for nicely formatting your posts and pages with minimal effort. If you are not familiar with Bootstrap head over to the website and check it out. Its a great tool to have in your toolbox.

The basic idea of shortcodeis to make it easier to create special kinds of content (e.g. forms, content generators) that users can attach to certain pages by adding the corresponding shortcode into the page text.

example: [gallery]

Warning: You will need to add bootstrap.css to your css folder in order for these shortcodes to work properly.

Getting started – add this code to your functions.php file

/**
 *Short Codes Bootstrapped 
 */

function endif_bootstrapped_row( $atts, $content = null ) {
   return '<div class="row">' . do_shortcode($content) . '</div>';
}
add_shortcode('row', 'endif_bootstrapped_row');


//col-md-1 Bootstrapped
function endif_bootstrapped_col_one( $atts, $content = null ) {
   return '<div class="col-md-1">' . do_shortcode($content) . '</div>';
}
add_shortcode('col-1', 'endif_bootstrapped_col_one');

//col-md-2 Bootstrapped
function endif_bootstrapped_col_two( $atts, $content = null ) {
   return '<div class="col-md-2">' . do_shortcode($content) . '</div> <div class="clear"> </div>';
}
add_shortcode('col-2', 'endif_bootstrapped_col_two');

//col-md-3 Bootstrapped
function endif_bootstrapped_col_three( $atts, $content = null ) {
   return '<div class="col-md-3">' . do_shortcode($content) . '</div>';
}
add_shortcode('col-3', 'endif_bootstrapped_col_three');

//col-md-4 Bootstrapped
function endif_bootstrapped_col_four( $atts, $content = null ) {
   return '<div class="col-md-4">' . do_shortcode($content) . '</div>';
}
add_shortcode('col-4', 'endif_bootstrapped_col_four');

//col-md-5 Bootstrapped
function endif_bootstrapped_col_five( $atts, $content = null ) {
   return '<div class="col-md-5">' . do_shortcode($content) . '</div>
' . do_shortcode($content) . '
'; } add_shortcode('col-10', 'endif_bootstrapped_col_ten'); //col-md-11 Bootstrapped function endif_bootstrapped_col_eleven( $atts, $content = null ) { return '<div class="col-md-11">' . do_shortcode($content) . '</div>'; } add_shortcode('col-11', 'endif_bootstrapped_col_eleven'); //col-md-12 Bootstrapped function endif_bootstrapped_col_twelve( $atts, $content = null ) { return '<div class="col-md-12">' . do_shortcode($content) . '</div>'; } add_shortcode('col-12', 'endif_bootstrapped_col_twelve');

These are the shortcodes you will use to format any posts or pages. Read the Bootstrap documentation for explanations of the column sizes.


/*SHORT CODES with this theme
----------------------------------------*/

[row] [/row] 

[col-1] [/col-1]
[col-2] [/col-2]
[col-3] [/col-3]
[col-4] [/col-4]
[col-5] [/col-5]
[col-6] [/col-6]
[col-7] [/col-7]
[col-8] [/col-8]
[col-9] [/col-9]
[col-10] [/col-10]
[col-11] [/col-11]
[col-12] [/col-12] 

In order for the browser to render your content properly, start with the opening [row] shortcode and use any combination of the [col- ][/col- ] shorcodes (the column numbers must add up to 12) with your content inside, then follow-up with [/row]like so.

  [row]
    [col-12]  
       Content...
    [/col-12]
  [/row]

Pretty neat huh?

There are many other helper classes that you could also build into your shortcode functionality. Something that might be neat for the future is adding warning classes to your list of shortcodes so that you would only have to wrap a paragraph in [warning][/warning] tags to get the effect of yellow text (like the yellow text above). The possibilities are many. For now, I only want to have layout formatting.