I've been using CSS3 Columns for various purposes lately. I've been really loving it. Especially how easy it is to manipulate from 3 to 2 or 1 count with media queries. More on that stuff later. The purpose of this post is mainly to share with you (and document) how to use this in WordPress and only when your content is over a certain length. (what is the point of having three columns if there only one to three lines each?!)
first of all: make sure you have your CSS3 columns setup for the first div class:
[code]
.article-col{
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule: none;
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-webkit-column-rule: none;
column-count: 3;
column-gap: 40px;
column-rule: none;
}
[/code]
and then here is how you explode your the_content(); - get your word count - and then change the div class depending on the limit.
[code]
ob_start();
the_content();
$content = ob_get_clean();
$numWords = sizeof(explode(" ", $content));
$limit = 100;
if( $numWords > $limit ){
echo '<div class="article-col">';
}
else {
echo '<div>';
}
the_content(); ?>
[/code]
your $limit can be set to whatever your design is comfortable with. also, you can class that second div with something else (you can do something creative like change the div from two col to three col depending on the word count.)
More on css3 columns:
http://www.alistapart.com/articles/css3multicolumn/
Love and use this to make it work in IE:
http://www.csscripting.com/css-multi-column/
Thanks @joncave and @petemall for brainstorming this a bit with me.
sara
I just have to say, this is incredible if you work in WordPress and use coda:
