Our WorkAbout UsOur ApproachThe Journal
Contact »
« Back to the journal
Frontend Development + WordPress

Custom Bootstrap Shortcodes for WordPress

By:

Natalie Miller

on 6/27/2017

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' =&gt; ''), $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.

Share to

Related Posts

Websites
What's the JAMstack?

By:Alec Robertson

As a front-end developer in 2020, it is time that I fulfill the FEDeral mandate that I publish words regarding the JAMStack. If you follow too many developers on Twitter, it’s likely you’ve heard about the Next Big Thing in web development, but I’d like to put this trend (fad? movement?) into context to better understand what’s truly new about this approach and whether it’s worth using.

Read More »
Tips for creating a Canvas game for Android

By:Nick Stewart on 8/9/2017

With the help of our excellent illustrator Pat, we will soon be releasing Face Paint Peggy, an HTML Canvas game for Android mobile phones. The object of the game is to catch “drops” that are of a certain color, progressing through levels where drops move faster and more drops are on the playing field.

Read More »