CSS3 Columns in WordPress after a Certain Word Count

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:

-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;

and then here is how you explode your the_content(); – get your word count – and then change the div class depending on the limit.

$content = ob_get_clean();
$numWords =  sizeof(explode(" ", $content));
$limit = 100;

 if( $numWords  > $limit ){

     echo '</pre>
<div class="article-col">';
 else {
echo '

the_content(); ?>

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:

Love and use this to make it work in IE:

Thanks @joncave and @petemall for brainstorming this a bit with me.

Authored By

Managing Partner / Creative Director

Sara loves design, typography, user experience, and art. She gives talks around the globe on web design, user experience, typography, and more. A seasoned designer, Sara has done work for clients such as Disney Publishing and Flickr. She loves open source, her pets, traveling, and WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *