Add class to first and last post

Lately I’ve had a lot of down time since business has slowed down for me so far so I decided to remodel my website. The two things I wanted to focus on was mobile design and add in new features that weren’t there before. I added in some custom fields and boxes WITHOUT a plugin. That was interesting but that’s in my next couple posts. I found out that there’s a LOT of stuff I didn’t know about metaboxes and it made life difficult for a while but it was ultimately rewarding in the end. I don’t use a lot of plugins when I’m making something simply because it takes less time to code it out than configure some of the popular plugins. It’s just not my style. Well, I decided I wanted to do a new layout for the recent posts on the front page. Previously they were done purely in CSS using handy pseudo-selectors. Well, those kept on breaking along with the recent portfolio images. That was annoying me to death so I had to change it. I wanted to do it programmatically. I’ve known how to use Bootstrap since what seems like forever ago, so that’s what I decided to use for my front-end framework. Naturally, I also wanted to do everything from scratch and I did. It led me to making my recent posts into a grid and doing it kinda cool if you ask me. It’s a nice looking brick layout.

My way most likely isn’t going to be the best way BUT it works and that’s what matters. So let’s get started on how to add a class to the first and last post.

As a demonstration I’m using a custom query. In WordPress it’s WP_Query and here’s the syntax for it:


There’s the first bit of the query that pulls in the the recent blog posts and sets the max amount of posts per page. On my front page I have 4 posts and that’s all that will show because of the arguments for the Wp_Query. Now we’re going to add the WordPress Loop so it will bring out posts so to speak.

That takes the standard loop and uses the $latest_blog_posts variable and includes it into the mix. Now we can can actually set up how we want our posts and such. The first thing we’re going to do is add a class to the first post since it’s the first post and all. In order to do so we’re going to add a variable BEFORE the loop that I would consider the “control” in the experiment. I don’t know why but I’m going to anyways. Secondly, we’re going to add a conditional statement INSIDE the loop. That part is important because we’re adding our regular markup inside the loop so it makes sense. Here’s the code:

The first thing added is the $post_number variable which is set to 0. It’s a static variable to start the madness. Then we have the loop I went over prior to this. Inside the loop we mess with the $post_number variable and tell it to start counting by 1. The first part of the conditional:

This says, if the $post_number is equal to 1 then do whatever. In order to add the class, I added it properly using the post_class() function to the markup. You can add whatever class(es) you want to. Since I was using Bootstrap 3, I added “col-md-12.” It needed to be the full width of the container. So it would look something like this with just the markup and the conditional:

The second part is to check if it’s the last post. If you haven’t noticed I did the conditional statement in a pseudo-sequential order. First is first but the middle is the last and the last is the middle. It makes sense in coding because you’re initially doing two IF statements and the rest is the else. Anyways, here’s the second part to determine the last post:

The elseif asks if $post_number equals the number of posts of the WP_Query. You’ll also notice my markup is exactly like the first one. That was essential to the brick layout. You can add whatever classes you want to it and style them accordingly in CSS but all I wanted was the layout so that’s what you get. Notice the use of the post_class() function. You don’t necessarily have to use but it is there to add in your usual WP classes to the post which is good to have. The last part of the loop is basically the middle posts. You’ve got the first and last but you really need the middle too. Here’s the rest of the loop:

This is obviously the else statement. This is your normal post look. My post_class() is set to ‘col-md-5’ purely for aesthetics. The ‘col-md-6’ didn’t work with my margins too well so I changed it to 5 and it worked out just fine.

Well, there you have it. How to add a class to the first AND last post. You can also add a class to the first post as well, all you have to do is remove the “elseif” part and it works just fine. Remember to close your tags too if you haven’t. That will really mess things up if you’re not paying attention. And lastly, here’s the full code if you need it.


If there’s a better way to do this, go ahead and let me know in the comments. I’m always happy to learn something new.