🎨 Comment ajouter des styles personnalisés à l'éditeur visuel de WordPress

L’ensemble standard des boutons de mise en forme dans l’éditeur WordPress est familier à tout le monde: gras, italique, listes, citations. Mais lorsque vous devez insérer régulièrement un bouton d’une couleur spécifique, un bloc d’avertissement ou une légende d’image dans un cadre aux couleurs de la marque, la routine s’installe en force. À chaque fois: basculer en mode texte, écrire style="", copier des classes depuis un pense-bête. Un bouton est ressorti en bleu, un autre en bleu clair. Un bloc avec une ombre, un autre sans.

Le problème n’est pas l’absence d’outils, mais le fait que le menu déroulant «Formats» de TinyMCE est masqué par défaut. Et même si vous l’activez, il est vide: WordPress ne sait pas quels styles vous souhaitez utiliser. Mais vous pouvez les y ajouter.

Il existe trois approches: par le code dans functions.php, par une extension avec un constructeur visuel, et par le mécanisme natif de l’éditeur de blocs register_block_style(). Toutes les trois fonctionnent et couvrent des scénarios différents: du contrôle manuel de chaque pixel au «cliqué et appliqué».

💡 Aperçu rapide:

• Nous activons le menu déroulant «Formats» dans l’éditeur classique avec le filtre mce_buttons_1 et le remplissons avec nos propres styles via tiny_mce_before_init, avec le code pas à pas à l’intérieur.
• Nous créons editor-style.css pour un aperçu en direct directement dans l’éditeur: un bouton ressemble à un bouton avant même la publication.
• Nous installons TinyMCE Custom Styles, un constructeur graphique de formats sans toucher au code, avec génération automatique de fichiers CSS.
• Nous examinons la voie native pour Gutenberg: enregistrer des variations de blocs via register_block_style(), connecter les styles via theme.json ou wp_add_inline_style().

Ce que sont les styles personnalisés et pourquoi vous en avez besoin

Un style personnalisé est une présélection CSS que vous appliquez à un fragment sélectionné via le menu déroulant de l’éditeur. Au lieu d’envelopper un paragraphe dans <span style="..."> pour la centième fois, vous choisissez «Surbrillance» dans le menu «Formats» et obtenez un surlignage jaune avec des coins arrondis. En un clic.

Trois raisons de configurer cela une fois pour toutes:

• Cohérence. Tous les boutons, avertissements et légendes ont le même aspect d’une publication à l’autre. Le design ne dérive pas.
• Rapidité. L’éditeur ne fouille pas dans le CSS et ne copie pas de classes magiques depuis un bloc-notes, il appuie simplement sur un bouton.
• Sécurité. Personne n’écrase accidentellement le balisage par des styles en ligne en mode texte.

Scénarios typiques: bouton d’appel à l’action (theme-button), bloc «Important» avec icône et bordure colorée, liste à puces avec coches, légende d’image dans un style de marque, surlignage de code à l’intérieur d’un paragraphe.

Méthode 1: Par le code, via functions.php et editor-style.css

La voie pour ceux qui n’ont pas peur d’ouvrir functions.php une fois. Résultat: le menu déroulant «Formats» apparaît dans la barre d’outils de TinyMCE, et à l’intérieur se trouvent vos propres styles. Dix lignes de PHP, un fichier CSS, zéro extension superflue.

Étape 1. Activer le bouton «Formats»

Par défaut, la liste déroulante des formats styleselect est masquée. Ce filtre la replace sur la première ligne de l’éditeur. Placez le code dans le functions.php du thème actif ou, plus correctement, du thème enfant:

1
function myprefix_mce_buttons_1( $buttons ) {
2
    array_unshift( $buttons, 'styleselect' );
3
    return $buttons;
4
}
5
add_filter( 'mce_buttons_1', 'myprefix_mce_buttons_1' );

Le hook mce_buttons_1 ajoute le bouton à la première ligne de la barre d’outils. Si vous préférez la deuxième ou la troisième, utilisez mce_buttons_2 ou mce_buttons_3.

