large shade tree

Navigation

Information

Recent Posts

Shade Tree Sites |Building Better Websites

Shortcode Adds Columns to WordPress Posts

Paste in functions.php:

/*---------------------*/
/*    Columns
/*--------------------*/
add_shortcode('column', 'column_shortcode');
function column_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array(
'size' => '',
'position' =>''
), $atts ) );
return '<div>'.do_shortcode($content).'</div>'; }

Paste in style.css:

/*columns*/
.one-half{ width: 48% }
.one-third{ width: 30.66% }
.one-fourth{ width: 22% }
.one-fifth { width: 16.8% }
.one-sixth { width: 13.33% }

.one-half,
.one-third,
.one-fourth,
.one-fifth,
.one-sixth {
position: relative;
margin-right: 4%;
float: left;
}

.column-last { margin-right: 0px }
.column-last:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}

How to Use

Last column requires the “last” position value to remove the right-side margin and clear the floats.

[column size="half"]My Content[/column]
[column size="half" position="last"]My Content[/column]

source: WPExplorer