Paginación en WP sin plugin

En este artículo mostraré un código para agregar una paginación en WP sin plugin.

Existen múltiples plugins para agregar una paginación a nuestro WordPress, sin embargo lo ideal siempre es agregar a mano el código para no depender de terceros ni cargar la página con código extra.

El código lo saqué de ESTA PÁGINA y lo edité según mis necesidades.

El código editado

//Paginador
function kriesi_pagination($pages = '', $range = 2){ 
   $showitems = ($range * 2)+1; 
   global $paged;
   if(empty($paged)) $paged = 1;
   if($pages == '') {
      global $wp_query;
      $pages = $wp_query->max_num_pages;
      if(!$pages){
         $pages = 1;
      }
   } 
   if(1 != $pages){
      echo "<div class='pagination'>";
      if($paged > 2 && $paged > $range+1 && $showitems < $pages){
         echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>"; 
      }else{
         echo "<a class='is-disabled'>&laquo;</a>"; 
      }
      if($paged > 1 && $showitems < $pages){
         echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a>";
      }
      for ($i=1; $i <= $pages; $i++) {
         if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) {
            echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
         }
      }
      if ($paged < $pages && $showitems < $pages){
         echo "<a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a>"; 
      }else{
         echo "<a class='is-disabled'>&rsaquo;</a>"; 
      }
      if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages){
         echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
      }
      echo "</div>\n";
   }
}

Básicamente edité el tema de la visibilidad de las flechas al cambiar de numeración.

El código debe ser insertado al final del archivo functions.php (o antes del cierre de PHP }?>)

A continuación agrego el estilo CSS también editado a mis necesidades.

El CSS editado

.pagination {
   clear:both;
   padding:20px 0;
   position:relative;
   font-size:11px;
   line-height:13px;
}

.pagination span, .pagination a {
   display:block;
   float:left;
   padding:6px 9px 5px 9px;
   text-decoration:none;
   width:auto;
   color:#fff;
   background: #555;
   border: 1px solid #3279BB;
}

.pagination a:hover{
   color:#fff;
   background: #3279BB;
}

.pagination .current{
   padding:6px 9px 5px 9px;
   background: #3279BB;
   color:#fff;
}
.pagination a:first-child {
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
}

.pagination a:last-child {
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
}
.pagination .is-disabled {
   pointer-events: none; 
   opacity: 0.7;
}

El estilo pueden insertarlo en el archivo style.css de su theme o si este posee, en Apariencia, CSS Adicional.

La vista del paginador es como la siguiente imagen.