Paging with WP_Query not working (link leads to 404)

Question

I am starting to be desperate. I have tried all the tricks I could find but nothing works.

I show the list of all pages and posts of any category on blog post page (index.php) and it shows correctly. I added manual paging, it also shows correctly. But, the paging links does not work -> error 404.

<?php

$categories = get_categories( array(
    'orderby' => 'count',
    'order'   => 'DESC'
) );

$categories_name = "";

foreach( $categories as $category ) {
    if ($categories_name != "") {
        $categories_name = $categories_name . "," . $category->slug;
    } else {
        $categories_name = $category->slug;
    }
}

global $paged;
// the query
$wpb_all_query = new WP_Query(array(
    'post_type'=>array('post', 'page'),
    'post_status'=>'publish',
    'posts_per_page'=>3,
    'nopaging'=>false,
    'category_name' => $categories_name,
    'paged' => $paged,
    'offset'=> 1
));
?>
 
<?php if ( $wpb_all_query->have_posts() ) : ?>
 
<!-- the loop -->
<?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
    <?php get_template_part( 'parts/loop', 'archive' ); ?>
<?php endwhile; ?>
<!-- end of the loop -->

<div class="page-navigation flex">
    <?php
        echo paginate_links( array(
            'total'        => $wpb_all_query->max_num_pages,
            'current'      => max( 1, get_query_var( 'paged' ) ),
            'show_all'     => false,
            'type'         => 'plain',
            'end_size'     => 2,
            'mid_size'     => 1,
            'prev_next'    => true,
            'prev_text'    => '',
            'next_text'    => ''
        ) );
    ?>
</div>

<?php wp_reset_postdata(); ?>
 
<?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Any ideas what might help? The paging generates the right number of pages, but the links does not work.

<div class="page-navigation">
   <span aria-current="page" class="page-numbers current">1</span>
   <a class="page-numbers" href="/blog/page/2/">2</a>
   <a class="page-numbers" href="/blog/page/3/">3</a>
   <a class="next page-numbers" href="/blog/page/2/"></a>
</div>

Answer 1

Go to Website settings >> Permalinks >> choose PostName and save settings option Or you can check attached link for more details enter link description here