Support » Fixing WordPress » how to add a css class to latest post?
how to add a css class to latest post?
-
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
-
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.aspWhen 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.
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.
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 PostCategory 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?
ThanksYour 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.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.
thanks a lot, esmi. I appreciate your help.
That does exactly what I wanted to do.
- The topic ‘how to add a css class to latest post?’ is closed to new replies.