WordPress, le guide ultime pour éviter les erreurs de dev’ les plus courantes

Vous débutez dans le développement sur WordPress ? Vous concevez votre premier plugin ou thème ?

Ce guide est fait pour vous ! Nous allons aborder ensemble toutes les erreurs les plus courantes, que j'aurais aimé connaître en me lançant, et que je vais vous partager maintenant pour gagner du temps (et éviter des cheveux blancs) !

L'article est découpé en plusieurs parties, je vous laisse les découvrir, et vous arrêter directement si vous vous reconnaissez dans une section 🙂

Vous modifiez un thème à la main ?

Le thème que vous utilisez ne vous satisfait pas à 100% ? Vous décidez de le modifier à la main ? En allant directement ajuster les fichiers internes du thème ?

Je pense que c'est le premier réflexe que nous avons tous eu, et qui parait au passage fichtrement logique !

Malheureusement, détrompez-vous, si vous modifiez directement les fichiers du thème, vous laissez une véritable bombe à retardement.

En effet, tout fonctionne, et tout fonctionnera, jusqu'à la prochaine mise à jour du thème, qui écrasera purement et simplement toutes vos modifications, sans aucune vergogne ni regret.

Mais alors ? Comment conserver ces modifications ?

WordPress est un CMS communautaire, et la modification des thèmes est un point sur lequel ils ont mis l'honneur. Pour permettre à n'importe quel utilisateur / développeur d'adapter et élargir les possibilités d'un thème, qu'importe sa provenance.

C'est pourquoi, un système est proposé pour apporter des modifications à un thème, sans modifier directement les fichiers internes susceptibles de sauter : les thèmes enfants.

La procédure est simple : vous devez créer un thème enfant en spécifiant que le parent de ce thème est le thème que vous souhaitez modifier > Vous pouvez maintenant créer un fichier style.css à la racine de votre thème enfant, dans lequel vous apportez toutes les modifications nécessaires, qui seront conservées qu'importe les mises-à-jour ou autres interactions du thème parent ! (la procédure est la même pour les fichiers de templates, gardez juste le respect de l'arborescence du thème parent, et nommez les fichiers avec le même nom, par exemple : templates-parts/header.php)

Comment créer un thème enfant ? Je vous laisse aller lire le fabuleux article de WP Marmite !

Error: '$' is undefined, ou JQuery qui ne fonctionne pas

Si vous êtes entrain de créer votre propre thème ou plugin, il se peut que vous ayez envie de gagner du temps en utilisant JQuery.

Vous écrivez votre syntaxe usuelle, par exemple : $('header').hide();

Et là tout de suite, plus rien ne fonctionne. La console développeur vous renvoie : Error: '$' is undefined.

C'est toujours bon à savoir, mais WordPress utilise une version de compatibilité de JQuery, vous allez donc devoir troquer tous vos $(...) en jQuery(...).

Transformez donc votre ancien code : $('header').hide(); en jQuery('header').hide();

Ce n'est pas plus compliqué ! (et ça m'aura toutefois coûté des sérieux dommages émotionnels avant de trouver cette solution aha)

Une erreur critique est survenue ...

Que ce soit lors de l'installation d'un nouveau plugin, ou pendant son développement. Il se peut que vous croisiez à un moment le fameux message "Une erreur critique est survenue ...", paralysant votre site, et si vous êtes en production, pire, directement vos visiteurs !

Dans cette situation, pas de panique, résolvez tout ça en seulement 2 étapes :

Connectez-vous à votre serveur hébergeant votre site (via FTP ou SSH par exemple),
Localisez le répertoire du plugin causant cette erreur (le votre ou celui fraîchement installé),
Renommez son répertoire, en ajoutant quelque chose à la fin, par exemple : "monsuperplugin-OLD".

Le nom contenu dans la base de données de votre WP étant différent du nouveau que vous venez de renseigner, il sera tout simplement désactivé au rafraîchissement de la page !

Et bye bye l'erreur critique (et la panique) !

Vous voulez modifier le backend interne de WordPress ?

Ne vous aventurez surtout pas dans la modification des fichiers internes de WordPress !

Pour modifier le backend (côté admin/rédacteur etc ...) de WordPress, il faudra encore passer par la création d'un plugin / thème.

WordPress met à disposition des hooks, et des filtres :

Un Hook, ou hameçon en Français, est une fonctionnalité qui vous permettra de lancer des functions PHP à des endroits spécifiques de WordPress,
- Par exemple : Un hook permettrait d'afficher un message en haut du tableau de bord de vos utilisateurs, avec les données qui vous souhaiter lui partager (utile pour proposer un résumé hebdomadaire imaginons)
Un filtre, comme son nom l'indique, il vous permettra de vous apposer avant un affichage ou un traitement de données.
- Par exemple : Un filtre pourrait être rajouté avant l'affichage de "the_content", pour par exemple mettre en place un paywall, qui vérifie si l'utilisateur en cours dispose de certains droits, si ce n'est pas le cas, vous pouvez intervenir sur le contenu pour le remplacer par "Abonnez-vous afin de consulter cette ressource".

Exemple de code pour afficher un message dans le tableau de bord

function customMessage($messages) {
    $notice = "Salut, je suis un message personnalisé sur le tableau de bord de WordPress";
  	echo $notice;
}
add_action( 'admin_notices', 'customMessage');

PHP

Ajouter des ressources externes (CSS/JS) dans votre site

Il se peut que vous souhaitiez ajouter des ressources externes à votre site, par exemple FontAwesome CSS si il n'est pas déjà inclut, ou même un framework tel que Tailwind ou autre ! (même du JS en plus)

Le réflexe qu'on pourrait avoir en débutant avec WordPress, serait de "tout simplement" ajouter ces ressources dans le fichier header.php de votre thème actuel (en thème enfant bien évidemment ^^).

Malheureusement, ça reste une mauvaise pratique, qui fonctionnera mais qui pourra vous poser des soucis dans le futur :

Optimisation de WordPress, si vous codez en dur vos ressources, WordPress ne pourra pas optimiser son chargement de manière "intelligente",
Problème de compatibilité / performance, si vous ne déclarez pas ces nouvelles ressources à WP, il ne sera pas en mesure d'éviter les doublons lors de l'installation d'un nouveau plugin par exemple (ça serait dommage de charger 2 fois la même ressource),
Maintenabilité, si vous publiez votre thème quelque part, coder en dur rendra votre thème difficile à appréhender et maintenir pour les autres utilisateurs,

Pour ajouter des ressources externes, de manière fiable et pérenne, ajoutez directement ces lignes dans votre votre fichier functions.php de votre thème / plugin :

add_action( 'wp_enqueue_scripts', function() {
    $themeUrl = get_template_directory_uri();
    // CSS Files
    wp_enqueue_style( 'bootstrap', $themeUrl . '/css/bootstrap.css' ); // En premier, le nom de votre style, en deuxième l'URL vers le CSS

    // JS Files
    wp_enqueue_script( 'bootstrap-js', $themeUrl . '/js/bootstrap.min.js', array(), '1.0', true ); // Comme pour au dessus, le troisième argument attends un array des dépendances requises (par exemple Jquery), et en ensuite la version du script JS ajouté
} );