Comment créer un module / une extension WordPress ?

Vous connaissez tous WordPress, le CMS de gestion de contenu le plus utilisé dans le monde et vous savez sûrement que l’outil fonctionne avec un système de modules (“plugins” en anglais) sinon vous ne seriez pas sur cette article.

Je vais vous expliquer comment créer votre premier module WordPress ainsi que quelques essentiels du développement de plugins pour le CMS. Cet article nécessite des connaissances en développement et il est recommandé de connaître un minimum l’écosystème WordPress pour être à l’aise avec ce qui va suivre.

La publication sur la bibliothèque officielle des modules WordPress n’est pas obligatoire, vous pouvez tout à fait créer un module qui sera utilisable uniquement pour vos propres besoins. Ce sera un module privé et il faudra l’installer directement via le FTP car il ne sera pas disponible sur la bibliothèque WordPress.

Qu’est-ce qu’un plugin WordPress ?

Avant d’entrer dans la partie technique de la création de module WordPress, il est important de rappeler ce qu’est un module et dans quel cas il peut être adéquate d’en créer un.

Un module (“plugin” en anglais et “extension” d’après la traduction officielle WordPress) est un ensemble de fichiers permettant d’étendre les options et fonctionnalités du CMS. En effet, il va permettre de créer de nouvelles fonctionnalités inexistantes nativement dans le CMS ou d’en modifier certaines.
Vous pourriez écrire dans le fichier functions.php, vous allez me dire.
Oui bien-sûr mais la création de module vous permet de créer des fonctionnalités réutilisables, maintenables et qui ne disparaîtront pas avec le changement du thème.

On peut prendre pour exemple WooCommerce, qui n’est pas un CMS mais une extension de WordPress permettant d’ajouter une partie e-commerce à son site web.

A l’heure ou j’écris cet article, il existe 56,645 extensions répertoriées sur la bibliothèque officielle de WordPress (wordpress.org) mais elles ne constituent pas l’intégralité des modules existants, certains se trouvant sur d’autres plateformes. Le champs des possibilités est très large, il est donc impossible de dire tout ce que vous pourriez faire avec, je laisse place à votre imagination et parcourir la bibliothèque de modules officielle de WordPress.

Il faut donc bien comprendre que les modules WordPress sont de véritables bijoux lorsque vous êtes propriétaire d’un site WordPress. Ils vous permettront d’élargir le champs des fonctionnalités de votre site internet sans avoir à mettre les mains dans le cambouis (normalement).

Si vous êtes développeur WordPress, c’est tout autre chose car vous allez vous même créer des modules pour la communauté, vos clients ou vous-même afin de répondre à un besoin ou une problématique.
Je vais donc vous expliquer comment créer votre premier module WordPress dans la suite de cet article.

Pré-requis pour créer un module WordPress

Quelques impératifs avant de commencer.

Afin d’être sûr de comprendre la suite des explications, il est nécessaire de connaître la programmation et notamment le PHP, qui est le langage utilisé par le CMS WordPress. Pour certaines fonctionnalités avancées telle que la galerie, vous aurez également besoin de connaissance en JavaScript. Pour la personnalisation de votre module, le HTML/CSS est aussi fort pratique notamment si vous votre extension est accessible par l’utilisateur. Dans ce cas, il vaut mieux connaître l’intégration et le responsive.

La connaissance du CMS est bien-sûr fortement recommandé, mais vous pourrez apprendre au fur et à mesure si vous connaissez les basiques et que vous souhaitez découvrir la création de module.

Vous devez également avoir un environnement de développement local type MAMP, XAMP, LAMP ou bien directement apache sur votre système. Si vous êtes développeur, vous devriez déjà avoir ça. Je passe également l’installation de WordPress, si vous n’avez encore rien fait, installez la dernière version de WordPress.
Il est recommandé de travailler sur un WordPress à jour pour profiter de toutes les dernières fonctionnalités et de garantir la compatibilité avec la dernière version du CMS.

Enfin, munissez de l’éditeur de code de votre choix, celui qui vous permettra de travailler sereinement.
Pour ma part j’utilise PHPStorm.

Création du squelette de votre premier module WordPress

Ça y est vous êtes prêt à vous lancer dans votre premier module ?
Alors c’est parti, voici les basiques de la création d’un module WordPress.

