Un blog d’actualité juridique publiait une brève chaque semaine mais voulait, ponctuellement, mettre en avant un article de fond épinglé en tête de liste, visuellement distinct du flux habituel. La fonctionnalité native des articles épinglés de WordPress correspondait exactement au besoin, mais l’implémentation par défaut du thème client ne stylisait rien de particulier, et surtout, provoquait un article dupliqué en page 2 des archives dès qu’on activait la pagination.
Voici la recette complète que j’ai appliquée : distinguer visuellement l’article épinglé dans le thème classique, et corriger le bug de pagination qui l’accompagne presque systématiquement. Le comportement des articles épinglés dans le Query Loop des thèmes blocs suit une logique différente et n’est pas couvert ici.
Le problème : un épinglage invisible sans travail supplémentaire
Épingler un article depuis l’écran d’édition (case « Mettre cet article en avant ») ne change rien à son apparence par défaut : la fonctionnalité place seulement l’article en tête de la boucle principale, sans aucune classe ni balisage distinctif visible pour le visiteur. Sans intervention du thème, un utilisateur ne remarque même pas qu’un article est épinglé.
Snippet commenté : détecter et distinguer l’épinglé
La fonction is_sticky() teste si l’article courant dans la boucle est épinglé. Elle accepte également un identifiant d’article en argument, ce qui permet de tester un post précis en dehors de tout contexte de boucle, par exemple pour un widget d’accueil personnalisé.
<?php while ( have_posts() ) : the_post(); ?>
<article <?php post_class(); ?>>
<?php if ( is_sticky() ) : ?>
<span class="sticky-badge">À la une</span>
<?php endif; ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
</article>
<?php endwhile; ?>
Un détail utile : la fonction post_class() ajoute déjà automatiquement la classe CSS sticky à l’élément quand l’article est épinglé, sans code supplémentaire. Sur ce projet, j’ai exploité cette classe existante plutôt que d’ajouter une condition redondante pour le style de base, réservant is_sticky() à l’ajout du badge textuel « À la une ».
.sticky {
border-left: 4px solid #b8860b;
background-color: #fdf6e3;
}
.sticky-badge {
display: inline-block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #b8860b;
}
Le piège de pagination : l’épinglé qui revient en page 2
Une fois le style en place, le client a signalé que l’article épinglé apparaissait à la fois en page 1 et de nouveau en page 2 des archives. C’est un comportement connu de WordPress : par défaut, la requête principale place l’épinglé en tête de la première page, mais la pagination continue de compter cet article dans le flux normal des résultats suivants, provoquant un doublon en toute fin de page ou en début de page suivante selon le nombre d’articles.
La correction consiste à exclure explicitement les identifiants épinglés du calcul de la boucle secondaire, via le filtre pre_get_posts, uniquement au-delà de la première page.
function bjc_fix_sticky_pagination( $query ) {
if ( ! is_admin() && $query->is_main_query() && $query->is_home() ) {
if ( get_query_var( 'paged' ) > 1 ) {
$sticky = get_option( 'sticky_posts' );
if ( ! empty( $sticky ) ) {
$query->set( 'post__not_in', $sticky );
}
}
}
}
add_action( 'pre_get_posts', 'bjc_fix_sticky_pagination' );
Ce correctif ne s’applique qu’à partir de la deuxième page (paged > 1) : sur la première page, l’épinglé doit rester visible en tête, WordPress s’en charge nativement via ignore_sticky_posts laissé à sa valeur par défaut.
Variante : plusieurs épinglés avec un ordre personnalisé
Sur un second projet pour un cabinet d’avocats, le client voulait pouvoir épingler jusqu’à trois articles simultanément avec un ordre de priorité entre eux. WordPress affiche naturellement plusieurs épinglés dans l’ordre chronologique décroissant de publication, pas dans un ordre choisi manuellement. Pour imposer un ordre précis, j’ai trié le tableau sticky_posts selon une méta personnalisée sticky_priority, puis reconstruit la requête avec post__in et orderby => 'post__in' pour la portion épinglée uniquement, avant de fusionner avec le reste de la boucle.
Variante : masquer complètement l’épinglage sur une archive de catégorie
Certains clients ne veulent l’effet d’épinglage que sur la page d’accueil, jamais sur les archives de catégorie où l’ordre chronologique doit rester strict. Le filtre pre_get_posts permet de désactiver l’épinglage sélectivement avec $query->set( 'ignore_sticky_posts', true ), appliqué uniquement quand is_category() est vrai.
En résumé
Styliser un article épinglé en thème classique tient en peu de code : exploiter la classe sticky déjà fournie par post_class(), ajouter un badge conditionné par is_sticky(), et surtout corriger le doublon de pagination avec un filtre pre_get_posts ciblé sur les pages suivantes. C’est ce dernier point, souvent négligé, qui distingue une implémentation propre d’un correctif bâclé qui refait surface au premier client qui va jusqu’en page 2.
