Do you want to add odd and even classes to articles on the subject of your WordPress blog ? Adding a class will allow you to display a particular style for each article.

In this tutorial, we will show you how to display even or odd classes on WordPress.

to Display Odd Even WordPress-Retrieved Classes

Why add classes? pairs " or " odd Â» on the theme of your WordPress blog ?

Many WordPress themes use an old or same class for WordPress comments. It allows users to see where one comment ends and another begins.

Likewise, you can use this technique for your articles. It looks aesthetically pleasing to allow users to quickly scan pages that are large. This is particularly useful for the home page of newspaper or magazine sites.

That said, we will see how to add a class in the articles of your WordPress blog.

How to add an even / odd class to WordPress

WordPress generates default CSS classes and adds them to different articles on your website on the fly. These CSS classes help plugins and themes developers add their own styles to each different article.

WordPress also offers a function called " post_class Which is used by theme developers to add classes to articles.

Function " post_class Is also a filter, which means that you can manipulate that with. That's exactly what we're going to do here.

Just add this code to your functions.php file. WordPress theme.

Function oddeven_post_class ($ classes) {global $ current_class; $ Classes [] = $ current_class; $ Current_class = ($ current_class == 'odd')? 'Even': 'odd'; Return $ classes; } Add_filter ('post_class', 'oddeven_post_class'); Global $ current_class; $ Current_class = 'odd';

This function simply adds a class to even and odd items.

You will find odd and even classes in the source code of your site. Just take the mouse to the title of an article, then right click to Inspect the item.

preview even odd WordPress article

Now that you have added the odd and even classes to your articles. The next step is to give them a unique style with CSS. You can add your custom CSS code on your child theme, or by using a simple CSS plugin.

Here is an example of CSS code that you can use as a starting point:

.even {background: #f0f8ff; } .odd {background: #f4f4fb; }

Here is how the result can be:

alternate colors WordPress articles

You will need a little practice to get good results, but for this you will need to master CSS or just use a tool like CSS Hero.

It's as simple as that. I hope this tutorial will be of great help to you. Feel free to ask us questions or share this tutorial with your friends on your favorite social networks.