Note technology rapidly evolves and this tutorial is over 3 years old, as a result some of the practices used in this tutorial may be out of date.

Adding Column Layout Shortcodes to Your WordPress Theme

column-shortcodes

Shortcodes have become almost a requirement in Premium WordPress Themes and their use is on the rise.

This is the first tutorial of 2 in which we will explain the implementation of the shortcodes we used in our Premium WordPress Themes inFocus and Awake.

Since there is already a wealth of documentation on the intricacies of how shortcodes work, we will be focusing primarily on their implementation. If you’d like to learn more about shortcodes in general, we recommend the following resources:

1. WordPress Codex – Shortcode API
2. Mastering WordPress Shortcodes

The following shortcodes allow the end user to create percentage-based infinitely nestable column layouts.
Preview the end result: Awake Column Shortcodes

You can download a plugin version of this tutorial at the bottom of this post.

Step #1 – The PHP Code

Add the following php code to your theme’s functions.php file. If your theme doesn’t have a functions.php file create one and paste in the following:

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

function webtreats_one_third_last( $atts, $content = null ) {
   return '<div class="one_third last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('one_third_last', 'webtreats_one_third_last');

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

function webtreats_two_third_last( $atts, $content = null ) {
   return '<div class="two_third last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('two_third_last', 'webtreats_two_third_last');

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

function webtreats_one_half_last( $atts, $content = null ) {
   return '<div class="one_half last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('one_half_last', 'webtreats_one_half_last');

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

function webtreats_one_fourth_last( $atts, $content = null ) {
   return '<div class="one_fourth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('one_fourth_last', 'webtreats_one_fourth_last');

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

function webtreats_three_fourth_last( $atts, $content = null ) {
   return '<div class="three_fourth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('three_fourth_last', 'webtreats_three_fourth_last');

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

function webtreats_one_fifth_last( $atts, $content = null ) {
   return '<div class="one_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('one_fifth_last', 'webtreats_one_fifth_last');

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

function webtreats_two_fifth_last( $atts, $content = null ) {
   return '<div class="two_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('two_fifth_last', 'webtreats_two_fifth_last');

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

function webtreats_three_fifth_last( $atts, $content = null ) {
   return '<div class="three_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('three_fifth_last', 'webtreats_three_fifth_last');

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

function webtreats_four_fifth_last( $atts, $content = null ) {
   return '<div class="four_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('four_fifth_last', 'webtreats_four_fifth_last');

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

function webtreats_one_sixth_last( $atts, $content = null ) {
   return '<div class="one_sixth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('one_sixth_last', 'webtreats_one_sixth_last');

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

function webtreats_five_sixth_last( $atts, $content = null ) {
   return '<div class="five_sixth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('five_sixth_last', 'webtreats_five_sixth_last');

Step #2 – The CSS Code

Fluid Columns

When you’re building a site for yourself or a client, you have the luxury of using fixed column layouts like we did in our first theme inFocus.

But, in premium theme development, users will often want to change the width of the site, the width of the sidebar, nest the column shortcodes and use them within other structures that throw the dimensions off.

For this reason, we implemented fluid columns in our second theme Awake. You can see in the examples below how much more flexible they are.

http://themes.mysitemyway.com/awake/shortcodes/column-shortcodes/
http://themes.mysitemyway.com/awake/features/layouts/column-layouts/

The CSS

Insert the following CSS in your themes style.css file.

/* ------- Fluid Columns ------- */
.one_half{ width:48%; }
.one_third{ width:30.66%; }
.two_third{ width:65.33%; }
.one_fourth{ width:22%; }
.three_fourth{ width:74%; }
.one_fifth{ width:16.8%; }
.two_fifth{ width:37.6%; }
.three_fifth{ width:58.4%; }
.four_fifth{ width:67.2%; }
.one_sixth{ width:13.33%; }
.five_sixth{ width:82.67%; }
.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth{ position:relative; margin-right:4%; float:left; }
.last{ margin-right:0 !important; clear:right; }
.clearboth {clear:both;display:block;font-size:0;height:0;line-height:0;width:100%;}

Step #3 – Disabling WordPress wpautop and wptexturize filters.

By default WordPress’s wpautop and wptexturize filters inject p tags and br tags around the outputted column content which is a problem if you need your site to validate.

The following function created by TheBinaryPenguin for his wp-raw plugin takes care of that by disabling WordPress’s auto-formating filters so that the column shortcode is parsed without being run through them, then reapplying the content filters after the column shortcode has been parsed. The result is that all of the column shortcodes will validate.

function webtreats_formatter($content) {
	$new_content = '';
	
	/* Matches the contents and the open and closing tags */
	$pattern_full = '{(\[raw\].*?\[/raw\])}is';
	
	/* Matches just the contents */
	$pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
	
	/* Divide content into pieces */
	$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);
	
	/* Loop over pieces */
	foreach ($pieces as $piece) {
		/* Look for presence of the shortcode */
		if (preg_match($pattern_contents, $piece, $matches)) {
			
			/* Append to content (no formatting) */
			$new_content .= $matches[1];
		} else {
			
			/* Format and append to content */
			$new_content .= wptexturize(wpautop($piece));		
		}
	}
	
	return $new_content;
}

// Remove the 2 main auto-formatters
remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');

// Before displaying for viewing, apply this function
add_filter('the_content', 'webtreats_formatter', 99);
add_filter('widget_text', 'webtreats_formatter', 99);

Step #4 – Fixing the backtrack_limit Bug

The following takes care of the mysterious disappearing content bug that happens when too many shortcodes are used on a page.

//Long posts should require a higher limit, see http://core.trac.wordpress.org/ticket/8553
@ini_set('pcre.backtrack_limit', 500000);

Step #5 – Converting it all to a Plugin (Optional)

If you don’t want to touch your theme files, you can alternately create a plugin following the steps below.
Or download the finished plugin here: Download the Column Shortcode Plugin Here

1. Create the following folder structure:

column_shortcodes_plugin_structure

2. Add the following to the top of webtreats-column-shortcodes/column-shortcodes.php so that WordPress recognizes it as a plugin.

/*
Plugin Name: Fluid Column Layout Shortcodes
Plugin URI: http://tutorials.mysitemyway.com
Description: Adds percentage based infinitely nest-able column shortcodes.
Version: 1.0
Author: Webtreats
Author URI: http://mysitemyway.com
License: GPL2
*/

3. Beneath the plugin info, add all the php code from steps #1,#3,#4.
4. Also add the following additional function to load the necessary CSS styles:

function webtreats_column_stylesheet() {
    $my_style_url = WP_PLUGIN_URL . '/webtreats-column-shortcodes/styles.css';
    $my_style_file = WP_PLUGIN_DIR . '/webtreats-column-shortcodes/styles.css';

    if ( file_exists($my_style_file) ) {
        wp_register_style('column-styles', $my_style_url);
        wp_enqueue_style('column-styles');
    }
}
add_action('wp_print_styles', 'webtreats_column_stylesheet');

5. Add all the css code from step #2 to webtreats-column-shortcodes/styles.css

Step #6 – How to use the shortcodes

You can see the column shortcodes in use on our Awake WordPress Theme demo here:

http://themes.mysitemyway.com/awake/shortcodes/column-shortcodes/

For pre-formatted starter content in different column configurations just click “Get the Code” beneath each column set and copy/paste the code into your WYSIWYG editor.

We’ve provided a few snippets below as well.

Two column layout:

[one_half]
	Your content goes here.....
[/one_half]
[one_half_last]
	Your content goes here.....
[/one_half_last]

Three column layout:

[one_third]
	Your content goes here.....
[/one_third]
[one_third]
	Your content goes here.....
[/one_third]
[one_third_last]
	Your content goes here.....
[/one_third_last]

Four column layout:

[one_fourth]
	Your content goes here.....
[/one_fourth]
[one_fourth]
	Your content goes here.....
[/one_fourth]
[one_fourth]
	Your content goes here.....
[/one_fourth]
[one_fourth_last]
	Your content goes here.....
[/one_fourth_last]

Five column layout:

[one_fifth]
	Your content goes here.....
[/one_fifth]
[one_fifth]
	Your content goes here.....
[/one_fifth]
[one_fifth]
	Your content goes here.....
[/one_fifth]
[one_fifth]
	Your content goes here.....
[/one_fifth]
[one_fifth_last]
	Your content goes here.....
[/one_fifth_last]

Six column layout:

[one_sixth]
	Your content goes here.....
[/one_sixth]
[one_sixth]
	Your content goes here.....
[/one_sixth]
[one_sixth]
	Your content goes here.....
[/one_sixth]
[one_sixth]
	Your content goes here.....
[/one_sixth]
[one_sixth]
	Your content goes here.....
[/one_sixth]
[one_sixth_last]
	Your content goes here.....
[/one_sixth_last]

Download
You might also like
Yellow Road Sign Icons Create a Professional Coming Soon Landing Page PSD Template Red and White Pearl Download Icon Grunge Yellow Warning Striped Icon & Text Effect Glossy Silver Web 2.0 Icon Tutorial Brushed Silver Reflective Text Effect Myriad Wordpress Theme Grungy Rusted Carbon Fiber Text Effect Starfield Tileable Twitter Background Tutorial Adding Versatile Button Shortcodes to your WordPress Theme Image Masking and Sliding Transition Effect Modular Wordpress Theme Method Wordpress Theme Glossy Black Button Icons Data URI Tileable Transparent Patterns Fusion Wordpress Theme Elegance Wordpress Theme Crystal Clear Bubble Icons Matte White Square Check Mark Icon Dejavu Wordpress Theme Watercolor Social Networking Icons Echelon Wordpress Theme 3D Transparent Glass Text Effect Blue Retro Grunge Text Effect and Icons

72 comments on “Adding Column Layout Shortcodes to Your WordPress Theme

  1. Dean says:

    Excellent tutorial.
    Perhaps the next could be how to make this work in the WYSIWYG editor as you have with Awake theme

    October 20, 2010 2:53 am
    1. Pamela says:

      Hi Dean,
      Glad you like the tutorial!
      Right now our plan is to do individual tutorials for each of our Awake shortcodes. Then we’ll do a tutorial at the very end explaining how to organize them together into one plugin and add the WYSIWYG popup.

      October 21, 2010 7:07 pm
      1. Matt says:

        I would LOVE a tutorial on how to group multiple shortcodes into a popup in the TinyMCE editor.

        June 28, 2011 5:44 pm
    1. Pamela says:

      Hi Drew,

      Yes, we do plan on creating tutorials and standalone plugins for each of our shortcodes.

      November 6, 2010 10:21 am
        1. Pamela says:

          Unfortunately we don’t have a time frame at the moment, but we will announce it on the support forum when it’s out.

          November 10, 2010 9:57 am
  2. ady says:

    buttons plugin working fine rendering output please help with column plugin do i have to make changes on my theme side

    November 18, 2010 6:56 am
    1. Pamela says:

      If you installed the plugin, you should not need to change anything in your theme.

      November 20, 2010 9:38 am
  3. Wam3 says:

    For some reason it works when I preview a post, but when I publish it I get a 404 error? Have you seen that before?

    W

    December 7, 2010 1:47 pm
    1. Pamela says:

      Hi Wam3,

      I haven’t seen that before.
      Have you tried deactivating all other plugins?

      December 12, 2010 8:48 am
  4. Adrian says:

    Hi Pamela,

    i want to ask about this column. Can I place it on the index.php? I mean, I want to put this code not on post but on homepage file.

    December 31, 2010 8:55 pm
  5. Penina says:

    I installed this plugin and your buttons shortcodes plugin, and both of them deactivated my Slideshow Gallery plugin. My gallery works by inserting a shortcode on a page or post. The gallery plugin I use can be found at the wordpress.org site:
    http://wordpress.org/extend/plugins/slideshow-gallery/screenshots/

    Just wanted to let you know. There’s another free columns plugin, like yours (WP Post Columns), and I’m using that one now instead, even though it hasn’t been updated since late 2010 it still works just fine. The good thing is that it doesn’t disable my slideshow gallery when I install it. I hope you guys work out the kinks because your shortcodes plugins are cool. I’ll try them again if they’re fixed.

    January 18, 2011 5:36 am
  6. empfx says:

    Hi, thanks for taking the time out to share such great code. My problem is when I use the one_fourth shortcode the columns are all vertical and not lining up next to each other, is there anything in my CSS code I need to add or delete to make these line up properly? Thanks again, mega appreciated!

    January 23, 2011 10:54 am
    1. empfx says:

      My apologies I have figured out the solution to my problem and thought I would share. I am knew to wordpress so just entering the shortcode itself was’nt enough, each column needed to be in a seperate div and the last column code needed the word “last” appended to it. Hope this helps someone, thanks again for the great shortcodes.

      January 23, 2011 11:24 am
      1. Lita says:

        Hi empfx, Glad to hear that the problem is fixed and thank you for sharing the solution!

        January 24, 2011 11:06 pm
  7. Patrick says:

    This tutorial is awesome! Added column shortcodes (something I’ve wanted to do for a while) in minutes!

    Im going to check out some of your other posts, keep up the good work!

    March 2, 2011 4:22 am
  8. Newby says:

    Thanks for the detailed description.

    I have just one question Step 1,3,4 code all go into the functions.php?

    March 17, 2011 12:24 am
  9. Jean-Pierre says:

    How would I incorporate that “back to top” style divider? I can style it but getting it into the shortcode plugin would be a great addition

    March 23, 2011 10:04 am
  10. Brian says:

    I can’t tell you how much time this tutorial saved me. Very well-written and organized. This is premium nettuts+ tutorial material :)

    One question – if I use this code in a theme I’m creating for resale on ThemeForest, am I required to give you attribution? If so – where do I put the attribution?

    Thanks again!
    Brian

    March 29, 2011 6:39 am
    1. Brian says:

      Haha, wow. I I had scrolled down 3 more inches I would have seen your Terms of Use blurb which totally answers my question. Thanks again!

      March 29, 2011 7:08 am
      1. Lita says:

        Thanks for the compliment Brian. Glad you’ve found our tutorial helpful!!! :)

        March 29, 2011 8:28 pm
  11. Natalie says:

    Thanks for posting this code and tutorial – I’d love to be able to use it, but I am getting stymied at Step 1. When I paste the code into functions.php and try to update the file, I get the following error:

    Warning: Cannot modify header information – headers already sent by (output started at /home1/xxx/public_html/websitename/wp-content/themes/themename/functions.php:9) in /home1/xxx/public_html/websitename/wp-admin/theme-editor.php on line 99

    Does this mean anything to you? I’m not advanced enough to figure it out…

    June 1, 2011 6:45 am
  12. Tim says:

    Dear Sir,

    Tim here.
    If your not using it as a plugin how does the shortcodes.php file know what css files to call?

    And also, how can you call the shortcodes.php file from another functions.php page.

    Thanks for your time, great article btw.
    Tim

    June 24, 2011 10:55 am
  13. FashionWriter says:

    I was very happy to come across this tutorial. The designer of the theme I’m using had the width for their columns in pixels which would make the last one appear funky at times. I wouldn’t have been able to figure out the percentages, so this was perfect. And now they work perfectly.

    I added other shortcodes you have here to the few existing ones I had in the shortcodes php file for my theme. All of them work except for the three_fourths one. I’ve double checked the php and the css. It’s right, but it just won’t be called. I don’t understand what could be wrong. I don’t necessarily need it – I would be fine with just the one_fourth – but it’s driving me nuts that all the others are being called fine and not that one. Any ideas?

    August 11, 2011 1:52 pm
  14. Pixelrage says:

    Is this article still valid in Aug. 2011? I’m really interested in this but am a little afraid after reading some of these comments!

    August 20, 2011 2:00 pm
  15. Pasquale says:

    I just installed the plugin on a wordpress site I’m building. It seems to be doing something funny on the video page when used like this:

    [one_half]
    Solo Work
    [youtubegallery]
    http://youtu.be/aqkX0xf9Uw4
    [/youtubegallery]
    [/one_half]

    The [youtube] is part of another plugin. Is it possible to nest another plugin function within yours? For now, it’s spreading it out into three thumbnails as if [youtubegallery] and [/youtubegallery] are their own clips.

    September 7, 2011 4:35 pm
  16. William says:

    Been trying to follow & get this to work on multiple blogs but havent had any success…the plugin works great (thank you!) but hard-coding is not…

    Tried on both a custom theme running 3.2.1, and also a plain old, right out of the box vanilla install….

    is something in the new versions not allowing this? Thanks!

    October 21, 2011 12:39 pm
  17. tigroocom says:

    Hi, great post – really useful – thanks. Noticed that that css for four fifths should be a bit bwider, i.e. .four_fifth{ width:79.2%; }

    November 20, 2011 11:00 pm
  18. Sascha says:

    Hello There, nice one! I love your tutorial the code works fine form me.
    I have a problem with one of my other plugins i use. I have installed a plugin called digg digg which is adding a floating social button box right beside my content, Now if i activate your columns plugin the box is gone.
    http://www.diggdigg2u.com/

    I am not that familiar with php. So i would love to get a bit of help.
    I have allready emailed the digg digg plugin guy but i he did not email me back.

    Do you think you can help me with that ?

    Sascha

    November 30, 2011 4:32 am
  19. Julie says:

    Hi,

    I love your shortcodes! I purchased both of your themes and just installed this plugin on a third website I’m currently working on.
    The website also uses SimplePress forum plugin. When I activate your plugin it adds unwanted paragraphs everywhere within the forum.
    Any idea why?
    Thanks in advance for your help!
    Julie

    December 9, 2011 5:38 pm
  20. Christy says:

    Great tutorial! And, great plugin for WordPress :)

    Is there a way to modify, or add to the css to allow for a border between the columns?

    I’d like to add a visual separator if possible – it would be great to have it for all, but I’m currently using the 2 column version

    December 19, 2011 4:20 pm
  21. fractalbit says:

    Thanks for the great and useful tutorial. I have a question though.

    I do not understand the need for the “webtreats_formatter” function. I assume It only works if you wrap your shortcodes inside a [raw][/raw] shortcode but nowhere in the above code does this happen.

    So what is the purpose of this? Is it optional and left to the user to decide when and how to use it?

    December 29, 2011 6:17 am
  22. Lynn says:

    Thank you so much for this wonderful solution that’s so elegant, works without any problems, and is easy to implement and use. I’m so happy!!

    May 31, 2012 12:25 pm

    200 Can’t Resist News from the Web Design Community — tripwire magazine

    Tutorial on How to Add Column Layout Shortcodes to Your Wordpress Theme |

    Tutorial on How to Add Column Layout Shortcodes to Your Wordpress Theme

    Quick list: Ten CSS resources | Tutorials Web Design

    Tutorial on How to Add Column Layout Shortcodes to Your Wordpress Theme | FlippaNiche

    Adding Column Layout Shortcodes to Your Wordpress Theme | Tutorials ETC | Amber A Lee

    Proto WordPress Theme | themek

    Adding Column Layout Shortcodes to Your Wordpress Theme | Tutorials ETC » Web Design

    » Best Price Add More Ing to Your Life: A Hip Guide to Happiness Umbrellas Blog

    Tutorial on How to Add Column Layout Shortcodes to Your Wordpress Theme « WORDPRESS BACKGROUNDS

Comments are closed.