Different html/css for first 4 posts in the same query in WordPress

I am trying to change the HTML structure and CSS styles of the first 4 posts in the main WP_Query in archive.php

I am doing this simple thing where I checked the global $wp_query variable.

if ( have_posts() ) :

  if( 4 > $wp_query->current_post ) :
    the_title();
  endif;

  while ( have_posts() ) : the_post();

    get_template_part( 'content', get_post_format() );

  endwhile;

  else :

  get_template_part( 'no-results', 'archive' );

endif;

This works fine, the first 4 posts in the query get displayed in whatever HTML/CSS I apply to them before the get_template_part() gets called in.

The problem is when I go to the next page, a different set of 4 posts get displayed. The 4 new posts of the second page.

I don’t want that. I want the same 4 posts that appear on the first page to keep appearing as I go to the next or previous pages.

I tried changing the main query with pre_get_posts and using offset but that gave me a set of problems in the theme and the admin panel that I decided against it.

How may I achieve that?

Read more here: Different html/css for first 4 posts in the same query in WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *