Paginacion en Wordpress fácil - Sin plugin

La paginación en diseño y programación web es cuando el final de una página tenemos botones o links para acceder a la página siguiente o anterior y ademas la numeración de páginas para poder llegar a una determinada, rápidamente, sin pasar por todas las demás a continuación un ejemplo de paginación.

Ejemplo de paginación, ¿se entiende no?

En Wordpress, por defecto esto no está habilitado y hay dos formas de hacerlo, con uso de plugins y sin plugin, ésta última es la que vamos a ver ahora.


Este fragmento de código crea la navegación por paginación clásica como el que se ve en WP-PageNavi (un plugin que sirve para el mismo fin), que dan una mejor visión de conjunto para el usuario. Es fácil de implementar y permite un control total sobre la salida.

1. <?php
2. function pagination($prev = '«', $next = '»') {
3.     global $wp_query, $wp_rewrite;
4.     $wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
5.     $pagination = array(
6.         'base' => @add_query_arg('paged','%#%'),
7.         'format' => '',
8.         'total' => $wp_query->max_num_pages,
9.         'current' => $current,
10.         'prev_text' => __($prev),
11.         'next_text' => __($next),
12.         'type' => 'plain'
13. );
14.     if( $wp_rewrite->using_permalinks() )
15.         $pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );
16.     if( !empty($wp_query->query_vars['s']) )
17.         $pagination['add_args'] = array( 's' => get_query_var( 's' ) );
18.     echo paginate_links( $pagination );
19. };
20. ?>

Para ponerlo en práctica, sólo tenés que añadir este código (el de arriba) en functions.php:

Ahora podés agregar la paginación usando la funcion pagination. Añadirla en algún lugar fuera del bucle, pero dentro del if (have_post ()).

1. <?php if ( have_posts() ) : ?>
2.     <?php while ( have_posts() ) : the_post(); ?>
3.         // post goes here
4.     <?php endwhile; ?>
5.     <div class="pagination"><?php pagination('»', '«'); ?></div>
6. <?php endif; ?>

WordPress también te da algunas clases CSS que podés utilizar para personalizar el aspecto de la nueva navegación.

1. .page-numbers { font-size: 15px; }
2. .page-numbers.current { color: #222; }
3. .page-numbers .dots { letter-spacing: 1px }
4. a.page-numbers  { font-size: 14px; color: #3888ff; }