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;
?>