Voulez-vous ajouter une pagination numérique dans votre thème WordPress ?
Par défaut, les thèmes WordPress ajoutent des liens « Suivant » et « Précédent » au bas des pages d’archives. Le problème est que ces liens ne sont pas très simples/simples d’utilisation. C’est pourquoi de nombreux blogs populaires utilisent la pagination numérique pour faciliter la navigation des internautes dans leurs pages d’archives.
Dans cet article, nous allons vous afficher comment ajouter une pagination numérique dans votre thème WordPress.
Pourquoi ajouter la pagination numérique dans votre thème WordPress ?
La plupart des thèmes disposent d’une page d’archive qui affiche une liste de publications. Au fur et à mesure que vous publiez des articles sur votre blog WordPress, votre page d’archives s’étendra sur plusieurs pages.
Les liens de pagination aident les internautes à se déplacer entre les pages d’archives et apparaissent généralement au bas de votre site WordPress.
Certains thèmes WordPress utilisent les liens « Publications plus anciennes » et « Publications plus récentes » pour la pagination. Cependant, cela permet uniquement à l’internaute d’avancer ou de reculer d’une page.
Il n’affiche pas non plus l’emplacement actuel de l’internaute dans les archives. Cela peut compliquer la navigation des internautes dans les archives de votre blog.
C’est là qu’intervient la pagination numérique.
Au lieu d’afficher des liens vers des pages plus anciennes et plus récentes, la pagination numérique affiche une série de chiffres qui permettent aux internautes de se rendre à une page spécifique des archives.
La pagination numérique peut également afficher le numéro de la page en cours à l’aide de surlignages ou de couleurs différentes, afin que l’internaute sache toujours exactement où il se trouve dans les archives.
Chez WPBeginner, nous utilisons la pagination numérique et mettons en évidence le numéro de la page actuelle en orange. Nous fournissons également des liens directs vers les 4 pages entourant la page actuelle de l’internaute.
Nous avons même créé un lien vers la dernière page de nos archives, afin que les internautes puissent rapidement et facilement consulter nos premières publications, comme vous pouvez le voir dans l’image suivante.
D’après notre expérience, ce type de pagination numérique facilite la navigation sur votre site par rapport aux liens par défaut « Publication plus ancienne » et « Publication plus récente ».
Si votre thème WordPress dispose d’une pagination » plus ancien » et » plus récent « , nous vous recommandons toujours de la remplacer par une pagination numérique.
Dans ce guide, nous allons couvrir deux façons différentes d’ajouter une pagination numérique dans votre thème WordPress. Si vous préférez passer directement à une méthode particulière, alors vous pouvez utiliser les liens ci-dessous.
- Méthode 1. Comment ajouter une pagination numérique dans WordPress en utilisant WP-PageNavi
- Méthode 2. Comment ajouter manuellement une pagination numérique dans votre thème WordPress
Méthode 1. Comment ajouter une pagination numérique dans WordPress en utilisant WP-PageNavi
La manière la plus simple d’ajouter une pagination numérique dans WordPress est d’utiliser l’extension WP-PageNavi.
Pour utiliser cette extension, vous devrez toujours apporter quelques modifications au code de votre thème, mais c’est beaucoup plus facile que la méthode du code complet car WP-PageNavi vous donne un contrôle complet sur la pagination de votre site.
La première chose à faire est d’installer et d’activer l’extension WP-PageNavi. Pour plus de détails, veuillez consulter notre guide étape par étape sur l’installation d’une extension WordPress.
Après avoir activé l’extension, allez dans Réglages » PageNavi pour configurer les paramètres de l’extension.
Ici, vous pouvez remplacer le texte de pagination par défaut par votre propre texte. Par exemple, vous pouvez modifier le texte que votre site utilise pour ses liens « Première page » et « Dernière page ».
Vous pouvez également personnaliser les liens de pagination numérique.
Dans la section « Nombre de pages à afficher », vous pouvez choisir le nombre de pages que l’extension affichera dans la section de pagination de votre site.
Ce paramètre est défini à 5 par défaut, ce qui signifie que WP-PageNavi affichera les liens directs vers 5 pages.
Comme vous pouvez le voir dans la capture d’écran ci-dessous, si vous êtes sur la page 4, vous verrez des liens vers les pages 2, 3, 4, 5 et 6.
Vous pouvez vouloir afficher plus ou moins de pages. Pour effectuer cette modification, il vous suffit de saisir le nouveau nombre dans le champ « Nombre de pages à afficher ».
Par défaut, l’extension affiche plusieurs numéros plus importants. Cela permet aux internautes d’avancer de plusieurs pages, en un seul clic.
Par défaut, l’extension affiche trois grands nombres qui augmentent de 10 à chaque fois. Par exemple, 10, 20 et 30.
Vous souhaitez utiliser un autre intervalle, par exemple 5 ou 20 ? Il vous suffit alors de saisir le nouvel intervalle dans le champ numérique « Afficher les numéros de page plus grands en multiples de ».
Chaque site WordPress est différent, c’est donc une bonne idée d’essayer différents Réglages pour voir quels réglages de pagination fonctionnent le mieux pour vous.
Si vous avez apporté des modifications aux Réglages de WP-PageNavi, n’oubliez pas de défiler jusqu’au bas de la page et de cliquer sur le bouton Enregistrer les modifications.
Ensuite, vous devez ajouter une marqueur de modèle dans votre thème WordPress. Pour ce faire, nous vous recommandons de créer un thème enfant, puis de modifier le code du thème enfant.
En créant un thème enfant, vous pouvez toujours mettre à jour votre thème WordPress en toute sécurité sans perdre votre pagination numérique personnalisée. Pour en savoir plus, consultez notre guide étape par étape sur la création d’un thème enfant WordPress.
Aucun des thèmes que vous choisissez de modifier, qu’il s’agisse d’un thème parent ou d’un thème enfant, n’est dépourvu d’un client FTP. Si c’est la première fois que vous utilisez le FTP, vous pouvez consulter notre guide complet sur la façon de se connecter à votre site à l’aide du FTP.
Lorsque vous êtes connecté à votre compte d’hébergeur WordPress via FTP, vous êtes prêt à modifier le code de votre thème WordPress.
Ces étapes varient en fonction de votre thème WordPress. Cependant, vous devrez généralement modifier le code de votre fichier index.php ou archive.php, ainsi que tout autre fichier de modèle d’archive de votre thème WordPress.
Il suffit d’ouvrir ces fichiers et de rechercher les identifiants previous_posts_link et next_posts_link.
Si vous trouvez ces identifications, remplacez-les par l’extrait de code suivant :
<?php wp_pagenavi(); ?>
Certains thèmes peuvent ne pas avoir d’identifiant previous_posts_link ou next_posts_link.
Si vous ne trouvez pas ces identifiants dans votre thème, cherchez plutôt the_posts_navigation. Par exemple, vous trouverez ce qui suit dans le fichier archive.php du thème Twenty Twenty-One :
<?php /*twenty_twenty_one_the_posts_navigation();*/
Vous pouvez alors remplacer cette ligne par l’extrait de code suivant :
<?php wp_pagenavi(); ?>
Après avoir effectué ces modifications, enregistrez puis fermez tous les fichiers ouverts du thème WordPress.
Maintenant, si vous visitez votre page d’archive WordPress, vous devriez voir votre nouvelle pagination numérique en direct sur votre site.
À ce stade, vous pouvez modifier la couleur et le style de la pagination numérique, afin qu’elle s’intègre mieux à votre thème ou à la marque de votre site.
Vous pouvez le faire en modifiant le code de l’extension.
Cependant, nous recommandons de coller le code de WP-PageNavi dans le fichier style.css de votre thème, puis d’effectuer vos modifications à l’intérieur du fichier du thème. Ainsi, vous ne perdrez pas vos personnalisations lorsque vous mettrez à jour l’extension WP-PageNavi.
Pour copier le code de votre extension, allez dans Réglages » PageNavi. Vous trouverez ensuite la section » Utiliser pagenavi-css.css » et cliquerez sur le bouton radio » Aucun » situé à côté.
N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour enregistrer vos modifications.
Ensuite, allez dans la section » Extensions » Éditeurs/éditrices de fichiers de plugins.
Vous pouvez ensuite ouvrir le menu déroulant » Sélectionné l’extension à modifier » et sélectionner » WP-Page Navi « . Vous pouvez ensuite cliquer sur ‘Sélectionné’.
Dans le menu de droite, cliquez sur le fichier pagenavi-css.css.
Ensuite, copiez tout le code dans ce fichier.
Ensuite, il suffit d’aller dans Apparence » Éditeurs/éditrices de thèmes.
Dans le menu de droite, cliquez sur le fichier style.css de votre thème.
Vous pouvez maintenant coller votre code pagenavi-css.css dans le fichier style.css du thème, et commencer à faire vos modifications.
Prenons un exemple. Voici une version modifiée du code de pagination numérique que vous pouvez ajouter au fichier style.css de votre thème :
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;
}
Dans l’image suivante, vous pouvez voir à quoi ressemblera cette pagination numérique sur votre site.
Cela vaut la peine d’essayer différents styles pour voir ce qui convient le mieux à votre site WordPress.
Lorsque vous êtes satisfait de l’aspect de votre pagination numérique, cliquez sur le bouton Mettre à jour le fichier pour enregistrer vos modifications.
Méthode 2. Comment ajouter manuellement une pagination numérique dans votre thème WordPress
Une autre option consiste à ajouter manuellement la pagination numérique dans votre thème WordPress à l’aide d’un code.
De nombreux thèmes WordPress intègrent des liens « Plus ancien » et « Plus récent », ou une pagination numérique par défaut. Par exemple, le thème populaire Astra ajoute automatiquement sa propre pagination numérique à vos pages d’archives, comme vous pouvez le voir dans l’image suivante.
Vous pouvez utiliser cette méthode pour personnaliser la pagination intégrée à un thème. Par exemple, vous pouvez modifier le style pour mieux l’adapter à votre site.
Pour ajouter manuellement la pagination numérique, ouvrez le fichier functions.php de votre thème. Ici, vous pouvez utiliser soit un client FTP, soit le gestionnaire de fichiers du cPanel de votre hébergeur WordPress. Si vous utilisez le FTP, vous pouvez consulter notre guide terminé sur la façon de se connecter à votre site à l’aide du FTP.
Une fois que vous vous êtes bien connecté à votre site, ouvrez le fichier functions.php et ajoutez le code suivant :
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";
}
Ce code permet d’obtenir le nombre de pages, prêt à être affiché dans votre thème WordPress.
Les étapes suivantes varient en fonction de votre thème.
Si votre thème ne dispose pas d’une forme de pagination par défaut intégrée, vous pouvez simplement ajouter le marqueur modèle suivant dans votre fichier index.php, archive.php, category.php, ou toute autre page où vous souhaitez afficher une pagination numérique.
<?php wpbeginner_numeric_posts_nav(); ?>
Sachez simplement que l’endroit où vous ajoutez ce code aura une incidence sur l’affichage de la pagination numérique sur votre site.
En règle générale, vous souhaitez afficher la pagination au bas de vos pages d’archives, c’est pourquoi vous devez ajouter le marqueur de modèle au code de votre pied de page.
Votre thème dispose-t-il déjà d’un formulaire de pagination, tel que des liens vers les « publications plus anciennes » et les « publications plus récentes » ?
Dans ce cas, vous devrez trouver le code de pagination et le remplacer par l’extrait ci-dessus.
Par exemple, Ashe est l’un des meilleurs thèmes de blog WordPress gratuits et ajoute déjà des liens de pagination » Première » et » Dernière page » à vos pages d’archives.
Pour remplacer ces liens intégrés par une pagination numérique, vous devez modifier les fichiers templates/grid.php et templates/blog-pagination.php du thème.
Dans chacun de ces fichiers, il suffit de trouver la section suivante :
<?php get_template_part( 'templates/grid/blog', 'pagination' ); ?>
Vous pouvez alors remplacer cette ligne par l’extrait de code suivant :
<?php wpbeginner_numeric_posts_nav(); ?>
Une fois le code ajouté, n’oubliez pas d’enregistrer vos modifications.
L’étape suivante consiste à personnaliser votre pagination numérique.
Pour aider les internautes à naviguer dans les archives, nous allons mettre en évidence le numéro de la page actuelle avec une couleur différente. Pour ce faire, ouvrez le fichier style.css de votre thème, puis collez le code suivant dans ce fichier :
.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;
}
Après tout cela, il vous suffit d’enregistrer vos modifications en cliquant sur le bouton Mettre à jour le fichier.
Maintenant, si vous visitez la page des archives, vous verrez la pagination numérique en direct sur votre site.
Nous espérons que cet article vous a aidé à apprendre comment ajouter une pagination numérique dans votre thème WordPress. Vous pouvez également consulter notre guide sur les moyens de gagner de l’argent en ligne en bloguant avec WordPress et comment créer un thème WordPress personnalisé sans écrire de code.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Sujal
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
Not working. . After adding the code index.php links not working
WPBeginner Support
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.
Administrateur
Quy
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
Thanks for sharing how you were able to solve the issue
Administrateur
FloJDM
Very Helpful Thx !
WPBeginner Support
You’re welcome
Administrateur
Alexandre
Awesome article, simple and straight to the point!
It worked perfectly for me, thanks a lot!!
WPBeginner Support
Glad our guide was helpful
Administrateur
ModGirl
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
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
Greetings from 2018! I have something cool for you, WordPress core the_posts_pagination() function.
jagadeesh
i have added the code but displaying at the top of website
Sijo
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
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
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
Love u for this. U’re a lifesaver.
Subroto
Thank you very much for this post.
Ingy Anees
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
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
awesome code – worked like a charm! thank you for sharing it
Azamat
How can I add pagination to the custom taxonomy terms list?
Andy
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
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
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
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
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
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
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
This code is not working for me, are there any pointers
Youssef
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
i want to paginate my products how can i do it
Rajath
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
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.
Administrateur
Rajath
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
hi
i used first code in function but WP language changed to unreadable words why????
Gabriel Tellez
Thanks man, is great.
James
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
Please contact your WordPress theme developer. They will be able to guide you better.
Administrateur
Aryan
Actually i am new to wordpress but i know php good……i want to add a pagination from custom table in data base……
Fasih
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
Cool!
Marco Riesco
Excelent!! thanx
Moustafa
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
You really helpped me. Thanks !
Sam
Thanks very helpful
lucky cabarlo
how can i adjust the numbers to show in the custom numeric pagination
spongie
how do you limit the page number to say up to 2 only then show ellipsis?
krishma
can i use this plugin for custom post type
Astra
Of course mate. You just need to put this code into your page-custom.php
Med
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
how can i prevent whole page reload when clicking on next link, only want to refresh that particular section… Please help….
Luis Eduardo Braschi
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
Hi how do you get just the next and previous links only. thanks.
Barry
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
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
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
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
how can i change « Next Page » & « Previous page » text?
TimParkerRD
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
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
thanks a lot