Pour commencer, c’est très simple, votre extension ne nécessite qu’un seul fichier pour être reconnue par le CMS.
En effet, il vous suffit de créer un fichier .php dans le dossier /wp-content/plugins/. Cependant je vous recommande de toujours créer un dossier par module afin d’avoir plus de clarté et de vous permettre une meilleure maintenabilité future.

Pour ajouter un dossier/fichier dans le répertoire, je pars du principe que vous avez votre projet en local sur un environnement de test (MAMP, Xamp, Lamp …).
Vous pouvez également accéder à votre site en production à partir du FTP fourni par votre hébergeur, mais je vous le déconseille FORTEMENT !

Nous allons donc créer un module qui s’appellera my-awesome-plugin, créer donc un dossier my-awesome-module dans /wp-content/plugins/ puis ajoutez-y un fichier .php du même nom.

Vous devriez avoir la nomenclature ci-dessous :
wp-content/
— plugins/
—— my-awesome-plugin/
——— my-awesome-plugin.php

Pour que votre module soit reconnu par votre site WordPress, il doit posséder une structure de commentaires dans l’en-tête de votre fichier sous cette forme :

PHP

                    <?php
/**
 * Plugin Name: YOUR PLUGIN NAME
 */

C’est le minimum requis pour que votre module apparaisse dans la liste des autres modules du site.
Vous l’aurez surement compris, YOUR PLUGIN NAME doit être remplacé par le nom de votre module.
Ce nom apparaîtra dans la liste des extensions en back-office du site.

Cependant il existe plus d’informations disponibles dans cet en-tête afin d’enrichir votre module avec des informations utiles.
Voici par exemple l’en-tête d’un de mes derniers modules, à titre d’exemple :

PHP

                    <?php
/**
 * Plugin Name: Linky 
 * Plugin URI: https://www.undefined.fr  
 * Description: Create & manage link’s hub for your  social profile directly in your websites  
 * Version: 1.0.7  
 * Author Name: Nicolas RIVIERE (hello@undefined.fr)  
 * Author: Nicolas RIVIERE (Undefined)  
 * Domain Path: /languages  
 * Text Domain: linky 
 * Author URI: https://www.undefined.fr/#about
 */

Vous pouvez trouver la liste complète dans la documentation officielle de WordPress à la rubrique Exigences d’en-tête. Cela vous permettra d’ajouter plusieurs informations comme une description, l’auteur du module, le numéro de version ou encore des informations techniques destinées au CMS.

A partir de là, votre module est disponible à l’activation depuis l’administration du site.
Si vous vous rendez dans votre back-office à la page “Extensions”, vous devriez voir apparaître une ligne supplémentaire comme ceci :

Félicitations, votre premier module est maintenant créé et vous pouvez l’activer.
Pour l’instant il ne fait rien de particulier mais il a le mérite d’exister.

Utilisation et explication des hooks dans WordPress

Désormais allons plus loin.

Maintenant que votre module existe et qu’il est activé sur votre site, nous allons voir ce qu’est un hook et pourquoi il est indispensable dans la création d’extension WordPress.

Il est possible que vous connaissez déjà les hooks si vous modifiez régulièrement des thèmes ou que vous êtes à l’origine d’un thème WordPress sur-mesure.

Chaque CMS / Framework à sa façon de fonctionner mais des similitudes apparaissent lorsque l’utilisateur doit interagir avec les fonctionnalités développées par l’éditeur.
Les termes utilisés varient d’un CMS à un autre (ou d’un framework à un autre) mais le fonctionnement est le même, vous allez vous positionner à des endroits stratégiques de l’exécution du code grâce à des événements. Ici (sur WordPress) on utilise des hooks.
Si vous avez l’habitude de travailler sur Magento par exemple, vous connaissez probablement les Observers. Si vous connaissez le JavaScript, vous connaissez forcément les événements, le fonctionnement est quasiment identique.

Les hooks vont donc vous permettre “d’écouter” les portions de code exécutées et de vous greffer à des moments intéressants pour vos modifications. Sous réserve que l’éditeur est mis en place une action ou un filtre à l’endroit souhaité.
En effet, il existe 2 types de hook, les actions et les filtres.
Le type action comme son nom l’indique, va nous permettre d’effectuer une action à un moment précis. Le filtre quant à lui, va nous permettre d’interagir avec de la donnée afin de la modifier ou la supprimer.

