A few months ago, I received a call asking if I knew how to make column shortcodes for a WordPress theme. I answered “No”, but quickly followed up with a explanation of how it should be fairly easy. The hunt for shortcode columns was on, after researching column shortcode examples, I noticed the ones out there were not very flexible when it came to styling. I kept thinking there has to be a better way and it wasn’t until making another shortcode for boxes that I figured out the columns and boxes could be merged into one single shortcode for a developer who wants total control with CSS.
This set of snippets can easily be modified into a plugin, take a look at creating a custom functions plugin for end users for directions. Also hopefully you have your basics down before tackling something like this, not recommended for anyone who doesn’t understand CSS and PHP, although the links in this article should help.
The PHP Columns Shortcode
Insert into your functions.php in the WP theme folder.
function snix_shortcode_columns( $atts, $content = null ) {
extract(shortcode_atts(array(
'size' => 'full', // full width 100% is default
'color' => '',
'type' => '',
'align' => '',
'float' => '',
'text' => '',
), $atts));
$size = ($size) ? ''.$size : '';
$color = ($color) ? ' '.$color : '';
$type = ($type) ? ' '.$type : '';
$text = ($text) ? ' text'.$text : '';
$align = ($align) ? ' align'.$align : '';
$float = ($float) ? ' float'.$float : '';
if (strpos($size, "last") === false) {
// if last is not found
return '<div class="' .$size.$color.$type.$align.$float.$text. ' awesome-box"><span class="box-icon"></span><span class="box-content">' .do_shortcode($content). '</span></div>';
}
else {
// if last is found
return '<div class="' .$size.$color.$type.$align.$float.$text. ' awesome-box"><span class="box-icon"></span><span class="box-content">' .do_shortcode($content). '</span></div><span class="clearboth"></span>';
}
}
add_shortcode('box', 'snix_shortcode_columns');
The CSS for the Shortcode Columns
Insert into style.css in the WP theme folder.
/*
column box sizing - size=""
default is full width 100%
----------------------------------------------------*/
.one_half, .one_half_last { width:48%; }
.one_third, .one_third_last { width:30.66%; }
.two_third, .two_third_last { width:65.33%; }
.one_fourth, .one_fourth_last { width:22%; }
.three_fourth, .three_fourth_last { width:74%; }
.one_fifth, .one_fifth_last { width:16.8%; }
.two_fifth, .two_fifth_last { width:37.6%; }
.three_fifth, .three_fifth_last { width:58.4%; }
.four_fifth, .four_fifth_last { width:67.2%; }
.one_sixth, .one_sixth_last { width:13.33%; }
.five_sixth, .five_sixth_last { 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 { float: left; margin-right: 4%; }
.one_half_last, .one_third_last, .two_third_last, .three_fourth_last, .one_fourth_last, .one_fifth_last, .two_fifth_last, .three_fifth_last, .four_fifth_last, .one_sixth_last, .five_sixth_last { float: left; margin-right:0; clear: right; }
.full.awesome-box { clear: both; }
.clearboth { clear: both; display: block; font-size: 0; height: 0; line-height: 0; width:100%; }
/*
column box defaults
----------------------------------------------------*/
.awesome-box { border: inset 1px solid #fff; margin-bottom: 20px; background: #f4f4f4; position: relative; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); border-radius: 5px; }
.awesome-box span.box-content { padding: 10px; display: block; }
.box-content h1, .box-content h2, .box-content h3, .box-content h4, .box-content h5, .box-content h6 { padding-top: 0; }
/*
column box type - type=""
alert is a custom box example
----------------------------------------------------*/
.none.awesome-box { border: none; background: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border-radius: none; }
.alert.awesome-box span.box-icon { position: absolute; top: 25px; left: -10px; height: 46px; width: 48px; background: url(../images/icon.png) no-repeat 0 -46px; }
.full.alert.awesome-box span.box-icon { position: absolute; top: -5px; left: -10px; height: 46px; width: 48px; background: url(../images/icon.png) no-repeat 0 -46px; }
.alert.awesome-box span.box-content { padding-left: 30px; }
/*
column box colors - color=""
----------------------------------------------------*/
.blue.awesome-box { background: #2daebf; }
.green.awesome-box { background: #2fc950; }
.grey.awesome-box { background: #a7a8a7; }
/*
column box float - float=""
----------------------------------------------------*/
.floatright.awesome-box { float: right; margin-left: 4%; margin-right: 0; clear: none; }
.floatleft.awesome-box { float: left; margin-right: 4%; clear: none; }
/*
coluumn box align - align=""
----------------------------------------------------*/
.aligncenter.awesome-box { clear: both; display: block; margin-left: auto; margin-right: auto; float: none; }
.alignleft.awesome-box { display: block; margin-right: 4%; float: left; }
.alignright.awesome-box { display: block; margin-left: 4%; float: right; margin-right: 0; }
/*
column box text - text=""
----------------------------------------------------*/
.textcenter.awesome-box { text-align: center; }
.textleft.awesome-box { text-align: left; }
.textright.awesome-box { text-align: right; }
The CSS shows possible options, but with fairly minimal styling. The shortcode attribute of size=”” will control the flexible widths, type=”” will allow you to have specific variations from your original default boxes. The type=”” attribute comes with 2 basic set ups for examples, .alert which inserts a icon and .none which overrides the CSS of the default to not show any options. The rest is fairly self explanatory, color, float, text and align which are just more CSS hooks so these boxes can do damn near anything.
You can download the image used for the icon type, it really isn’t necessary though since you will obviously want your own and really this is just a place holder. If you want it for a quick example, place the image in the root directory of your WordPress theme in the images folder.
Fixing wpautop in shortcodes
Insert into functions.php in the WP theme folder.
// clean up formatting in shortcodes
function snix_clean_shortcodes($content) {
$array = array (
'<p>[' => '[',
']</p>' => ']',
']<br />' => ']'
);
$content = strtr($content, $array);
return $content;
}
add_filter('the_content', 'snix_clean_shortcodes');
As mentioned in my WordPress Shortcode Buttons post, the little snippet above is needed only once to fix formatting on all shortcodes the auto line breaks <br> and empty paragraphs <p></p> inside the shortcodes without disabling wpautop and wptexturize completely. I would not recommend completely disabling the wpautop and wptexturize feature because all paragraphs and line breaks will need to be manually inserted which is a major hassle, especially for clients.
Drawbacks you should know
One thing you should absolutely know about is you can not nest these columns inside each other. Nested shortcodes get a little more complicated, if you needed nesting technically you could just reuse the PHP again, rename the shortcode from box to inner-box, the key is the PHP shortcode needs to have a different name to nest correctly.
You will need to manually insert the HTML into the boxes, so if you need a header and paragraph, these tags will need to be manually inserted. I really think this is half of what makes them very powerful though, so it just depends how you look at them. If you strip out the shortcodes you will still have correctly formatted text, careful attention was paid to keep these a styling element and not to promote poor coding practices summed up nicely on a article by Justin Tadlock called Dealing with Shortcode Madness. Pay close attention to his mention of the “lock in” effect which some other shortcode columns for do, ones with a “Title” as an attribute which handles headers in the columns would be perfect example.
Update: Justin Tadlock has created a Grid Columns shortcode plugin which trumps everything out there.
