Skip to Main Content

How to add an even / odd class on your WordPress articles

Divi: the easiest WordPress theme to use

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Do you want to add even and odd classes to articles on the theme 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 even class for WordPress comments. It allows users to visualize where a comment ends and where the other begins.

Likewise, you can use this technique for your articles. It seems 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.

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

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 the functions.php file of your WordPress theme.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [FREE]

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 item, then right-click to Inspect Item.

preview even odd WordPress article

Now that you have added even and odd classes to your articles. The next step is to offer them a unique style with CSS. You can add your custom CSS code to 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 come up with good results, but for that 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.

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Cool WordPress Themes that I found on
And there are more 50 000 themes and models to choose from!

Back To Top
20 shares
Share16
tweet1
Save3
WhatsApp