Add a Class to Every Third Post in WordPress

by: John Surdakowski12/05/2013

Quick Summary Recently I was creating a website that had a grid type structure for some thumbnails. The approach I took called for some additional styling of every third post in WordPress. Basically, I needed to remove some margin from the third ‘li’ item. I know, there are a ton of ways to create a grid of […]


Recently I was creating a website that had a grid type structure for some thumbnails. The approach I took called for some additional styling of every third post in WordPress. Basically, I needed to remove some margin from the third ‘li’ item. I know, there are a ton of ways to create a grid of thumbs, flex box etc etc.. But the type of site I was creating called for this approach.

Basically, I needed to add a class to every third post in WordPress. Below is the code I used to target every third post. You can do this for any amount of posts. If you want to target the 4th, 5th, 6th, and so on.

The code below will inject a class of “last-thumb” into the third ‘li’ item in this loop. You can also use this on other html elements. In this case, I am using it on a ‘li’ item.

Add a Class to Every Third Post in WordPress

`

`

You can now use CSS to target the class ‘.last-thumb’ – This can come in handy if you want to style every third wordpress post differently as well. Maybe The first two posts have some kind of styling and the third has completely different styling.

Let me know in the comments if you have any questions on how to add a class to every third post in WordPress.

Thanks!

Let's discuss your ecommerce goals

Schedule a consultation call with one of our experts.

CONTACT US
Let's discuss your ecommerce goals