Paginacion numerica para WordPress sin Plugins

“Normalmente, a no ser que compres un Theme premium o encargues uno personalizado los Themes para WordPress no vienen con todas las funciones posibles, por ejemplo el sistema de paginación por defecto es el típico “pagina adelante” “pagina atrás”, hoy veremos como cambiar este tipo de paginación por una numérica y mucho mas vistosa sin necesidad de utilizar ningún plugin”

Lo normal en estos casos, o por lo menos lo que hace la mayoría de la gente es utilizar algún plugin, el mas utilizado es Wp-Pagenavy, y es en este plugin en el que se basa el código que utilizaremos nosotros, lógicamente como siempre tendremos que tirar mano de nuestro archivo FUNTIONS.PHP.

Lo primero es añadir el siguiente código en nuestro archivo, este código es el que genera la paginación numérica en nuestro Theme de WordPress.

function paginado($before = '', $after = '', $pages_to_show = 12, $always_show = false) {
global $request, $posts_per_page, $wpdb, $paged;
if(empty($prelabel)) {
$prelabel = '«';
}
if(empty($nxtlabel)) {
$nxtlabel = '»';
}
$half_pages_to_show = round($pages_to_show/2);
if (!is_single()) {
if(!is_category()) {
preg_match('#FROMs(.*)sORDER BY#siU', $request, $matches);
} else {
preg_match('#FROMs(.*)sGROUP BY#siU', $request, $matches);
}
$fromwhere = $matches[1];
$numposts = $wpdb->get_var("SELECT COUNT(DISTINCT ID) FROM $fromwhere");
$max_page = ceil($numposts /$posts_per_page);
if($max_page > 1 || $always_show) {
if ($paged >= ($pages_to_show-1)) {
echo '1';
}
previous_posts_link($prelabel);
for($i = $paged - $half_pages_to_show; $i = 1 && $i if($i == $paged) {
echo "$i";
} else {
echo ' '.$i.' ';
}
}
}
next_posts_link($nxtlabel, $max_page);
if (($paged+$half_pages_to_show) < ($max_page)) {
echo ''.$max_page.'';
}
}
}
}

Ahora ya tenemos el código necesario para generar la paginación numérica, pero esto no es suficiente, el siguiente paso es decirle a WordPress donde tiene que mostrar dicha paginación, para eso necesitamos abrir todos los archivos de nuestro Theme que utilicen paginación, dependiendo del Theme pueden ser unos u otros pero lo normal son INDEX.PHP, PAGE.PHP, ARCHIVE.PHP.

En estos archivos tenemos que buscar el siguiente código (depende el theme puede variar):

<?php next_posts_link('Previous entries') ?><?php previous_posts_link('Next entries') ?>

Y lo sustituimos por el siguiente código que es el encargado de realizar la llamada a la función que anteriormente hemos puesto en nuestro FUNTIONS.PHP.

<div class="pagination"><?php paginado(); ?></div>

Ahora nuestra paginación numérica ya es visible en nuestro Theme para WordPress, eso si, algo fea, el ultimo paso que nos queda por realizar es darle estilos desde nuestra pagina de estilos, para este ejemplo he cogido los estilos de una de mis paginas personales, aquí debe entrar la imaginación de cada uno para darle forma al paginado.

.pagination{
width:80%;
display:block;
padding: 10px 0 10px 0;
margin: 10px 0 0 0;
border:3px solid #164358;
border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-o-border-radius: 15px 15px 15px 15px;
}
.pagination a {
text-decoration:none;
color:#fff;
background-color:#164358;
border:3px solid #164358;
border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-o-border-radius: 15px 15px 15px 15px;
padding: 3px 5px 3px 5px;
margin: 0 0 0 10px;
}
.pagination a:hover {
text-decoration:none;
color:#fff;
background-color:#01628c;
border:3px solid #01628c;
box-shadow:5px -5px 5px #164358;
-webkit-box-shadow:5px -5px 5px #164358;
-moz-box-shadow:5px -5px 5px #164358;
-o-box-shadow:5px -5px 5px #164358;
}

Y con esto queridos amigos tenemos una paginación numérica completamente operativa y personalizada sin necesidad de utilizar ningún plugin.