WordPress: How to Alternate Row Colors
Alternate row colors -- often called "zebra striping" -- in tables and lists make websites more readable. When tables or lists do not alternate background colors, it becomes easier for a person's eyes to skip around and misread important information. In WordPress, the easiest method for alternating row colors is to use jQuery. You must first make your theme compatible with jQuery and then add jQuery code that inserts a new class in every other row of a table or list. Use CSS code to tell the browser which background color to use for that class.
Other People Are Reading
Instructions
-
-
1
Open the "header.php" file of your WordPress theme and look for "<?php wp_head(); ?>" between your <head> and </head> tags. Add this code above the wp_head() function:
<?php wp_enqueue_script("jquery"); ?>
If your theme includes a <script> tag referencing the jQuery library, remove the entire <script> tag. WordPress comes with jQuery already installed.
-
2
Find the <script> and </script> tags between your <head> tags. This set of <script> tags does not include the "src" attribute because it contains code embedded into the "header.php" file. If your theme does not have these tags, add them. Add this code between the <script> tags like this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".alternate:even tr").addClass("alt");
});
</script>
Every other <tr> tag in a table with a class name of "alternate" gets the "alt" class name. You can switch "even" to "odd" if desired.
-
-
3
Open the "style.css" file of your WordPress theme and add this CSS code:
.alternate .alt {
background: color;
}
Change "color" to the name of a color or its hexadecimal value. This CSS code sets a background color to every tag with a class name of "alt" if that tag is nested within another tag given a class name of "alternate."
-
1
Tips & Warnings
The proper method for including jQuery in WordPress presents a new issue to inexperienced theme developers, because you cannot use the usual dollar sign prefix in your jQuery code. Always replace the dollar sign with "jQuery", or your jQuery code will not work.
Always back up your theme files before editing them. Although jQuery bugs will not break your WordPress site, you can easily break PHP code and cause a white screen on your website.
References
Resources
- Photo Credit Jupiterimages/Photos.com/Getty Images
More Like This
Comments
-
if you switch the code to this: jQuery(document).ready(function() { jQuery("tr:even").addClass("alt"); }); then it works (and you don't have to add a CSS class to every table).
-
If I use "even" all the TR tags get the class "alt". If I use "odd", none of my TR tags get a class attribute...
