Problem with pagination link (error 404)

Question

I have a problem with wordpress patination.

The limit of posts (custom type post "properties") per page is 9.

When I pusblish 11 properties the pagination links works properly. 9 properties in the first page, and 2 in the second page.

But, if I publish 10 properties, the link to second page doest work. It return 404 error.

The loop code:

<?php get_header(); ?>
<?php get_template_part( 'form_buscador' ); ?>

<?php
$actualPagina  = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$arrParamsProp = array(
    'post_type'      => 'propiedades',
    'post_status'    => 'publish',
    'posts_per_page' => 9,
    'paged'          => $actualPagina
);
$propiedades   = new WP_Query( $arrParamsProp );
?>
<main id="content" class="container">
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-3">
        <?php
        if ( $propiedades->have_posts() ) {
            while ( $propiedades->have_posts() ) {
                $propiedades->the_post();
                get_template_part( 'propiedad_card' );
            }
        }
        ?>
    </div>
</main>

<?php get_template_part( 'paginacion_prop' ); ?>
<?php wp_reset_postdata(); ?>
<?php get_footer(); ?>

The pagination code (paginacion_prop):

<?php
global $propiedades;
$context = "";
//preg_match( '/.*\/archive-propiedades\/.*/i', get_pagenum_link( 1 ) )
if ( ! preg_match( '/.*archive-propiedades.php.*/i', $GLOBALS['template'] ) ) {
    $context = "propiedades/";
}

$actualPagina  = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$argsPaginate  = array(
    'base'      => get_pagenum_link( 1 ) . $context . '%_%',
    'type'      => 'array',
    'total'     => $propiedades->max_num_pages,
    'format'    => 'page/%#%',
    'current'   => $actualPagina,
    'prev_text' => '&laquo;',
    'next_text' => '&raquo;'
);
$arrPaginacion = paginate_links( $argsPaginate );
?>

<ul id="paginacion_pie" class="pagination justify-content-center my-3">
    <?php
    foreach ( $arrPaginacion as $item_pag ) {
        $a_modified = preg_replace( '/(.*class\s*=\s*.*)(page-numbers.*)/i', '${1}page-link ${2}', $item_pag );
        if ( preg_match( '/.*class\s*=\s*.*(\'|\").*current.*(\'|\").*/i', $item_pag ) ) {
            ?><li class="page-item disabled"><?php echo $a_modified; ?></li><?php
        } else {
            ?><li class="page-item"><?php echo $a_modified; ?></li><?php
        }
    }
    ?>
</ul>

Answer 1

I have something here that I used on the website of a real estate agency

You're already using Bootstrap. But, take a look https://getbootstrap.com/docs/4.0/components/pagination/

In your code, a line before var $actualPagina = get_query_var…
Add:

global $actualPagina;

So here's what you do...

Replace

<?php get_template_part ( 'paginacion_prop' );?> 

by

<?php thomas_pagination($propiedades->max_num_pages);?>

In your functions.php enter the following code:

<?php
if( !function_exists('thomas_pagination') ): 
    function thomas_pagination($pages = '', $range = 2) {
        $showitems = ($range * 2)+1;

        global $actualPagina;
        if(empty($actualPagina)) $actualPagina = 1;

        if($pages == '') {
            global $wp_query;
            $pages = $wp_query->max_num_pages;
            if(!$pages)
            {
                $pages = 1;
            }
        }

        if(1 != $pages) {
            echo '<ul class="pagination">';
            if($actualPagina > 2 && $actualPagina > $range+1 && $showitems < $pages) echo '<li><a href="' . esc_url(get_pagenum_link(1)) . '"><span class="fa fa-angle-double-left"></span></a></li>';
            if($actualPagina > 1 && $showitems < $pages) echo '<li><a href="' . esc_url(get_pagenum_link($actualPagina - 1)) . '"><span class="fa fa-angle-left"></span></a></li>';

            for ($i = 1; $i <= $pages; $i++) {
                if (1 != $pages &&( !($i >= $actualPagina + $range + 1 || $i <= $actualPagina - $range - 1) || $pages <= $showitems )) {
                    echo ($actualPagina == $i)? '<li class="active"><a href="#">' . esc_html($i) . '</a></li>' : '<li><a href="' . esc_url(get_pagenum_link($i)) . '">' . esc_html($i) . '</a></li>';
                }
            }

            if ($actualPagina < $pages && $showitems < $pages) echo '<li><a href="' . esc_url(get_pagenum_link($actualPagina + 1)) . '" class="next"><span class="fa fa-angle-right"></span></a></li>';
            if ($actualPagina < $pages - 1 &&  $actualPagina + $range - 1 < $pages && $showitems < $pages) echo '<li><a href="' . esc_url(get_pagenum_link($pages)) . '"><span class="fa fa-angle-double-right"></span></a></li>';
            echo '</ul>';
        }
    }
endif;
?>