Custom Bootstrap Shortcodes for WordPress

When building a theme in WordPress, especially on a content-heavy site, diversifying the layout of your content can make for a much better reading experience. Empowering your clients to do this themselves is also a huge plus.

If you’re using Bootstrap in your theme, one great way to do this is to include custom shortcodes for Bootstrap rows, columns, panels, etc. We include rows and columns by default in our starter theme, Silencio, but you can also build shortcodes for panels, collapsible panels, tables – the world is your oyster.

Here’s a handy guide to help you get started.

Simple shortcodes for rows and columns look like the following:

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

There are multiple ways you can customize your rows and columns based on your clients needs. For example, column offsets can allow you to add more spacing before or between your columns.

Add offset support to your columns like this:

function silencio_col6($atts, $content = null) {
$a = shortcode_atts(array('offset' => ''), $atts);
$offset = $a['offset'] ? ' col-md-offset-' . esc_attr($a['offset']) : '';
return '<div class="col-md-6' . $offset . '">' . do_shortcode($content) . '</div>';
}
add_shortcode('col6', 'silencio_col6');

You can then add a column with an offset to your content like so:

[col6 offset="1"] ...[/col6]

Shortcode attributes can be used to add classes, format content, or style your shortcodes. For instance, I often add the ability for clients to give background colors or images to their rows.

To make this even easier to use, you can add a plugin to the WordPress TinyMCE editor to wrap your content in shortcodes with a select box. You can find an example of this in our Silencio repo on GitHub.