functions.php

optimize seo, security and theme development
with these functions.php code snippets

How To Create Twitter Boostrap Column Shortcodes

We all know that Bootstrap provides a strong fluid grid system for building responsive layouts which appropriately scales up to 12 columns. It defines its own classes in CSS for easy layout options. Grid systems are used for creating page layouts through a series of rows and columns that holds your content. This is total hassle-free layout creating system where you can arrange your elements in any way you want.

Now what if we need the flexibility of using this grid system in our post / page content? Do we have to go into HTML code and change all the classes according to Bootstrap library or there is any other way?

Well, yes there is a more efficient way where we can use the power of shortcodes in our favorite ‘functions.php’. We can write Column Shortcode Function to use the Bootstrap grid system as Responsive Theme Shortcodes. To see how to do it, read next.

How to create a PHP function for Bootstrap column shortcode?

You can follow these simple steps to add a PHP function for Bootstrap Column Shortcode.

Step-1: Go to your theme’s functions.php file at this location
“/wp-content/themes/yourtheme/functions.php”

Step-2: There are multiple column styles available in Bootstrap so we can define a function for each of them. However, most commonly used column widths are:
– One-Half 1/2 Column
– One-Third 1/3 Column
– One-Fourth 1/4 Column
– Two-Third 2/3 Column
– Three-Fourth 3/4 Column

Now create functions and shortcodes for each column style in ‘functions.php’. If you already haven’t defined any custom shortcode functions before, you can add this set of functions in the end of file.

We have named our function as “one_half” and passed 2 variables to it, one is array of attributes “$atts” and second one is the content we want to have inside this column “$content”.

<div class="col-md-6">'.do_shortcode($content).'</div>

Inside the function, we have generated an HTML div having original Bootstrap class for One-Half column width and placed our content inside it. This Bootstrap Column Shortcode is basically encapsulating this dynamic HTML code to display the content inside a fluid column. We are using Bootstrap column class and function variable $content to create the column.

Step-3: After defining the functionality, it is time to add this function in WordPress shortcodes library by using this function add_shortcode ("shortcode_name_here", "function_name_here");

First variable being passed to this function defines the shortcode name we want to use, while adding this to our pages, and second variable defines the function name to be associated with this shortcode.

Add this code after closing your function code.
add_shortcode ("one_half", "one_half");

Other examples of Column Shortcode Function for various column widths are given below.

How to use the Bootstrap column shortcode in your posts or pages?

You do not need to have any knowledge of programming in order to add Bootstrap columns to your pages because the programmer has made this job easier for you. Simply add shortcodes like the examples given below and you are done. Voila!

Let’s present services of a company in 3 equal-width columns on page by using our shortcode and you successfully have styled your content in responsive layout by yourself.

Marketing

Service description here
(any kind of content you can place in between opening and closing shortcode)

Management Consultancy

Service description here
(any kind of content you can place in between opening and closing shortcode)

Financial Advisory

Service description here
(any kind of content you can place in between opening and closing shortcode)

[one_third]
Marketing
Service description here
(any kind of content you can place in between opening and closing shortcode)
[/one_third]
[one_third]
Management Consultancy
Service description here
(any kind of content you can place in between opening and closing shortcode)
[/one_third]
[one_third]
Financial Advisory
Service description here
(any kind of content you can place in between opening and closing shortcode)
[/one_third]