Prenons un exemple pour que ce soit plus parlant.
Nous souhaitons que notre module supprime le menu “Articles” dans le back-office du site car nous ne l’utilisons pas.
Nous allons pour cela utiliser le hook de type action ayant pour identifiant admin_menu, documentation présente ici : https://developer.wordpress.org/reference/hooks/admin_menu/

Grâce à la fonction add_action, vous allez pouvoir vous greffer à un l’exécution du code natif et ajouter du code supplémentaire, vous permettant de supprimer le menu.

Voici le code nécessaire pour effectuer cette modification.

PHP

                    <?php 
function undefined_remove_menu_pages() {
        // Permet de supprimer le menu Articles
	remove_menu_page( 'edit.php' );
}
add_action( 'admin_menu', 'undefined_remove_menu_pages' );

La fonction add_action (de même que add_filter) bénéficie de 4 paramètres dont 2 optionnels.

$tag (string) (Required)
Le nom de l’action que vous voulez cibler, ici ce sera admin_menu

$function_to_add (callable) (Required)
Le nom de la fonction de callback que vous souhaitez appeler, ici ce sera undefined_remove_menu_pages.

$priority (int) (Optional)
Le niveau de priorité d’exécution de votre code, dans le cas ou il y aura plusieurs plugins utilisant ce hook par exemple. Plus il est élevé, plus il sera exécuté en dernier.
Par défaut, la valeur est à 10

$accepted_args (int) (Optional)
Le nombres d’arguments acceptés.
L’action spécifique peut vous fournir différents arguments contenant des informations utiles à la modification que vous souhaitez apporter.
Par défaut, le nombre d’arguments est de 2, mais vous pourriez avoir besoin du 3ème ou 4ème argument pour faire votre condition.

Cette modification a été rendu possible car l’éditeur WordPress à mis en place un « écouteur » dans le code initial. Vous pouvez regarder dans le core de WordPress, vous trouverez un do_action( ‘admin_menu’, » ); dans wp-admin/includes/menu.php

Pour les filtres c’est pareil, à la différence que vous devez renvoyer une valeur à la fin de votre fonction et que vous utiliserez la fonction add_filter au lieu de add_action.

Voici un exemple :

PHP

                     <?php 
function undefined_edit_page_title($title) { 
    return $title . ' | Mon super site' ; 
}
add_filter('wp_title', 'undefined_edit_page_title');

Grâce à ce code, j’ai modifié tous les titres de mes pages de mon blog WordPress pour qu’il affiche, le titre de la page avant modification plus ‘ | Mon super site’.

Vous l’aurez compris, les hooks vont être indispensables pour modifier le comportement des fonctionnalités natives de WordPress. Car évidemment il est INTERDIT de modifier le core de WordPress directement. C’est même un délit passible de la peine de mort ! (c’est une blague bien évidemment, quoi que…).

Création d’une page d’administration dans le back-office de WordPress grâce à votre module

Maintenant que vous connaissez les hooks, nous allons pouvoir créer notre première page dans l’administration de votre site.

Comme je suis un développeur exigeant et que je considère que la programmation orientée objet à toute sa place dans WordPress (qu’elle devrait même être la norme sachant que WordPress n’est pas uniquement écrit en PHP procédural), les exemples qui vont suivre seront réalisés en objet, mais ne fuyez pas tout de suite, vous allez voir tout ce que je fais est relativement simple à comprendre même pour un novice.

Reprenons notre module créé tout à l’heure et ajoutons-y les fonctionnalités dont on a parlé.

Pour commencer, créer une classe PHP dans votre fichier (après les commentaires) de cette façon :

PHP

                    class MyAwesomeClass 
{
    public function __construct()
    {
        // Your code here
    }
}

new MyAwesomeClass();

La méthode __construct va être appelée à l’instanciation de votre objet.
C’est donc ici que l’on va mettre les add_actionet add_filter.

Nous souhaitons ajouter une page à notre administration ainsi qu’un menu associé dans le menu latéral gauche du back-office.

Pour cela, nous allons créer la page dans le back-office en utilisant l’action admin_menu. Ajouter la ligne suivante dans la méthode __construct :

PHP

                    add_action( 'admin_menu', [ $this, 'admin_awesome_plugin_menu'] );

Comme vous le voyez, j’appelle un array au lieu du nom de la fonction en deuxième paramètre. Je fais ainsi pour pouvoir appeler une méthode de ma classe courante.
Le premier paramètre correspond à mon objet, ici c’est $this qui me renvoie mon objet courant (ma classe). En deuxième paramètre, le nom de la méthode.

