Title: Display latest posts..
Last modified: September 25, 2021

---

# Display latest posts..

 *  [digstertron](https://wordpress.org/support/users/digstertron/)
 * (@digstertron)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/display-latest-posts/)
 * Hello,
 * Is it possible to create a custom blog page whereby the very latest post is top
   of the screen but the remaining posts appears in a row (inc small image thumbnail)
   below the latest post? Simple question but I’m new to WP! Cheers.
    -  This topic was modified 4 years, 8 months ago by [digstertron](https://wordpress.org/support/users/digstertron/).

Viewing 13 replies - 1 through 13 (of 13 total)

 *  [mattlitzinger](https://wordpress.org/support/users/mattlitzinger/)
 * (@mattlitzinger)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/display-latest-posts/#post-14906442)
 * Yes, this is possible. You’ll need to create a variable before looping through
   the posts: `$first_post = true;`. The conditional within the loop checks if it’s
   the first post and displays different HTML markup if that’s the case. Then after
   looping through for the first time, set the `$first_post` variable to `false`.
 * If this is for your main blog page, these changes would be made to the `index.
   php` template file within your theme.
 *     ```
       $query_args = array( 
         'post_type' => 'post' 
       );
   
       $posts_query = new WP_Query( $query_args );
   
       if ( $posts_query->have_posts() ) { 
   
         $first_post = true;
         while ( $posts_query->have_posts() ) { 
           $posts_query->the_post();
   
           if ( $first_post ) {
             // Put your HTML markup for the first post here
           } else {
             // Put the HTML markup for all other posts here
           }
   
           $first_post = false;
         } 
   
       }
   
       wp_reset_postdata();
       ```
   
 *  Thread Starter [digstertron](https://wordpress.org/support/users/digstertron/)
 * (@digstertron)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/display-latest-posts/#post-14912060)
 * Hi there,
 * This is great info, many thanks.
 * Would the code above reside in the actual index file or functions.php file?
    
   Also I already have the famous while loop, I guess your code would replace this?
    -  This reply was modified 4 years, 8 months ago by [digstertron](https://wordpress.org/support/users/digstertron/).
 *  [mattlitzinger](https://wordpress.org/support/users/mattlitzinger/)
 * (@mattlitzinger)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/display-latest-posts/#post-14912644)
 * This is template code, so it would be placed in your `index.php` or `archive.
   php` template file depending on your needs. If you wanted a `functions.php` solution,
   you could use something like the following which would just add a `.first` class
   name to the first item in the loop. You could then use that class to apply CSS
   to only that element.
 *     ```
       <?php
          add_filter( 'post_class', 'wps_first_post_class' );
          function wps_first_post_class( $classes ) {
             global $wp_query;
             if( 0 == $wp_query->current_post )
             $classes[] = 'first';
             return $classes;
          }
       ?>
       ```
   
 * Source: [https://wpdynamic.com/wordpress-developer/wordpress-code-snippets/how-to-add-a-class-to-the-first-post-in-the-wordpress-loop/](https://wpdynamic.com/wordpress-developer/wordpress-code-snippets/how-to-add-a-class-to-the-first-post-in-the-wordpress-loop/)
    -  This reply was modified 4 years, 8 months ago by [mattlitzinger](https://wordpress.org/support/users/mattlitzinger/).
 *  Thread Starter [digstertron](https://wordpress.org/support/users/digstertron/)
 * (@digstertron)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/display-latest-posts/#post-14913090)
 * Thanks Matt,
 * Sorry I misread your original post, of course the code resides in index.php file
   which powers my blog page. I shall give it a whirl and let you know how I get
   on. Cheers!
 *  Thread Starter [digstertron](https://wordpress.org/support/users/digstertron/)
 * (@digstertron)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/display-latest-posts/#post-14913295)
 * Unfortunately it doesn’t work. WP throws an eppy and complains about unexpected‘
   <‘ tags which are just div containers that I’ve set for the blog post info to
   occupy.
 *     ```
       <?php
   
       get_header('topbar'); ?>
   
       <div class="blog_container">
       <h2 class="blog-title">
       Latest News
       </h2>
       <p>
       News information and much more.
       </p>
       </div>
   
       <?php
       while(have_posts()) {
       the_post();?>
   
       <div class="container blog_info">
       	<div class="post-item">
       		<div class="post-image"><?php the_post_thumbnail(); ?></div>
       	</div>
   
       	<div class="blog_outter">			
       		<h2 class="blog_heading">
       			<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
       		</h2>
   
       			<div class="blog_author">
       				<div class="author_image"><?php echo get_avatar( get_the_author_meta('ID'), 60); ?></div>
   
       				<div class="author-profile"><?php the_author_posts_link();?></div>
       				<div class="category__list__card">
       						<p class="cat">
       							<?php echo get_the_category_list(', '); ?>
       						</p>
       				</div>
   
       				<div class="post__stamp">
       					<?php the_time('F j, Y'); ?>
       				</div>		
       			</div>
       	</div>	
       </div>
   
       <?php }
       ?>
       <?php get_footer();
   
       ?>
       ```
   
    -  This reply was modified 4 years, 8 months ago by [digstertron](https://wordpress.org/support/users/digstertron/).
    -  This reply was modified 4 years, 8 months ago by [digstertron](https://wordpress.org/support/users/digstertron/).
 *  Thread Starter [digstertron](https://wordpress.org/support/users/digstertron/)
 * (@digstertron)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/display-latest-posts/#post-14913470)
 * Ok it’s working sort of but I am seeing raw code on the front end, any ideas?
 *  Thread Starter [digstertron](https://wordpress.org/support/users/digstertron/)
 * (@digstertron)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/display-latest-posts/#post-14913565)
 * I should probably start a new thread but the code you provided does not work 
   when I apply any line of HTML. Incredibly frustrating, there is no reason why
   it shouldn’t work and now I get parsing errors every time I add HTML after the
   if and else statements.
 *  [mattlitzinger](https://wordpress.org/support/users/mattlitzinger/)
 * (@mattlitzinger)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/display-latest-posts/#post-14913664)
 * Sorry to hear that. Is the code you posted above the most up-to-date version 
   you’re working with? I’m not seeing anything wrong there. If the template already
   includes the default `while(have_posts())` that’s fine to use instead of creating
   a custom `WP_Query`. If you can post the latest code you’re working with I could
   take a look.
 *  Thread Starter [digstertron](https://wordpress.org/support/users/digstertron/)
 * (@digstertron)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/display-latest-posts/#post-14913692)
 * Thank you.
 * Here is the latest code, notice the if and else statements are blank I tried 
   to reverse engineer the code, whenever I add html it breaks but here is my code:
 *     ```
       <?php
   
       get_header('topbar'); ?>
   
       <div class="blog_container">
       		<h2 class="blog-title">
       		Latest News
       		</h2>
       	<p>
       		News information and much more.
       	</p>
       </div>
   
       $posts_query = new WP_Query( $query_args );
   
       if ( $posts_query->have_posts()) { 
   
         $first_post = true;
         while ( $posts_query->have_posts() ) { 
           $posts_query->the_post();
   
           if ( $first_post ) {
   
           } else {
   
           }
   
           $first_post = false;
         } 
   
       }
   
       wp_reset_postdata();
   
   
   
   
       <?php 
       ?>
       <?php get_footer();
   
       ?>
       ```
   
 *  [mattlitzinger](https://wordpress.org/support/users/mattlitzinger/)
 * (@mattlitzinger)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/display-latest-posts/#post-14913878)
 * You will need to either print your HTML code using PHP echo or close your PHP
   tags before starting to write HTML. For example:
 *     ```
       if ( $first_post ) { ?>
           <div class="post featured-post">First Post</div>
       <?php } else { ?>
           <div class="post">Post</div>
       <?php }
       ```
   
 * That can be easily overlooked and would lead to the issue you’re describing.
 *  Thread Starter [digstertron](https://wordpress.org/support/users/digstertron/)
 * (@digstertron)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/display-latest-posts/#post-14913933)
 * Great, that works, sorry about that, screen blindness kicked in! Couldn’t see
   for looking.
 * Any idea what the hooks are for displaying latest post and subsequent posts?
 *  Thread Starter [digstertron](https://wordpress.org/support/users/digstertron/)
 * (@digstertron)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/display-latest-posts/#post-14913950)
 * It’s not displaying any of the content bar the word ‘post’.
 *     ```
       <?php
   
       get_header('topbar'); ?>
   
       <div class="blog_container">
       		<h2 class="blog-title">
       		Latest News
       		</h2>
       	<p>
       		News information and much more.
       	</p>
       </div>
   
       <?php
   
       $posts_query = new WP_Query( $query_args );
   
       if ( $first_post ) { ?>   			
       					<h2 class="blog_heading">
       						<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                           </h2>
       <?php } else { ?>
           <div class="post">Post</div>
       <?php {
   
           $first_post = false;
         } 
   
       }
   
       wp_reset_postdata();
   
       ?>	
   
   
       <?php 
       ?>
       <?php get_footer();
   
       ?>
       ```
   
    -  This reply was modified 4 years, 8 months ago by [digstertron](https://wordpress.org/support/users/digstertron/).
 *  Thread Starter [digstertron](https://wordpress.org/support/users/digstertron/)
 * (@digstertron)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/display-latest-posts/#post-14913975)
 * Thanks for the help but it does not work. Passed code over to a dev I know he
   couldn’t get it to display either. Seems the only way to do it is to use a plugin.

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Display latest posts..’ is closed to new replies.

## Tags

 * [posts](https://wordpress.org/support/topic-tag/posts/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 13 replies
 * 2 participants
 * Last reply from: [digstertron](https://wordpress.org/support/users/digstertron/)
 * Last activity: [4 years, 8 months ago](https://wordpress.org/support/topic/display-latest-posts/#post-14913975)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics