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();
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 3 years, 9 months ago by
digstertron.
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/
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!
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 3 years, 9 months ago by digstertron.
-
This reply was modified 3 years, 9 months ago by digstertron.
Ok it’s working sort of but I am seeing raw code on the front end, any ideas?
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.
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.
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();
?>
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.
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?
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 3 years, 9 months ago by digstertron.
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.
