CSS:
/*
* Uses column classes from GaryJ's variation of Brian Gardner's Genesis column classes
* http://www.studiopress.com/support/showthread.php?t=50959
*/
.one-half,
.one-third,
.two-thirds,
.one-fourth,
.two-fourths,
.three-fourths,
.one-fifth,
.two-fifths,
.three-fifths,
.four-fifths,
.one-sixth,
.two-sixths,
.three-sixths,
.four-sixths,
.five-sixths {
float: left;
margin: 0 0 20px;
padding-left: 3%;
}
.one-half,
.two-fourths,
.three-sixths {
width: 48%;
}
.one-third,
.two-sixths {
width: 31%;
}
.two-thirds,
.four-sixths {
width: 65%;
}
.one-fourth {
width: 22.5%;
}
.three-fourths {
width: 73.5%;
}
.one-fifth {
width: 17.4%;
}
.two-fifths {
width: 37.8%;
}
.three-fifths {
width: 58.2%;
}
.four-fifths {
width: 78.6%;
}
.one-sixth {
width: 14%;
}
.five-sixths {
width: 82%;
}
.first {
clear: both;
padding-left: 0;
}
// Shortcodes are based on WooThemes column shortcodes
// Replace WP autop formatting
function myprefix_remove_wpautop($content) {
$content = do_shortcode( shortcode_unautop( $content ) );
$content = preg_replace('#^<\/p>|^<br \/>|<p>$#', '', $content);
return $content;
}
// Column Shortcodes
function myprefix_one_half_first($atts, $content = null) {
return '<div class="one-half first">' . myprefix_remove_wpautop($content) . '</div>';
}
add_shortcode('one-half-first', 'myprefix_one_half_first');
function myprefix_one_half($atts, $content = null) {
return '<div class="one-half">' . myprefix_remove_wpautop($content) . '</div>';
}
add_shortcode('one-half', 'myprefix_one_half');
function myprefix_two_thirds_first($atts, $content = null) {
return '<div class="two-thirds first">' . myprefix_remove_wpautop($content) . '</div>';
}
add_shortcode('two-thirds-first', 'myprefix_two_thirds_first');
function myprefix_one_third_first($atts, $content = null) {
return '<div class="one-third first">' . myprefix_remove_wpautop($content) . '</div>';
}
add_shortcode('one-third-first', 'myprefix_one_third_first');
function myprefix_one_third($atts, $content = null) {
return '<div class="one-third">' . myprefix_remove_wpautop($content) . '</div>';
}
add_shortcode('one-third', 'myprefix_one_third');
/* etc. */
Example HTML:
<!-- HTML --> <p class="one-half first">Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad.</p> <p class="one-half">Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad.</p>
Shortcode Example:
[one-half-first]Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad.[/one-half-first]
[one-half]Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad.[/one-half]
Output:
Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad.
Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad.