Support » Fixing WordPress » how to add a css class to latest post?

  • Resolved lynkei

    (@lynkei)


    Hi,
    I currently am wrapping each post in my loop with a div.

    What I would like to do is add a “new” class to that div if it is the newest post. How would I go about adding this?
    Thanks

Viewing 11 replies - 1 through 11 (of 11 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    How are the posts ordered? Newest first?
    If so, you can just use CSS to style the first post http://www.w3schools.com/cssref/sel_firstchild.asp

    Phil

    (@owendevelopment)

    When you wrap each post with a div, you specify a class like this:

    <div class="new">

    Then the CSS would be:

    .new {
    some-styling: here;
    }

    This has been answered so many times. See http://wordpress.org/search/style+first+post?forums=1 for a whole range of solutions.

    Thread Starter lynkei

    (@lynkei)

    Andrew, that would work except that I have a couple categories. So if I go into category 1 the newest item will have that class even if the newest item is in category 2, for instance.

    esmi, the above stated reason is why I haven’t been able to find a solution by searching for what you specified.

    Pretty much all of the solutions listed in that search results page will work.

    Thread Starter lynkei

    (@lynkei)

    To better explain.
    If I use the solutions in many of the search results I will get the following:

    Main Blog Page
    Latest Post (New)
    2nd Latest Post
    3rd Latest Post
    4th Latest Post
    5th Latest Post
    So on…

    Category 1 Page
    Latest Post (New)
    3rd Latest Post
    So on…

    Category 2 Page
    2nd Latest Post (New)
    4th Latest Post
    5th Latest Post

    Category 2 Page is where the issue arrives. I don’t want that 2nd latest post to be styled with the new class. but since that 2nd latest post is the first post in the Category 2 page it will be styled new. Maybe I’m missunderstanding something?
    Thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Your posts should have a class different to a category. View source your webpage and find this out.

    The only way to achieve this would be to run a quick secondary query to determine the id of the most recent post and compare this to the id of the first post on the page as part of a conditional to decide whether to add the new class or not.

    Thread Starter lynkei

    (@lynkei)

    esmi, it sounds like we could be on the right track.

    The only problem is my knowledge of php is quite limited. Do you care to explain how I would do that?

    I am using the following code btw.

    <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
    <div class="NEW CLASS GOES HERE">
      <?php if( get_post_meta($post->ID, "image_link", true) ): ?>
      <a href="<?php the_field('image_link'); ?>" target="_blank">
      <?php endif; ?>
      <?php if( get_post_meta($post->ID, "image", true) ): ?>
      <img src="<?php the_field('image'); ?>" border="0" style="float: left;"/>
      <?php endif; ?>
      <?php if( get_post_meta($post->ID, "image_link", true) ): ?>
      </a>
      <?php endif; ?>
      <div style="width: <?php the_field('text_box_width'); ?>px;">
        <h2>
          <?php the_title(); ?>
        </h2>
        <span class="date">
        <?php the_time( 'M j y' ); ?>
        | </span><span class="author">
        <?php the_author(); ?>
        </span>
        <?php the_content(); ?>
      </div>
    </div>
    <?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
    <?php endif; ?>

    Something like:

    <?php
    $args = array(
    	'posts_per_page' => 1
    );
    $latest = get_posts( $args );
    $latest_id = $latest[0]->ID;
    wp_reset_query();
    wp_reset_postdata();?>
    
    <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
    <?php if( $latest_id == $post->ID) :?>
    <div class="NEW CLASS GOES HERE">
    <?php endif;?>
    
    [ rest of Loop ]
    
    <?php // Last closing div
    if( $latest_id == $post->ID) :?>
    </div>
    <?php endif;?>

    should work.

    Thread Starter lynkei

    (@lynkei)

    thanks a lot, esmi. I appreciate your help.

    That does exactly what I wanted to do.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘how to add a css class to latest post?’ is closed to new replies.