Créez ensuite la méthode du même nom. Vous ajouterez à l’intérieur le code suivant. La fonction add_menu_page permettra (comme son nom l’indique) de créer une page avec un menu associé.

PHP

                    public function admin_awesome_plugin_menu()
{
        add_menu_page(
	    __('My Awesome Plugin', 'my-awesome-plugin'), // Page title
	    __('My Awesome Plugin', 'my-awesome-plugin'), // Menu title
	    'manage_options',  // Capability
	    'my-awesome-plugin', // Slug
	    [ &$this, 'load_awesome_plugin_page'], // Callback page function
	);
}

Rien de compliqué, je fais appel à la fonction add_menu_page fournie par WordPress et je choisis les paramètres qui vont bien.

Comme vous le voyez, j’appelle une autre méthode load_awesome_plugin_page qui va me permettre d’afficher du contenu dans ma page. Créez donc cette méthode comme ceci :

PHP

                    public function load_awesome_plugin_page() 
{ 
        echo '<h1>' . __( 'My Awesome Plugin', 'my-awesome-plugin' ) . '</h1>'; 
        echo '<p>' . __( 'Welcome to My Awesome Plugin', 'my-awesome-plugin' ) . '</p>'; 
}

Et voilà, si vous recharger votre back-office, vous verrez à gauche un menu portant le nom de ‘My Awesome Plugin’ sur lequel vous pouvez cliquer pour atterrir sur votre nouvelle page.

C’est simple, vous n’avez plus qu’à faire appel à vos talents de développeur pour enrichir votre page avec tout ce dont vous avez besoin (formulaires, appels externes…).

Petits conseils dans le développement de vos modules WordPress

Maintenant que vous avez créé votre premier module WordPress, il est temps que vous donne quelques recommandations pour réaliser des extensions propres, maintenables et agréables à utiliser.

Lecture du code

Comme pour tout développement, vous devez veiller à écrire un code propre, correctement indenté, commenté et si possible documenté pour faciliter sa lecture. Ce sera bénéfique pour la personne qui lira votre code mais également pour vous. Si vous revenez 6 mois plus tard sur votre code et que vous ne comprenez rien, ce n’est pas normal.

Pour notre exemple, il est donc plus judicieux de mettre en place des variables pour éviter les doublons. Je crée donc des variables pour les éléments qui se verraient répétés dans le code de mon plugin.

Retrouvez l’intégralité du module sur le repo github pour voir les modifications.

Maintenabilité

Ça va de pair avec la lecture de votre code, vous devez faire en sorte que votre plugin soit facilement maintenable et donc prévoir d’éventuels changements futurs. Je vous conseille donc mettre autant de variables et de constantes que possible pour éviter de devoir modifier 20 fichiers quand vous devez apporter une modification.

Découpez également votre code dans différents fichiers pour que chaque fichier est son utilité. Ça peut paraître évident pour certains mais je vois encore trop de modules avec tout dans un seul et même fichier et c’est illisible. Pour afficher du contenu par exemple, préférez des templates séparés plutôt que des echo à gogo dans votre fichier .php

Pour notre exemple, il est donc plus judicieux de charger un template pour afficher le contenu de notre page.

Retrouvez l’intégralité du module sur le repo github pour voir les modifications.

Je vous recommande également de mettre votre plugin sur un repo git afin de le maintenir plus facilement et garder un historique des modifications. Cela vous permettra également de mieux gérer vos mises à jour.

Évolutivité

Lorsque vous développer votre module, pensez aux utilisateurs qui vont utiliser votre solution et aux développeurs qui souhaiteraient faire des modifications sans toucher à votre code. Pour palier à ça, il est vivement conseillé de mettre en place des hooks comme WordPress le fait dans son core. C’est très simple et ça permet de modifier des paramètres ou des comportements directement depuis un autre module ou depuis le thème.

Imaginons que votre module lance une tâche récurrente, vous pourriez par exemple mettre un hook de type filter sur la durée entre chaque exécution.
Pour cela, je vous invite à vous rendre sur la documentation de la fonction do_action et apply_filters

Rétroactivité

De la même façon que WordPress le fait, il est recommandé de faire en sorte que votre module reste fonctionnel avec d’anciennes versions dans le cas ou vous feriez des modifications sur votre module. Pensez donc à la rétroactivité.

Sécurité

