¿Quieres añadir paginación numérica en tu tema de WordPress?
Por defecto, los temas de WordPress añaden un enlace Siguiente / Anterior en la parte inferior de las páginas de archivo. El problema es que no son muy fáciles de usar. Por eso, muchos blogs populares utilizan la paginación numérica para facilitar a los visitantes la navegación por sus páginas de archivo.
En este artículo, le mostraremos cómo añadir paginación numérica en su tema de WordPress.
¿Por qué añadir paginación numérica en su tema de WordPress?
La mayoría de los temas tienen una página de archivo que muestra una lista de entradas. A medida que publiques más entradas en tu blog de WordPress, tu página de archivo abarcará varias páginas.
Los enlaces de paginación ayudan a los visitantes a moverse entre las páginas del archivo y suelen aparecer en la parte inferior de su sitio web WordPress.
Algunos temas de WordPress enlazan las entradas más antiguas con las más recientes. Sin embargo, esto solo permite al visitante avanzar y retroceder una página.
Tampoco muestra la ubicación actual del visitante en el archivo. Esto puede dificultar la navegación de los visitantes por el archivo de su blog.
Ahí es donde entra en juego la paginación numérica.
En lugar de mostrar enlaces “Más antiguo” y “Más reciente”, la paginación numérica muestra una serie de números que permiten a los visitantes saltar a una página concreta del archivo.
La paginación numérica también puede utilizar resaltes o colores diferentes para mostrar el número de página actual, de modo que el visitante siempre sepa exactamente en qué parte del archivo se encuentra.
En WPBeginner, utilizamos la paginación numérica y resaltamos en naranja el número de la página actual. También enlazamos directamente las 4 páginas que rodean a la página actual del visitante.
Incluso tenemos un enlace a la última página de nuestro archivo, para que los visitantes puedan ver rápida y fácilmente nuestras entradas más antiguas, como puede verse en la siguiente imagen.
En nuestra experiencia, este tipo de paginación numérica hace que su sitio sea más fácil de navegar en comparación con los enlaces por defecto ‘Entradas más antiguas’ y ‘Entradas más recientes’.
Si su tema de WordPress tiene paginación ‘Older’ y ‘Newer’, siempre recomendamos sustituirla por paginación numérica.
En esta guía, vamos a cubrir dos maneras diferentes de añadir paginación numérica en su tema de WordPress. Si prefiere saltar directamente a un método en particular, entonces usted puede utilizar los siguientes enlaces.
- Método 1. Cómo añadir paginación numérica en WordPress usando WP-PageNavi
- Método 2. Cómo añadir manualmente paginación numérica en su tema de WordPress
Método 1. Cómo añadir paginación numérica en WordPress usando WP-PageNavi
La forma más sencilla de añadir paginación numérica en WordPress es utilizando el plugin WP-PageNavi.
Para usar este plugin, aún necesitarás hacer algunos cambios en el código de tu tema, pero es mucho más fácil que el método del código completo porque WP-PageNavi te da control completo sobre la paginación de tu sitio.
Lo primero que tienes que hacer es instalar y activar el plugin WP-PageNavi. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Después de activar el plugin vaya a Ajustes ” PageNavi para establecer los ajustes del plugin.
Aquí puede sustituir cualquier texto de paginación por defecto por su propio texto. Por ejemplo, puede cambiar el texto que su sitio web utiliza para enlazar “Primera página” y “Última página”.
También puede personalizar los enlaces de paginación numérica.
En la sección “Número de páginas a mostrar”, puede elegir cuántas páginas mostrará el plugin en la sección de paginación de su sitio web.
Esto se establece en 5 por defecto, lo que significa WP-PageNavi mostrará enlaces directos a 5 páginas.
Como puede ver en la siguiente captura de pantalla, si está en la página 4, verá enlaces a las páginas 2, 3, 4, 5 y 6.
Puede que desee mostrar más o menos páginas. Para hacer este cambio, simplemente escriba el nuevo número en el campo ‘Número de páginas a mostrar’.
Por defecto, el plugin mostrará varios números más grandes. Esto permite a los visitantes avanzar por varias páginas, con un solo clic.
Por defecto, el plugin muestra tres números más grandes que aumentan de 10 en 10 cada vez. Por ejemplo, 10, 20 y 30.
¿Desea utilizar un intervalo diferente, como 5 o 20? Escriba el nuevo intervalo en el campo “Mostrar números de página más grandes en múltiplos de”.
Cada sitio de WordPress es diferente, por lo que es una buena idea probar diferentes ajustes para ver qué ajustes de paginación funcionan mejor para usted.
Si ha realizado algún cambio en los ajustes de WP-PageNavi, no olvide desplazarse hasta el final de la página y hacer clic en el botón Guardar cambios.
A continuación, debes añadir una etiqueta de plantilla en tu tema de WordPress. Para ello, te recomendamos que crees un tema hijo y edites su código.
Al crear un tema hijo, puedes seguir actualizando tu tema de WordPress de forma segura sin perder tu paginación numérica personalizada. Para obtener más información, consulta nuestra guía paso a paso sobre cómo crear un tema hijo de WordPress.
No importa si eliges editar un tema padre o hijo, necesitarás un cliente FTP. Si es la primera vez que utilizas FTP, puedes consultar nuestra guía completa sobre cómo conectarte a tu sitio utilizando FTP.
Cuando esté conectado a su cuenta de alojamiento de WordPress a través de FTP, estará listo para editar el código de su tema de WordPress.
Estos pasos variarán en función del tema de WordPress. Sin embargo, normalmente tendrás que editar el código de tu archivo index.php o archive.php, además de cualquier otro archivo de plantilla de tu tema de WordPress.
Basta con abrir estos archivos y buscar las etiquetas previous_posts_link y next_posts_link.
Si encuentra estas etiquetas, sustitúyalas por el siguiente fragmento de código:
<?php wp_pagenavi(); ?>
Algunos temas pueden no tener las etiquetas previous_posts_link o next_posts_link.
Si no encuentras estas etiquetas en tu tema, busca en su lugar the_posts_navigation. Por ejemplo, encontrarás lo siguiente en el archivo archive.php del tema Twenty Twenty-One:
<?php /*twenty_twenty_one_the_posts_navigation();*/
A continuación, puede sustituir esta línea por el siguiente fragmento de código:
<?php wp_pagenavi(); ?>
Tras realizar estos cambios, guarde o cierre los archivos de temas de WordPress que tenga abiertos.
Ahora, si usted visita su página de archivo de WordPress debería ver su nueva paginación numérica en vivo en su sitio web.
En este punto es posible que desee cambiar el color y el estilo de la paginación numérica, por lo que mejor se complementa con su tema o la imagen de marca del sitio web.
Puede hacerlo editando el código del plugin.
Sin embargo, recomendamos pegar el código de WP-PageNavi en el archivo style.css de su tema, y luego hacer sus cambios dentro del archivo del tema. Esto significa que no perderás tus personalizaciones cuando actualices el plugin WP-PageNavi.
Para copiar el código de tu plugin, dirígete a Ajustes ” PageNavi. A continuación, busque la sección “Usar pagenavi-css.css” y haga clic en el botón de opción “No” situado a su lado.
No olvides hacer clic en el botón “Guardar cambios” para guardar las modificaciones.
A continuación, vaya a Plugins ” Editor de archivos de plugins.
A continuación, abra el menú desplegable “Seleccionar plugin para editar” y elija “WP-Page Navi”. Después de eso, usted está listo para hacer clic en ‘Seleccionar’.
En el menú de la derecha, haga clic en el archivo pagenavi-css.css.
A continuación, siga adelante y copie todo el código en este archivo.
A continuación, vaya a Apariencia ” Editor de archivos de temas.
En el menú de la derecha, haga clic en el archivo style.css de su tema.
Ahora puede pegar el código pagenavi-css.css en el archivo style.css del tema y empezar a realizar los cambios.
Veamos un ejemplo. Aquí tienes una versión modificada del código de paginación numérica que puedes añadir al archivo style.css de tu tema:
wp-pagenavi {
clear: both;
}
.wp-pagenavi a, .wp-pagenavi span {
color: #FFF;
text-decoration: none;
background-color:#6FB7E9;
border: 1px solid #B2D1E5;
padding: 5px 5px;
margin: 2px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #E9F2F9;
background-color:#6FB7E9;
}
.wp-pagenavi span.current {
font-weight: bold;
background-color:#3C8DC5;
}
En la siguiente imagen, puede ver cómo se verá esta paginación numérica en su sitio.
Vale la pena probar diferentes estilos para ver cuál queda mejor en su sitio web de WordPress.
Cuando esté satisfecho con el aspecto de su paginación numérica, haga clic en el botón Actualizar archivo para guardar los cambios.
Método 2. Cómo añadir manualmente la paginación numérica en su tema de WordPress
Otra opción es añadir manualmente la paginación numérica en su tema de WordPress utilizando código.
Muchos temas de WordPress vienen con enlaces ‘Older’ y ‘Newer’, o paginación numérica por defecto. Por ejemplo, el popular tema Astra añade automáticamente su propia paginación numérica a tus páginas de archivo, como puedes ver en la siguiente imagen.
Puede utilizar este método para personalizar la paginación integrada de un tema. Por ejemplo, puede cambiar el estilo para que se adapte mejor a su sitio.
Para añadir manualmente la paginación numérica, abra el archivo functions.php de su tema. Aquí puedes usar un cliente FTP o el gestor de archivos del cPanel de tu alojamiento WordPress. Si estás usando FTP, entonces puedes ver nuestra guía completa sobre cómo conectarte a tu sitio usando FTP.
Una vez que se haya conectado correctamente a su sitio, abra el archivo functions.php y añada el siguiente código:
function wpbeginner_numeric_posts_nav() {
if( is_singular() )
return;
global $wp_query;
/** Stop execution if there's only 1 page */
if( $wp_query->max_num_pages <= 1 )
return;
$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
$max = intval( $wp_query->max_num_pages );
/** Add current page to the array */
if ( $paged >= 1 )
$links[] = $paged;
/** Add the pages around the current page to the array */
if ( $paged >= 3 ) {
$links[] = $paged - 1;
$links[] = $paged - 2;
}
if ( ( $paged + 2 ) <= $max ) {
$links[] = $paged + 2;
$links[] = $paged + 1;
}
echo '<div class="navigation"><ul>' . "\n";
/** Previous Post Link */
if ( get_previous_posts_link() )
printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
/** Link to first page, plus ellipses if necessary */
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ' class="active"' : '';
printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
if ( ! in_array( 2, $links ) )
echo '<li>…</li>';
}
/** Link to current page, plus 2 pages in either direction if necessary */
sort( $links );
foreach ( (array) $links as $link ) {
$class = $paged == $link ? ' class="active"' : '';
printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
}
/** Link to last page, plus ellipses if necessary */
if ( ! in_array( $max, $links ) ) {
if ( ! in_array( $max - 1, $links ) )
echo '<li>…</li>' . "\n";
$class = $paged == $max ? ' class="active"' : '';
printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}
/** Next Post Link */
if ( get_next_posts_link() )
printf( '<li>%s</li>' . "\n", get_next_posts_link() );
echo '</ul></div>' . "\n";
}
Este código obtiene el número de páginas, listo para que lo muestres en tu tema de WordPress.
Los siguientes pasos variarán en función de su tema.
Si tu tema no tiene alguna forma de paginación por defecto incorporada, entonces puedes simplemente añadir la siguiente etiqueta de plantilla en tu index.php, archive.php, category.php, o cualquier otra página donde quieras mostrar paginación numérica.
<?php wpbeginner_numeric_posts_nav(); ?>
Tenga en cuenta que el lugar en el que añada este código afectará al lugar en el que se mostrará la paginación numérica en su sitio web.
Normalmente, querrá mostrar la paginación en la parte inferior de sus páginas de archivo, por lo que normalmente querrá añadir la etiqueta de plantilla a su código de pie de página.
¿Tu tema ya tiene alguna forma de paginación, como enlaces a “Entradas más antiguas” y “Entradas más recientes”?
En este caso, tendrá que encontrar el código de paginación y sustituirlo por el fragmento de código anterior.
Por ejemplo, Ashe es uno de los mejores temas gratuitos para blogs de WordPress y ya añade los enlaces de paginación “Primera” y “Última página” a sus páginas de archivo.
Para sustituir estos enlaces integrados por la paginación numérica, debe editar los archivos templates/grid.php y templates/blog-pagination.php del tema.
En cada uno de estos archivos, basta con encontrar la siguiente sección:
<?php get_template_part( 'templates/grid/blog', 'pagination' ); ?>
A continuación, puede sustituir esta línea por el siguiente fragmento de código:
<?php wpbeginner_numeric_posts_nav(); ?>
Una vez añadido el código, no olvides guardar los cambios.
El siguiente paso es personalizar la paginación numérica.
Para ayudar a los visitantes a navegar por el archivo, vamos a resaltar el número de la página actual con un color diferente. Para ello, abra el archivo style.css de su tema y, a continuación, pegue el siguiente código en este archivo:
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
color: #fff;
text-decoration:none;
}
.navigation li {
display: inline;
}
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
background-color: #6FB7E9;
border-radius: 3px;
cursor: pointer;
padding: 12px;
padding: 0.75rem;
}
.navigation li a:hover,
.navigation li.active a {
background-color: #3C8DC5;
}
Después, sólo tiene que guardar los cambios haciendo clic en el botón Actualizar archivo.
Ahora, si visita la página del archivo, verá la paginación numérica en su sitio web.
Esperamos que este artículo te haya ayudado a aprender cómo añadir paginación numérica en tu tema de WordPress. También puede consultar nuestra guía sobre cómo ganar dinero en línea blogueando con WordPress y cómo crear un tema de WordPress personalizado sin escribir ningún código.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Sujal says
There’s little bug in last lines which shows next link. You’re missing $ sign at two places get_next_posts_link() . Can you please fix that so code works well for new visitors
/** Next Post Link */
if ( $get_next_posts_link() )
printf( ‘%s’ . “\n”, $get_next_posts_link() );
Sandipan says
Not working. . After adding the code index.php links not working
WPBeginner Support says
Your theme may have some custom styling, you would want to reach out to your theme’s specific support and they should be able to assist.
Administrador
Quy says
thanks.
Normally, home.php will show up the loop content for Post page, but since my theme does not provide home.php by default so I put the wpbeginner_numeric_posts_nav(); at index.php (below endwhile;) and it works.
WPBeginner Support says
Thanks for sharing how you were able to solve the issue
Administrador
FloJDM says
Very Helpful Thx !
WPBeginner Support says
You’re welcome
Administrador
Alexandre says
Awesome article, simple and straight to the point!
It worked perfectly for me, thanks a lot!!
WPBeginner Support says
Glad our guide was helpful
Administrador
ModGirl says
I’m using the wordpress theme “X Blog” and I’m trying to figure out how to add this to that theme. everything I try keeps giving me errors. not sure why the theme won’t work with this. any help would be appreciated. thanks
Adam says
This is a really useful tutorial, thanks. I used the genesis code example with success!
My one issue was that simply copying and pasting the code from this site caused an encoding error for where the ellipses go in the numbered pagination. So on the site it displayed a diamond/question mark character instead of the ellipsis. I ended up using the HTML Entity (decimal) ellipsis: … instead which fixed this error. This only occurred on one of the two sites implemented this code on probably due to differences in meta charset or something.
Ilya says
Greetings from 2018! I have something cool for you, WordPress core the_posts_pagination() function.
jagadeesh says
i have added the code but displaying at the top of website
Sijo says
Pagination not working after page2. It’s showing 404 page when click 3 ,4 etc… I have used the same code above. How can i resolve this ?
Jean Braithwaite says
I am using your manual method for pagination, and you say “add the following template tag in your theme’s index.php, archive.php, category.php, and any other archive page template”.
The site is a regular website along with a blog which uses a custom post type.
It worked well on my archive.php page, but I would also like to use it on my blog page, which is a page template, page-blog.php. I can’t get it to work there at all. Why is that? Is there something I can do to get it working?
ziru says
hello, I added to some templates and my wordpress couldn’t work anymore, not even login in and my homepage turn to a blank page and seems the whole website break down, what can I do?
Turab says
Love u for this. U’re a lifesaver.
Subroto says
Thank you very much for this post.
Ingy Anees says
This is working fine with me in custom post type but can’t get it to work with search results .. nothing is shown at all. and advice ?
souno says
Very nice article and i have a question.
How to show total number of pages at last? In your demo it shows “9”
Thank You!
renee says
awesome code – worked like a charm! thank you for sharing it
Azamat says
How can I add pagination to the custom taxonomy terms list?
Andy says
Like Rajath I had a few problems with the pagination not rendering well on mobiles. In my case the lines overlapped. I resolved this by adding a line height to the CSS:
line-height: 2.5em;
mostafa says
Hi, I ‘ve used this code for my theme (without wp-nav plugin) ,it works other pages except in front page .what is exactly the problem?
Rajath says
Hi i`m using this pagination in my theme and it works fine in all pages and categories except in the pages where i`m using custom wp_query. I`ve read that you are using a code similar to the one in genesis framework and i`ve used wp_reset_query() but it isn`t working. Thanks in advance for the help.
anuj sharma says
hi
i m using your given code and paste in function .php and also add css in style.css but this shows pagination design but its not working
JM says
Hello! First off, I want to thank you for posting this. I know that this post is now pretty old, but it is still very useful!
The pagination displays and functions fine for the most part; but the first and last page links are missing for me. It does not matter which page I am on (first, second, third, etc.), no first page or last page links show up. Any ideas on how I can fix this?
Thanks in advance for any help!
Syed Hamza says
Numeric Pagination shows only on PC but doesn’t show on mobile. I want to show this pagination on both versions.
How I can fix it?
JeffD says
Thank you so much for the excellent tutorial. I want to use the non-plugin solution (the php script), but with no truncation/ellipses for page links (instead of 1…2 3 4 5 6…10, I want to just show all pages all the time – 1 2 3 4 5 6 7 8 9 10). How can I modify the script to do this? Should be easy for you experts but not for me! Thank you in advance for any helps!
Nelson says
This code is not working for me, are there any pointers
Youssef says
Hi I want return default wp pagination in my theme” freshlife by theme junkie I don’t Like the numeric pagination because it show the total posts in my website . please wpbeginne help
Bilal says
i want to paginate my products how can i do it
Rajath says
Hi, NIce tutorial and your website have helped me in many issues while developing my own theme. I have opted for the manual pagination shown here instead of plugin. But the pagination is not responsive and looks bad when the screen size is reduced. How to make it responsive or are there any other alternatives(no plugins please).I`m not going to publish this theme so i`m building it just to suit my need…
WPBeginner Support says
Look at your WordPress theme’s stylesheet. Study how your theme handles responsiveness. Some themes use media queries to detect screen width and then adjust different elements accordingly. Some themes use relative widths to make sure that all elements inside their design layout are responsive to the screen width.
Administrador
Rajath says
I’m developing the theme. I’m unable to make the pagination responsive. So I just removed the padding around the links which make them to look like a button. Instead I left them like numbers which works fine in small screens too. Thank You for the reply.
javad says
hi
i used first code in function but WP language changed to unreadable words why????
Gabriel Tellez says
Thanks man, is great.
James says
I’m trying to remove the pagination from my homepage found below each summary post, to me it doesn’t look great, is there a way to do this.
WPBeginner Support says
Please contact your WordPress theme developer. They will be able to guide you better.
Administrador
Aryan says
Actually i am new to wordpress but i know php good……i want to add a pagination from custom table in data base……
Fasih says
the numbered pagination without the plugin is working fine on localhost but when i upload the files i cant see anything but when i check the inspect element, the only thing i found was an empty div containing the classes but with nothing inside it. i have uploaded all the files correctly and double checked but not successful. please guide me
Abraham says
Cool!
Marco Riesco says
Excelent!! thanx
Moustafa says
This script does not work in the new WordPress 4.3.1
omdat bij de oude versie heeft die script wel gewerkt en nu niet meer
Pleas help…
Tom says
You really helpped me. Thanks !
Sam says
Thanks very helpful
lucky cabarlo says
how can i adjust the numbers to show in the custom numeric pagination
spongie says
how do you limit the page number to say up to 2 only then show ellipsis?
krishma says
can i use this plugin for custom post type
Astra says
Of course mate. You just need to put this code into your page-custom.php
Med says
Hello,
I found this very useful and I placed it to my new site. The problem is that it works perfect on the first page of the category, and after clicking on the “Next” link the url changes to /page/2/ but the highlighted page number is aways “1” and the content is always the first 10 articles (always in the first page).
I think there is something missing in my query:
<a href="”>
‘aligncenter’));
} else {
echo ”;
}
?>
Preeti Bhandari says
how can i prevent whole page reload when clicking on next link, only want to refresh that particular section… Please help….
Luis Eduardo Braschi says
Because “the goal is to replace the default Older and Newer pagination links at the bottom of archive pages” – and this is what “your” function does – “with easy to navigate page numbers.”.
Tony says
Hi how do you get just the next and previous links only. thanks.
Barry says
How can i use the wpbeginner_numeric_posts_nav(); for my Custom Post type?
I have replaced global $wp_query for
$args = array(
‘post_type’ => ‘my-cpt’,
‘meta_key’=>’cpt_detail’,
‘orderby’=>’meta_value’,
‘order’ => ‘ASC’,
‘paged’ => $paged
);
$cpt_query = new WP_Query($args);
and replaced $wp_query reference with $cpt_query but it doesn’t work
igloobob says
Hi, did you ever figure this out please? I’m trying to get this working myself and struggling. Would appreciate your help very much if you got it working…
Ashley Michèlle says
Using the ‘wpbeginner_numeric_posts_nav’ method, how would one change the navigation brackets? I’m not a huge fan of the ‘»’.
Thanks!
James George Dunn says
Hello Ashley,
You can set a value in the brackets of get_previous_posts_link() and get_next_posts_link(). For example, get_next_posts_link(‘Next Post’) will show “Next Post” instead of the default “Next Page »”.
AmirMasoud says
how can i change “Next Page” & “Previous page” text?
TimParkerRD says
If you’re using the wpbeginner_numeric_posts_nav function, you can pass custom text to the get_next_posts_links() and get_previous_posts_link(), like so:
get_previous_posts_link(“Go Back”);
Daniel Ortiz says
since Genesis Framework is not an open-source framework, are we allowed to use this code, commercially or not?( and are you allowed to distribute it?)
mr anon says
thanks a lot