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

Frontend Development
Dive into the Sanity Structure Builder

By:Mark Biek on 6/13/2021

Sanity is the super fast, super customizable CMS that we're using as the backend for the new via.studio website. One of the more powerful concepts that Sanity is the ​Structure Builder which gives you the ability to customize how content is presented in the Sanity admin.

Read More »
Email
Email @ 50: Email Development
Email @ 50: Email Development

By:Nick Stewart on 8/6/2021

Email development has always been the bane of a web developer's existence. You have to use outdated methods and don't have access to the full modern web to create a nice looking email that thousands of people will see. It's like asking a Nascar mechanic to create a car using only tools from the 90s - it can be done but its more than a pain.

Read More »