Skip to Main Content

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

Divi: the easiest WordPress theme to use

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]

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 similar 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.

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]

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

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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

Easily create your Online Store

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

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.

This article features 0 comments

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.

Back To Top