Zebra-striping in PHP

Technology Blog

Often when working in a PHP-based CMS you find that you want to zebra-stripe a list or table of items but the CMS’s template system makes that hard to achieve. Typically you might be styling the items individually without any way of knowing their relative positions in the containing list or table.

One solution is to use Javascript to do the zebra striping for you, but actually it’s quite easy to achieve the same result in PHP (with the addition of some simple CSS), thereby avoiding the overhead of loading additional Javascript.

I’ve encapsulated the solution into a simple, reusable function:

function likemind_zebra($id = 'global', 
                     $odd_class = 'odd', $even_class='even') {
  static $cursor = array();
  if(!isset($cursor[$id])) {
    $cursor[$id] = 1;
  }
  return $cursor[$id]++ %2? $odd_class: $even_class;
}

Here’s how you might use it. Suppose you are trying to style a list of comments, starting with the following simple default template for each comment:

<div class="comment">
 <?php print $comment_text ?>
</div>

You can call the function to add an additional class to the DIV, like this:

<div class="comment <?php print likemind_zebra('comments')?>">
 <?php print $comment_text ?>
</div>

The $id argument gives you the ability to have as many different zebra-striped lists or tables on a page as you like: all you need to do is ensure each one has a suitable unique identifier. To do the actual striping you can code something like this in your CSS:

.comment.odd {
background-color: #eee; /* light grey */
}
.comment.even {
background-color: #ddf; /* a light blue */
}

The function allows you to use your own classes for the odd and even cases so if you want to work with an existing stylesheet or support older browsers which don’t recognise CSS selectors for multiple classes, that’s easy, too:

<div class="comment <?php print likemind_zebra('comments', 'comment-odd','comment-even')?>">
 <?php print $comment_text ?>
</div>

CSS in this case:

.comment-odd {
background-color: #eee;
}
.comment-even {
background-color: #eef;
}

I wrote this function for a new WordPress theme I’m working on, but it’s equally applicable to Drupal (and other PHP CMS’s, I’m sure). To use the function in WordPress, simply copy and paste the code into the functions.php file for your theme, or in Drupal put it in the template.php file. Having done that you can call it from any template in the theme.

3 Responses to “Zebra-striping in PHP”

  1. Francis Penny

    How would I call this to stripe the list items in my sidebar widgets?

    It looks real simple, but I’m not skilled at PHP.

  2. Alfred Armstrong

    Francis, I assume you mean lists such as recent posts or the like? Unfortunately there’s no easy way to do that in WordPress. If I needed to do it for a client I’d probably use Javascript.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>