After digging for sometime I’ve managed to solve it. The issue was I wasn’t passing paged
variable in the args. After passing it and tweaking the pagination logic it is working now.
<?php
$data = getData();
if(!empty($_REQUEST['posts'])){
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 15,
'category_name' => $_REQUEST['posts'],
'paged' => $paged
);
}else{
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 15,
'paged' => $paged
);
}
$loop = new WP_Query($args);
?>
<style>
/* Style for the disabled class */
.disabled {
background-color: #ccc; /* Gray background color */
color: #888 !important; /* Light gray text color */
cursor: not-allowed; /* Change cursor to 'not allowed' */
pointer-events: none; /* Make the button unclickable */
}
.blog_main .pagination .next, .blog_main .pagination .preview {
color: #000;
}
</style>
<div class="blog_main" data-aos="fade-up" data-aos-duration="500">
<div class="container">
<div class="filter-items">
<div class="items">
<div class="item <?php if(empty($_REQUEST['posts'])){echo 'active';} ?>">
<a href="<?php echo site_url('/blog')?>">Alla</a>
</div>
<div class="item <?php if($_REQUEST['posts'] == 'Blogg'){echo 'active';} ?>">
<a href="<?php echo site_url('/blog?posts=Blogg')?>">Blogg</a>
</div>
<div class="item <?php if($_REQUEST['posts'] == 'Nyheter'){echo 'active';} ?>">
<a href="<?php echo site_url('/blog?posts=Nyheter')?>">Nyheter</a>
</div>
</div>
</div>
<?php if ($loop->have_posts()) { ?>
<div class="blog-container">
<?php while ($loop->have_posts()): $loop->the_post(); ?>
<div class="single-blog">
<a class="feature-image" href="<?php the_permalink()?>">
<?php echo get_the_post_thumbnail($post->ID, 'full') ? get_the_post_thumbnail($post->ID, 'full') : '<img loading="lazy" width="582" height="280" src="'.site_url( 'wp-content/uploads/2023/04/anse_lazio_stranden.jpeg' ).'" >' ?>
</a>
<div class="tags">
<span class="entry-date"><?php echo get_the_date(); ?></span>
<?php
$categories = get_the_category();
if ( ! empty( $categories ) ) {
echo '<a href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_html( $categories[0]->name ) . '</a>';
}
?>
<!-- <a href="">Nyheter</a> -->
</div>
<div class="title-section">
<a href="<?php the_permalink()?>">
<h2><?php the_title()?></h2>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7" stroke="#1D2635" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M7 7H17V17" stroke="#1D2635" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
<?php endwhile;?>
</div>
<div class="pagination">
<?php
$total_pages = $loop->max_num_pages;
$current_page = max(1, get_query_var('paged'));
$base_url = site_url('/blog');
if (!empty($_REQUEST['posts'])) {
$base_url .= '?posts=" . $_REQUEST["posts'];
}
$prev_page = ($current_page > 1) ? $current_page - 1 : 1;
$next_page = ($current_page < $total_pages) ? $current_page + 1 : $total_pages;
$prev_url = ($prev_page == 1) ? $base_url : add_query_arg('paged', $prev_page, $base_url);
$next_url = ($next_page == $total_pages) ? $base_url : add_query_arg('paged', $next_page, $base_url);
// Add CSS classes and disable buttons
$prev_class = ($current_page == 1) ? 'disabled' : '';
$next_class = ($current_page == $total_pages) ? 'disabled' : '';
echo '<a href="' . esc_url($prev_url) . '" class="preview ' . $prev_class . '">Tidigare</a>';
echo paginate_links(
array(
'base' => str_replace(999999999, '%#%', esc_url(get_pagenum_link(999999999))),
'total' => $total_pages,
'current' => $current_page,
'format' => '?paged=%#%',
'show_all' => false,
'type' => 'list',
'end_size' => 2,
'mid_size' => 1,
'prev_next' => false,
'prev_text' => sprintf('<i></i> %1$s', __('Tidigare', 'text-domain')),
'next_text' => sprintf('%1$s <i></i>', __('Nästa', 'text-domain')),
'add_args' => false,
'add_fragment' => '',
)
);
echo '<a href="' . esc_url($next_url) . '" class="next ' . $next_class . '">Nästa</a>';
?>
</div>
<?php } ?>
</div>
</div>