Les profils générés par BuddyPress ressemblaient à un thème par défaut posé au milieu d’un site par ailleurs entièrement personnalisé : couleurs différentes, typographies différentes, boutons qui n’avaient rien à voir avec ceux du reste du site. La fédération concernée regroupe six clubs affiliés, chacun avec ses propres adhérents, et souhaitait un espace membre commun où chaque licencié retrouve son profil, ses groupes de discussion par club et son fil d’activité.
BuddyPress fonctionne par défaut avec ses propres gabarits, pensés pour s’adapter à n’importe quel thème sans configuration. Le résultat visuel reste toutefois générique tant qu’aucune surcharge n’est mise en place, ce qui ne convenait pas à un thème classique déjà construit avec une charte graphique précise pour la fédération.
Comprendre la hiérarchie de templates de BuddyPress
BuddyPress cherche en priorité ses fichiers de gabarit dans un dossier buddypress/ placé à la racine du thème actif, avant de se rabattre sur ses propres templates par défaut embarqués dans l’extension. Cette mécanique s’appuie sur la même logique que la hiérarchie de templates classique de WordPress, appliquée cette fois aux composants de BuddyPress : profils, groupes, activité, messages.
mon-theme/
└── buddypress/
├── members/
│ └── single/
│ └── profile/
│ └── profile-loop.php
├── groups/
│ └── single/
│ └── home.php
└── activity/
└── index.php
Copier un fichier depuis le dossier templates/ de l’extension BuddyPress vers ce même chemin relatif dans le thème suffit à le faire prendre le dessus, sans toucher au code de l’extension elle-même — ce qui garantit que les futures mises à jour de BuddyPress n’écraseront jamais les personnalisations.
Réutiliser les classes CSS du thème plutôt que les dupliquer
Le premier réflexe aurait été d’écrire une feuille de style spécifique à BuddyPress, séparée du reste. Cette approche multiplie les classes à maintenir et finit par diverger du thème au fil des mises à jour. La solution retenue a consisté à remplacer, dans chaque gabarit surchargé, les classes génériques de BuddyPress par les classes déjà définies dans la feuille de style du thème pour les boutons, les cartes et les listes.
Concrètement, un bouton BuddyPress <a class="button"> devient <a class="wpm-bouton wpm-bouton--secondaire"> dans le gabarit surchargé, en reprenant exactement la classe déjà utilisée pour les boutons du reste du site. Le rendu final ne trahit plus la présence de BuddyPress ; les licenciés naviguent d’une page classique du site à leur profil sans rupture visuelle.
Points de vigilance rencontrés sur ce projet
- Les groupes BuddyPress correspondent chacun à un club affilié, avec un espace de discussion propre, distinct de l’espace public du site
- Le fil d’activité global affiche par défaut les publications de tous les clubs mélangées, ce qui a nécessité un filtre par groupe pour les licenciés qui ne suivent qu’un seul club
- Les avis et notes ne font pas partie du périmètre : cette fédération ne gère pas de forum de discussion type bbPress, distinct de BuddyPress et non utilisé ici
La question des menus de navigation dans l’espace membre
Un autre point de friction est apparu autour des menus : le thème classique utilisait wp_nav_menu avec un walker personnalisé pour son menu principal, alors que BuddyPress gère ses propres sous-menus de navigation à l’intérieur d’un profil membre, indépendants de ce walker. Il a fallu construire un gabarit d’en-tête spécifique pour les pages BuddyPress, capable d’afficher le menu principal du site classique tout en laissant BuddyPress gérer ses onglets internes de profil sans interférence entre les deux systèmes.
Cette séparation, une fois posée, a évité tout conflit de style entre les deux menus : le menu principal reste géré comme sur n’importe quelle autre page du site, tandis que les onglets de profil (activité, amis, groupes, messages) restent entièrement pilotés par BuddyPress, avec seulement une réutilisation des classes CSS déjà décrites plus haut.
Surcharger un gabarit d’extension coûte quelques heures de plus qu’une feuille de style à côté, mais évite une divergence visuelle qui s’aggrave à chaque mise à jour.
En résumé
Adapter BuddyPress à un thème classique ne demande pas de renoncer à la charte graphique existante : la hiérarchie de templates de l’extension, associée à la réutilisation des classes CSS déjà en place, suffit à intégrer l’espace membre sans rupture visuelle. Pour la fédération, ce travail a permis aux six clubs affiliés de partager un espace commun tout en gardant l’identité visuelle du site principal, sans qu’aucun licencié ne remarque le changement d’extension sous le capot.