Une fois functions.php sauvegardé, ouvrez n’importe quel article, un menu déroulant «Formats» est apparu dans la rangée supérieure à gauche. Encore vide pour le moment.

Étape 2. Enregistrer vos propres styles

Remplissons maintenant le menu avec des formats concrets. Ajoutez un second filtre dans le même functions.php:

1
function myprefix_add_format_styles( $init_array ) {
2
    $style_formats = array(
3
        array(
4
            'title'    => __( 'Theme Button', 'text-domain' ),
5
            'selector' => 'a',
6
            'classes'  => 'theme-button',
7
        ),
8
        array(
9
            'title'    => __( 'Highlight', 'text-domain' ),
10
            'inline'   => 'span',
11
            'classes'  => 'text-highlight',
12
        ),
13
    );
14
    $init_array['style_formats'] = json_encode( $style_formats );
15
    return $init_array;
16
}
17
add_filter( 'tiny_mce_before_init', 'myprefix_add_format_styles' );

Ce que signifient les paramètres de chaque élément:

• title, le nom que l’éditeur verra dans le menu déroulant.
• selector, la balise HTML à laquelle le style est appliqué. 'a' signifie que «Bouton du thème» ne fonctionnera que sur les liens.
• inline, enveloppe le texte sélectionné dans une balise (généralement span) avec la classe spécifiée. Parfait pour mettre en évidence un mot ou une phrase à l’intérieur d’un paragraphe.
• classes, classe CSS (ou classes séparées par un espace) ajoutée à l’élément.

Ajoutez vos propres éléments au tableau en suivant le même modèle. La liste complète des paramètres acceptés se trouve dans la documentation TinyMCE sur developer.wordpress.org.

Étape 3. Écrire le CSS pour le frontend

Le menu est rempli, mais le navigateur ne sait pas encore à quoi ressemble .theme-button. Ajoutez le CSS à la feuille de style du thème (ou du thème enfant):

1
.theme-button {
2
    display: inline-block;
3
    padding: 10px 15px;
4
    color: #fff;
5
    background: #1796c6;
6
    text-decoration: none;
7
}
8
.theme-button:hover {
9
    text-decoration: none;
10
    opacity: 0.8;
11
}
12
.text-highlight {
13
    background: #FFFF00;
14
}

Après sauvegarde, le bouton est stylisé sur le frontend. Mais dans l’administration, l’éditeur ne l’affiche pas encore.

Étape 4. Ajouter editor-style.css pour l’aperçu dans l’éditeur

Pour afficher les styles directement dans l’éditeur visuel avant la publication, vous avez besoin d’un fichier editor-style.css séparé. WordPress peut le prendre en charge:

1
function myprefix_theme_add_editor_styles() {
2
    add_editor_style( 'editor-style.css' );
3
}
4
add_action( 'init', 'myprefix_theme_add_editor_styles' );

Créez un fichier editor-style.css à la racine du thème et copiez-y le CSS de l'étape 3. Si vous travaillez avec le thème de quelqu'un d'autre, créez ce fichier dans le thème enfant: WordPress vérifiera d'abord le thème enfant et, trouvant editor-style.css à cet endroit, le chargera à la place de celui du thème parent.

Résultat: texte sélectionné, choix de «Highlight», le surlignage jaune est immédiatement visible dans l'éditeur. Clic sur un lien, choix de «Theme Button», il se transforme en bouton bleu.

Méthode 2: le plugin TinyMCE Custom Styles, sans toucher au code

Si vous ne voulez pas modifier functions.php mais avez besoin de styles, il existe un plugin prêt à l'emploi. Il fait la même chose via une interface visuelle dans l'administration.

Installez et activez TinyMCE Custom Styles. En juin 2026, le plugin compte plus de 8 000 installations actives et prend en charge le bloc Gutenberg classique depuis la version 1.1.1. La dernière mise à jour (v1.1.5, juin 2024) a corrigé des vulnérabilités. L'auteur, Tim Reeves, cherche ouvertement un successeur, mais le code est stable: le plugin ne dépend d'aucune ressource externe et ne touche pas à la base de données au-delà de sa propre table d'options.

