Columnize your post using shortcode

We all use columns when it come to format the content of an article, so here is a quick solution using shortcode in your post to create columns.

Here is an example of your post content:

[row]
    [span size="4"]
        Here is the column 1
    [/span]
    [span size="4"]
        Here is the column 2
    [/span]
    [span size="4"]
        Here is the column 3
    [/span]
[/row]

Which will generate this:

<div class="row">
    <div class="span-4">
        Here is the column 1
    </div>
    <div class="span-4">
        Here is the column 2
    </div>
    <div class="span-4">
        Here is the column 3
    </div>
</div>

It should not be to complicate for anyone to implement it, and it's still better than using a dedicated template.

To make it works, add the following code in your functions.php, and add some class in your css (span-1, span-2, span-3, span-4, etc.).

/* COLUMNIZER */
add_shortcode( 'span', 'sc_columnizer_span' );
add_shortcode( 'row',  'sc_columnizer_row' );

function sc_columnizer_row( $atts, $content='' ) {
    return '<div class="row">' . do_shortcode( $content ) . '</div>';
}

function sc_columnizer_span( $atts, $content='' ) {

    //Extract attributes and set default value if not set
    extract( shortcode_atts( array(
        'size'    => '1'
    ), $atts ) );

    return '<div class="span-' . $size . '">' . do_shortcode( $content ) . '</div>';
}

Here is an example of CSS you can use:

// Columns
.span-1,.span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-10,.span-11,.span-12 {
    float:left;
    margin: 0 1.04167%;
    min-height: 1px;
}

.span-1 { width: 6.25%; }
.span-2 { width: 14.58333%; }
.span-3 { width: 22.91667%; }
.span-4 { width: 31.25%; }
.span-5 { width: 39.58333%; }
.span-6 { width: 47.91667%; }
.span-7 { width: 56.25%; }
.span-8 { width: 64.58333%; }
.span-9 { width: 72.91667%; }
.span-10 { width: 81.25%; }
.span-11 { width: 89.58333%; }
.span-12 { width: 97.91667%; }