On ne le dira jamais assez mais la sécurité de vos modules est primordiale ! L’utilisateur qui installera votre module sur son site internet fait confiance à votre professionnalisme pour faire tout pour éviter les failles de sécurité, notamment si vous interagissez avec la base de données. par exemple, les appels à MySQL ne doivent pas être faits n’importe comment sous peine d’attirer les personnes malveillantes ? .

Traduire votre module WordPress dans différentes langues

Dernière étapes importante dans la création de module, la traduction.
En effet, il est d’usage que vos développements soient réalisés en anglais.
Cependant, il est intéressant et fort apprécié que votre module soit également disponible dans plusieurs langues. Pour cela, WordPress bénéficie d’un système d’internationalisation très facile à mettre en place.

Il vous suffit de créer un dossier /languages à la racine de votre projet et de créer un fichier .po portant le nom de votre module suivi de -[LANGUAGE_CODE] ce qui donnera my-awesome-plugin-fr_FR.po pour notre module dans le cas d’une traduction en français.

Ajoutez ceci dans le fichier :

GetText PO

                    msgid ""
msgstr ""
"Project-Id-Version: My Awesome Plugin\n"
"POT-Creation-Date: 2020-05-03 15:37+1000\n"
"PO-Revision-Date: 2020-06-07 12:06+0200\n"
"Last-Translator: John Doe <john@doe.fr>\n"
"Language-Team: Awesome Team <john@doe.fr>\n"
"Language: fr\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"X-Generator: Poedit 2.2\n"
"X-Poedit-Basepath: ..\n"
"X-Poedit-WPHeader: my-awesome-plugin.php\n"
"Plural-Forms: nplurals=6; plural=(n==0 ? 0 : n==1 ? 1 : n==2 ? 2 : n%100>=3 && n%100<=10 ? 3 : n%100>=11 && n%100<=99 ? 4 : 5);\n"
"X-Poedit-SourceCharset: UTF-8\n"
"X-Poedit-KeywordsList: __;_e;_n:1,2;_x:1,2c;_ex:1,2c;_nx:4c,1,2;esc_attr__;esc_attr_e;esc_attr_x:1,2c;esc_html__;esc_html_e;esc_html_x:1,2c;_n_noop:1,2;_nx_noop:3c,1,2;__ngettext_noop:1,2\n"
"X-Poedit-SearchPath-0: .\n"
"X-Poedit-SearchPathExcluded-0: *.js\n"

msgid "My Awesome Plugin"
msgstr "Ma magnifique extension"

Ça peut sembler barbare mais ce sont des en-têtes de configuration.
En les parcourant, vous voyez qu’elles contiennent des informations relatives à notre module ainsi que la langue que l’on souhaite traduire.

Les deux dernière lignes représentent notre première traduction de l’anglais vers le français.

Cependant, ce fichier ne sera pas lu par WordPress, le CMS lit des fichiers .mo, qui sont des fichiers compilés depuis les .po.
Pour compiler votre fichier, vous pouvez utiliser le logiciel Poedit. Une fois téléchargé, ouvrez votre fichier précédemment créé puis faites Fichier > Compiler le MO. Il va créer un fichier .mo dans le dossier languages contenant votre fichier de traduction .po.

Une fois que votre fichier .mo est prêt, vous devez indiquer à votre module que des fichiers de traductions existent. Pour cela, ajouter le code suivant dans votre plugin.

Ce code dans le __construct puis la méthode dans la classe :

PHP

                    // Dans la méthode __construct
add_action( 'plugins_loaded', [$this, 'load_plugin_text_domain'] );

// Dans la classe
public function load_plugin_text_domain() 
{ 
	load_plugin_textdomain( $this->pluginIdentifier, FALSE, dirname( plugin_basename( __FILE__ ) ) . '/languages/' ); 
}

Une fois que c’est fait, vous devriez voir votre traduction dans le back-office du site. Si ce n’est pas le cas, désactiver puis réactiver votre module.

Conclusion

Vous avez créé votre premier module WordPress, alors c’était compliqué ?
A vous de laisser place à votre imagination pour créer de nombreux autres modules, qui auront surement plus d’utilité que celui là 😀

N’hésitez pas à parcourir la documentation officielle de WordPress pour obtenir de plus amples informations sur la création d’extension WordPress.

Si vous avez des questions quant à la création de module, n’hésitez pas à me contacter sur Linkedin, Instagram ou par email.