Shortcodes – Columns

This tutorial will show how to create columns inside your page content. This uses the same classes and structure as Twitter’s Bootstrap front-end framework that creates grid layouts–which is what this theme uses. The grid layout is based on 12-columns side-by-side. So a full width page will use a class of col-md-12 which means use all 12 columns for our page. Later in this tutorial, we will make a 2-column layout, but here is an example where I used this inside a page to add 2 Image Boxes using shortcode:

sc column demo

The Bootstrap grid requires a little reading to understand how this works, so here is a reference you can check out:

Bootstrap Grid

IMPORTANT You do not have to use this theme’s column shortcode as it is a bit more hands-on and manually created, not to mention having to get familiar with Bootstrap grid classes. However, this might be an easier solution for you, but there are free WordPress plugins for creating shortcode columns, such as this one:

Column Shortcodes

The first thing we need to do is to create a wrapper container:

[sp-row] [sp-row]

In between those two elements will be our columns and content, so now we need to decide how many columns we want. In this example, we will create two columns, so each column needs a Bootstrap column class of col-md-6 added. We will place this column code between our row shortcode like this:

[sp-row] [sp-column class=”col-md-6″] [/sp-column] [sp-column class=”col-md-6″] [/sp-column] [sp-row]

Your content will go in between the column shortcodes like this:

[sp-row]
[sp-column class="col-md-6"]Your content goes here for column 1 [/sp-column]
[sp-column class="col-md-6"]Your content goes here for column 2 [/sp-column]
[/sp-row]

Note What you place in each column is up to you, as it can be content or even more shortcodes such as image boxes if you want to add these inside your page instead of text widgets.