Ready to get started?Download WordPress


[resolved] Target First Post In Loop (5 posts)

  1. Connor Crosby
    Posted 2 years ago #

    I am making a theme and want to have the first post look a little different than the rest of the posts. What would be the best way to target the first loop in the post on the first page only?

    I know that there are tutorials online, but each tutorial I look at they suggest something different. Plus, a lot of them are a few years old, and I am not sure if much has changed since then.

    FYI, the theme will be used for my own site and will be running the latest version of WordPress, so no need for legacy support.


  2. coopersita
    Posted 2 years ago #

    How about a CSS only approach. I'd have to see your code for an exact selector, but it would be something like:

    #content article:first-child {
         /* Your CSS here */

    Then you can also do things like this:

    #content article:first-child .title {
         /* Your CSS here for the title */

    The only problem with this approach is that it will only work IE8+ (IE7 is buggy.)

    You could use a PHP approach, but that would require touching your loop. Probably adding a counter, to determine whether the post is the first, and add a special class, if it is. It's not a big thing to do, but I would try CSS first, test in IE7, and see if it holds.

  3. Connor Crosby
    Posted 2 years ago #

    I'd rather not use CSS. This will create some problems with other pages on my site. PHP is fine. I actually have not began coding yet. I figured I would need to use a counter, I just don't really know how to do it. Any help would be much appreciated! :)

  4. way to target the first loop in the post on the first page only?

    in a default loop, there is a lop counter variable which starts with zero for the first post:


    plus check for the first page of posts using is_paged() http://codex.wordpress.org/Function_Reference/is_paged

    in total:

    if( $wp_query->current_post == 0 && !is_paged() ) { /*first post*/ }

  5. Connor Crosby
    Posted 2 years ago #

    @alchymyth ah that's it! Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic