Wordpress - Columns In Posts

Wordpress is fantastic, and an easy way to maintain pages and posts on your website using Wordpress's integrated editor.  One thing the editor lacks is a way to put columns in posts, to give you a magazine style layout.  One way to get around this is to use SHORTCODES in your posts, to specify where columns should lay.

Firstly, in your Wordpress theme folder, you will find functions.php.  Open this up, and at the bottom, add the following code:

## MULTI COMULMN PLUGIN ##
function column_shortcode( $atts, $content = null ) {
   extract( shortcode_atts( array(
      'width' => '45%',
      'padding' => '0',
      // ...etc
      ), $atts ) );

   return '<div style="width:'.$width.'; float: left; padding-right: '.$padding.'; display: inline;" class="post_column_1">' . do_shortcode($content) . '</div>';
}

function end_column_shortcode(){
return '<div style="clear: both;"></div>';
}

add_shortcode('column', 'column_shortcode');
add_shortcode('end_columns', 'end_column_shortcode');
########## END ###########

 

The code above adds shortcode abilities in your posts.  So now, after doing this, create a new post/page and try the following for a two column layout:

[column width="48%" padding="10pt"]

Column 1

[/column]

[column width="48%"]

Column 2

[/column]

[end_columns]

 

Now view your entry, you should see a two column layout.  You can do this for three column, even four column, just adjust the 'width' on each column shortcode.  This will help with your Wordpress layouts.  :)  Here at Big Pepper, we have used this method many times for our clients.