Le plugin apparaît dans la liste générale des plugins installés. Assurez-vous qu'il est activé avant de passer à la configuration.

Après activation, allez dans Réglages → TinyMCE Custom Styles. Le premier écran vous propose de choisir où stocker les fichiers CSS. Je recommande la troisième option: créer un dossier séparé (par exemple tinymce-styles) dans wp-content/uploads. Cela protégera les styles lors de la mise à jour du thème ou du plugin lui-même. Cliquez sur «Enregistrer les modifications».

Le premier écran affiche trois options d'emplacement pour le CSS. Choisissez la troisième et définissez un nom de dossier, par exemple tinymce-styles.

Faites défiler la page vers le bas et cliquez sur «Ajouter un nouveau style». Un constructeur s'ouvre dans lequel vous définissez:

• Titre, le nom dans le menu déroulant (par exemple «Gros bouton bleu»).
• Type, basé sur un sélecteur (s'applique à une balise spécifique), en ligne (enveloppe dans un span) ou bloc.
• Classes et propriétés CSS, directement dans l'interface, sans fichiers.

Après avoir enregistré les paramètres, cliquez sur «Ajouter un nouveau style» en bas de la page. Un constructeur s'ouvre avec des champs pour le titre, le type et les propriétés CSS.

Enregistrez, ouvrez n’importe quel article et repérez le menu déroulant «Formats» dans la deuxième barre d’outils. Le nouveau style est déjà présent. Sélectionnez du texte, choisissez-le, il s’applique instantanément.

L’avantage de cette extension: les fichiers CSS (editor-style.css et editor-style-shared.css) sont créés automatiquement dans le dossier choisi. Vous les récupérez via FTP, les modifiez dans un éditeur confortable et les renvoyez sur le serveur, sans toucher une seule ligne du fichier functions.php.

Méthode 3: register_block_style(), la voie native pour Gutenberg

Les deux méthodes précédentes fonctionnent dans l’éditeur classique TinyMCE et son bloc Classic au sein de Gutenberg. Mais si vous travaillez exclusivement dans l’éditeur de blocs, il existe un chemin plus direct: register_block_style().

Cette fonction enregistre une variation de style pour un bloc spécifique, bouton, titre, citation, groupe. La variation apparaît dans le panneau latéral du bloc, et l’éditeur l’applique en un clic.

Exemple: ajoutons une variation «Fantaisie» à un bouton avec un fond jaune et des coins arrondis:

1
function myprefix_register_block_styles() {
2
    register_block_style(
3
        'core/button',
4
        array(
5
            'name'  => 'fancy',
6
            'label' => __( 'Fancy', 'text-domain' ),
7
        )
8
    );
9
}
10
add_action( 'init', 'myprefix_register_block_styles' );

Le CSS est connecté soit via theme.json (pour les thèmes blocs modernes), soit via wp_add_inline_style():

1
.is-style-fancy .wp-block-button__link {
2
    background-color: #f0c040;
3
    color: #fff;
4
    border: none;
5
    border-radius: 15px;
6
    padding: 10px 20px;
7
}

Cette approche ne dépend pas de TinyMCE et fonctionne nativement dans Gutenberg. Pour les thèmes avec theme.json (tous les thèmes blocs modernes), les styles peuvent être décrits directement dans la section styles.blocks, sans une seule ligne de PHP.

⁉️🤔 Questions fréquentes

Les formats ne s’affichent pas dans l’éditeur. D’où vient le problème?

Tout d’abord, allez dans Réglages → Advanced Editor Tools et vérifiez que le bouton «Formats» n’a pas été retiré de la barre d’outils. AET intercepte le contrôle des rangées de boutons, et votre filtre mce_buttons_1 peut être ignoré tant que vous n’ajoutez pas explicitement le bouton via l’interface du plugin. Vérifiez également que le filtre mce_buttons_1 est bien enregistré et renvoie un tableau contenant l’élément 'styleselect'. Videz le cache du navigateur et le cache serveur, souvent le problème ne vient que de là.

Puis-je lier un style à plusieurs sélecteurs à la fois?

Oui. Au lieu de la chaîne 'selector' => 'a', passez un tableau: 'selector' => 'a, button, span'. TinyMCE appliquera le style à la première balise parente correspondante de la liste. En pratique, c’est utile lorsqu’un même style visuel doit fonctionner à la fois sur des liens et sur des boutons <button>. L’ordre dans le tableau a son importance: si le texte sélectionné se trouve dans un lien imbriqué dans un div, et que les sélecteurs indiquent 'div, a', le style s’appliquera au div, pas au a. Placez les sélecteurs les plus spécifiques en premier.

Quelle est la différence entre editor-style.css et editor-style-shared.css?

Le plugin TinyMCE Custom Styles crée deux fichiers. editor-style.css se charge uniquement dans l’éditeur TinyMCE. editor-style-shared.css se charge à la fois dans l’éditeur et sur le frontend, les styles qu’il contient sont visibles par les visiteurs du site. Si un style n’est nécessaire que pour le confort d’édition, placez-le dans editor-style.css. Si le style doit fonctionner sur le site, dans editor-style-shared.css. Avec l’approche manuelle, l’équivalent du fichier partagé est la feuille de style principale du thème, et editor-style.css (un fichier séparé enregistré via add_editor_style()) n’affecte que l’aperçu dans TinyMCE.

Est-il obligatoire de créer un thème enfant pour ces modifications?

Non, le code fonctionne aussi dans le functions.php du thème principal. Mais lors de la prochaine mise à jour du thème, toutes les modifications seront écrasées. La règle est simple: toute personnalisation via functions.php passe par un thème enfant, c’est une assurance contre la perte de vos changements. Si vous n’avez pas encore de thème enfant, créez-le en dix minutes en suivant le guide sur les thèmes enfants: deux fichiers, style.css avec un en-tête et functions.php avec l’import des styles du parent, et vos formats personnalisés survivront à toute mise à jour.

Le plugin n’a pas été mis à jour depuis 2024. Dois-je l’installer?

En juin 2026, le plugin TinyMCE Custom Styles reste présent dans le catalogue WordPress.org avec plus de 8 000 installations actives. L’auteur cherche ouvertement un repreneur, mais le code n’est pas abandonné: la dernière mise à jour (v1.1.5, juin 2024) a corrigé des vulnérabilités. Le risque existe, mais il est maîtrisable: le plugin ne tire pas de dépendances externes et ne fouille pas profondément dans la base de données. Si à l’avenir le plugin cesse d’être mis à jour, vous pourrez toujours transférer les styles vers la méthode manuelle (étapes 1 à 4 ci-dessus) sans perdre le CSS. Une alternative avec un développement actif, Advanced Editor Tools (AET) d’Automattic, mais son option «Create CSS classes menu» encombre souvent le menu avec des classes inutiles. TinyMCE Custom Styles donne un contrôle manuel sur chaque élément, ils ne sont donc pas concurrents mais plutôt complémentaires.

Code, plugin ou blocs: que choisir selon votre scénario

Le choix se résume à deux questions: dans quel éditeur vous travaillez et si vous êtes prêt à ouvrir functions.php une fois.

Vous travaillez dans l’éditeur classique ou le bloc Classic de Gutenberg et vous n’avez pas peur du code, adoptez la méthode 1. Dix lignes de PHP, un fichier CSS, un contrôle total.

Vous voulez un constructeur visuel de formats sans toucher au code et avec une génération CSS automatique, installez TinyMCE Custom Styles. Gardez en tête le risque de support à long terme, mais à ce jour le plugin tient ses promesses.

Vous vivez dans l’éditeur de blocs, maîtrisez register_block_style(). Cette voie est native pour Gutenberg, ne dépend pas de TinyMCE et est prise en charge par le cœur de WordPress.

Dans les trois scénarios, vous obtenez l’essentiel: une mise en forme en un clic au lieu de copier manuellement des classes et des styles en ligne. Et cela représente une heure ou deux de temps gagné par mois sur tout site publié régulièrement.