Categories
Posts

WordPress Columns Shortcode

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.

10 replies on “WordPress Columns Shortcode”

Is it possible to get the column shortcodes to appear in a sidebar? They don’t seem to display in the widget areas.

Adding the shortcode for widgets is easy, just throw this in your function.php
add_filter('widget_text', 'do_shortcode');

I know I previously tested it to make sure it works, but didn’t think of a practical use for it. Post a link of it if you would like, I would be curious to check it out. :)

Nice job on the design with that site, looks great. Glad the shortcodes worked out for you, I really want to convert them to work with tinymc, but last time I looked it seemed way over the top for doing it just to do it. Figured I would save that till I actually needed it. :)

Currently the outside of the shortcode box is controlled by percentages, they all use a margin-right: 4%; in the CSS that would need to be adjusted, but you will also have to change the math on the boxes to match. If you were only using a few of the boxes, you can just adjust the ones you need and delete the rest of the unneeded CSS.

On the inside of the shortcode box there is just 10px of padding.

There are a few different versions of the boxes that are meant to be more of an “aside” which also have a margin-right or margin-left of 4%, so those would have to be adjusted accordingly as well. It is all just CSS that controls it.

Thank you SO much for your functions code to repair the wpautop issue. I was going CRAZY as I’d disabled wpautop to fix some shortcode areas in a client’s site, but that made it impossible to format the rest of the posts to look right. I spent almost 2 hours searching different terms before I ran across your post. Thank goodness you wrote it!

Leave a Reply

Your email address will not be published.