Target First Post In Loop

  • Resolved Connor Crosby

    (@ccmovies)


    11 years, 6 months 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.

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • coopersita

    (@coopersita)

    11 years, 6 months 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.

    Thread Starter Connor Crosby

    (@ccmovies)

    11 years, 6 months 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! 🙂

    Michael

    (@alchymyth)

    11 years, 6 months ago

    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:

    $wp_query->current_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*/ }

    Thread Starter Connor Crosby

    (@ccmovies)

    11 years, 6 months ago

    @alchymyth ah that’s it! Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Target First Post In Loop’ is closed to new replies.