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 in the pagination, a different set of 4 posts get displayed. The 4 new posts of the second page in the pagination.
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 need to give the first 4 posts a different HTML structure, not just CSS styling and I need them to persist throughout the pagination.
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?
EDIT My first attempt at this problem was to do a second query and leave the main query intact but then I wouldn't be able to check the post_count
in the first query to see if it's bigger than 4 because I'm always showing only 4 posts_per_page
that's why I need them to be in the same query because I'm going to hide the first 4 posts on the category page that doesn't have more than 4 posts and only show them on the category page that has more than 4 posts.
EDIT 2 To make this simpler to understand, if it's getting too messy.
IF CATEGORY (QUERY) HAS MORE THAN 4 POSTS
DISPLAY 4 POSTS WITH CUSTOM HTML/CSS
THEN GET TEMPLATE PART AND DISPLAY THE REST OF THE POSTS WHILE EXCLUDING THE FIRST 4 POSTS BECAUSE DUPLICATES
ELSE
DISPLAY DEFAULT TEMPLATE PART
Here's a loop I use to show the first four posts, it has a wp_reset_postdata that might be required so your pagination loop is unaffected.
<?php $rp_query = new WP_Query( 'showposts=4' );
if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<? endif; ?>
Solution is already built-in and available as plugin. Please try Blog Designer PRO plugin - https://codecanyon.net/item/blog-designer-pro-for-wordpress/17069678?ref=miyanialkesh7
Best regards, Alkesh