How to Use the WordPress Loop to Style Your First Post Differently

Visit Tutorial Page ( Report)

I often create custom loops, sometimes by editing the standard loop and sometimes using WP_Query to create completely new loops.

But in some cases I want to take things further. I want to display the first post in my loop differently from subsequent posts. This could be by adding custom styling or it could be because I want to display different content.

For example I might want to display the post content for the first post but just the excerpt for subsequent posts. Or I might want to use a different sized featured image, or apply difference CSS classes to the first post.

Doing this can highlight your most recent post, drawing attention to it and encouraging visitors to read it or click on it. It can also enhance the layout of your site, breaking things up and creating a more varied design.

In this post, I’m going to show you how to use the WP_Query class to do it. I’ll show you how to set up a custom query for all your posts using WP_Query and then I’ll show you how to create a second query which just applies to the first post.

In the worked example I’ll show you how to do this on a custom page template, using WP_Query to run two separate queries. And then I’ll show you how to apply this technique to the standard loop, editing a standard archive template and using pre_get_posts to alter the standard loop.

No sub-Tutorials exists in this Tutorial.
Write Your Review