Comment ajouter un CSS personnalisé à WordPress ?

Le CSS, ou Cascading Style Sheets, est le langage utilisé pour personnaliser l’apparence d’un site web. Sur WordPress, il permet de modifier facilement le design d’un thème sans toucher directement à sa structure HTML : couleur d’un bouton, taille d’un titre, espacement entre deux blocs, largeur d’une image, affichage mobile, marges ou encore typographie.✨

Même si WordPress propose de nombreuses options de personnalisation depuis son interface, certaines modifications précises nécessitent parfois l’ajout de CSS personnalisé. ⚡Cette solution est particulièrement utile lorsque les réglages du thème ne suffisent pas ou lorsque vous souhaitez adapter un élément spécifique à votre charte graphique. Dans ce tutoriel, nous allons voir plusieurs méthodes simples pour ajouter du CSS personnalisé à WordPress, selon votre niveau et vos besoins.

Objectif

👇L’objectif de cet article est de vous expliquer comment ajouter du CSS personnalisé WordPress de manière simple, propre et durable. Vous découvrirez les principales méthodes disponibles : l’outil de personnalisation intégré à WordPress, l’utilisation d’un plugin dédié et l’ajout de CSS depuis un thème enfant. ✍Chaque méthode répond à un besoin différent. Le personnalisateur WordPress convient très bien aux modifications rapides. Les plugins peuvent être utiles si vous souhaitez centraliser plusieurs ajouts CSS ou conserver certains réglages lors d’un changement de thème. Le thème enfant, quant à lui, est recommandé pour des personnalisations plus avancées et mieux organisées. À la fin de ce guide, vous serez capable de choisir la méthode la plus adaptée à votre site WordPress.

Pré-requis

Pour suivre ce tutoriel, il est impératif de :

• Disposer de l’accès au tableau de bord WordPress en tant qu’administrateur du site sur lequel vous souhaitez ajouter un CSS personnalisé,
• Selon la méthode choisie, vous devez également maitriser l’installation de plugins WordPress ou la création d’un thème enfant WordPress.
• Effectuer une sauvegarde de votre site WordPress, surtout si vous intervenez sur un site déjà en ligne. Une erreur CSS ne casse généralement pas tout le site, mais elle peut provoquer des problèmes d’affichage : bouton invisible, bloc mal positionné, menu décalé ou affichage mobile incorrect.

Besoin d’un hébergement WordPress rapide et de qualité ?

Profitez de l'offre exclusive de LWS : hébergement WordPress en France à -42% ! Démarrez dès maintenant à partir de 3,49€/mois au lieu de 5,99€. Performance 🚀 et support exceptionnel garantis ! 😊

Découvrir l’offre

Pourquoi ajouter du CSS personnalisé sur WordPress ?

Ajouter du CSS personnalisé sur WordPress permet d’adapter l’apparence de votre site lorsque les options du thème ne suffisent pas. De nombreux thèmes proposent déjà des réglages pour changer les couleurs, les polices ou la disposition des éléments. Cependant, ces réglages restent parfois limités, notamment si vous souhaitez modifier un élément très précis.

Le CSS personnalisé peut par exemple servir à ajuster l’espace entre deux sections, modifier l’apparence d’un bouton d’appel à l’action, masquer un élément secondaire, améliorer la lisibilité d’un texte ou corriger un affichage imparfait sur mobile. C’est aussi une solution pratique pour harmoniser certaines pages avec votre identité visuelle.

Cette approche évite d’installer trop de plugins pour de petites modifications graphiques. Elle offre plus de souplesse, tout en restant légère si le code est bien organisé.

L’important est d’ajouter uniquement le CSS nécessaire, de tester les changements sur plusieurs écrans et de vérifier que vos personnalisations restent compatibles avec votre thème WordPress.

Méthodes pour ajouter du CSS personnalisé à WordPress

Méthode 1. Ajouter un CSS personnalisé à WordPress grâce à la personnalisation WordPress

La méthode la plus simple pour ajouter du CSS personnalisé à WordPress consiste à utiliser l’outil intégré au tableau de bord. Cette solution est idéale si vous souhaitez effectuer quelques ajustements visuels sans installer de plugin supplémentaire et sans modifier les fichiers de votre thème.

Chaque site WordPress dispose de la fonctionnalité par défaut de WordPress « Theme Customizer ». Il s’agit de l’une des méthodes les plus faciles pour personnaliser les feuilles de style en cascade.

Dans le tableau de bord, allez à l’onglet « Apparence », puis sur « Personnaliser ».

Cliquez sur le bouton « CSS additionnel ».

Une interface de personnalisation s’ouvrira pour que vous y intégrer votre code. Cet outil vous donnera en plus la possibilité d’avoir un aperçu de votre site, avec la version pour les appareils mobiles.

Vous pouvez ensuite coller votre code CSS personnalisé dans la zone de saisie. WordPress affiche généralement un aperçu en direct, ce qui permet de vérifier immédiatement le résultat avant de publier les modifications.

Par exemple, pour modifier la couleur des titres principaux, vous pouvez ajouter :

/* Personnalisation du thème Astra */

/* Modifier l'apparence du menu principal */
.main-header-menu .menu-link {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}

/* Ajouter un effet au survol des liens du menu */
.main-header-menu .menu-link:hover {
color: #1e73be;
}

/* Personnaliser les boutons Astra et WordPress */
.ast-button,
.button,
input[type="submit"],
.wp-block-button__link {
background-color: #1e73be;
color: #ffffff;
border-radius: 8px;
padding: 12px 24px;
font-weight: 600;
transition: all 0.3s ease;
}

/* Ajouter un effet au survol des boutons */
.ast-button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
background-color: #155a96;
transform: translateY(-2px);
}

/* Améliorer l'affichage des titres dans le contenu */
.entry-content h2 {
color: #222222;
border-left: 4px solid #1e73be;
padding-left: 12px;
margin-top: 35px;
}

/* Ajouter un style aux blocs de contenu */
.entry-content p {
line-height: 1.8;
}

/* Optimisation mobile */
@media screen and (max-width: 768px) {
.entry-content h2 {
font-size: 24px;
}

.ast-button,
.button,
input[type="submit"],
.wp-block-button__link {
width: 100%;
text-align: center;
}
}

Ce code CSS sert à personnaliser rapidement l’apparence d’un site WordPress utilisant le thème Astra. Il agit sur plusieurs éléments visibles du site : le menu principal, les boutons, les titres de niveau H2 et les paragraphes.

La première partie modifie le menu de navigation en mettant les liens en majuscules, avec une graisse plus marquée et un léger espacement entre les lettres. Elle ajoute aussi une couleur différente au survol, afin de rendre la navigation plus dynamique.

La deuxième partie personnalise les boutons du thème Astra et les boutons WordPress : couleur de fond, texte blanc, angles arrondis, espacement interne et effet de survol. Lorsqu’un visiteur passe la souris sur un bouton, celui-ci change de couleur et se décale légèrement vers le haut.

Le code améliore ensuite les titres H2 dans le contenu en ajoutant une bordure colorée à gauche, puis augmente la lisibilité des paragraphes grâce à un interligne plus confortable.

Enfin, la règle @media adapte certains styles aux écrans mobiles, notamment la taille des titres et la largeur des boutons.

Une fois le résultat validé, cliquez sur le bouton « Publier » pour appliquer le CSS à votre site.

Cette méthode est recommandée pour les modifications simples : couleur, marge, taille de texte, espacement ou personnalisation légère d’un bouton.

Elle présente toutefois une limite : le CSS ajouté reste lié au thème actif. Si vous changez de thème, vous devrez vérifier si vos personnalisations sont toujours présentes et compatibles avec le nouveau design.

Méthode 1bis : CSS par bloc (WP 7.0)

Depuis WordPress 7.0, vous pouvez ajouter du CSS personnalisé directement sur un bloc précis, depuis l’éditeur de page ou d’article. Sélectionnez le bloc à modifier, puis ouvrez les réglages du bloc dans la colonne latérale. Dans le panneau « Avancé », utilisez le champ CSS personnalisé pour saisir uniquement les déclarations CSS, sans sélecteur.

Par exemple :

background-color: #f5f5f5;
padding: 20px;
border-radius: 8px;

Le style s’applique uniquement au bloc sélectionné. Pour cibler un élément interne, utilisez &, par exemple & a { color: red; }.

Cette méthode est idéale pour personnaliser un bouton, un encadré ou une section sans plugin. Elle est disponible pour les utilisateurs ayant le droit edit_css. Pour en savoir sur cette fonctionnalité nouvellement déployée et bien plus, consultez notre guide pour découvrir toutes les nouveautés de WordPress 7.0.

Méthode 2. Ajouter un CSS personnalisé à WordPress via un plugin

L’utilisation d’un plugin est une autre solution pratique pour ajouter du CSS personnalisé à WordPress. Elle peut être intéressante si vous souhaitez gérer vos personnalisations depuis une interface dédiée, conserver une meilleure organisation ou ajouter du CSS sur certaines pages seulement.

Cette méthode convient notamment aux utilisateurs qui ne souhaitent pas modifier les fichiers du thème, mais qui veulent aller un peu plus loin que l’outil CSS additionnel de WordPress. Certains plugins permettent de séparer plusieurs blocs de code, d’activer ou désactiver des personnalisations, ou encore d’ajouter du CSS uniquement sur une page, un article ou un type de contenu précis.

Pour utiliser cette méthode, rendez-vous dans la section « Extensions > Ajouter une extension ».

Recherchez le plugin souhaité, puis installez-le et activez-le. Une fois l’extension active, un nouveau menu apparaît généralement dans l’administration WordPress. Vous pouvez alors y saisir votre CSS personnalisé et enregistrer vos modifications.

L’avantage principal d’un plugin est sa souplesse. En revanche, il est inutile d’installer une extension uniquement pour une ou deux lignes de CSS très simples. Dans ce cas, le personnalisateur WordPress suffit largement. Pour garder un site performant, mieux vaut limiter le nombre de plugins installés et conserver uniquement ceux qui apportent une vraie valeur.

Plusieurs extensions WordPress permettent d’ajouter facilement du CSS personnalisé. Plutôt que d’installer de nombreux outils, il est préférable d’en choisir un seul, fiable, simple à utiliser et adapté à votre besoin :

WP Add Custom CSS

Cet outil vous permet d’appliquer le CSS personnalisé à quelques pages de votre site WordPress ou à son ensemble. En l’installant, vous verrez un onglet dédié à WP Add Custom CSS dans votre administration.

Un éditeur CSS apparaîtra sous chaque article. Vous pourrez de ce fait modifier individuellement des articles. Si vous voulez visualiser les changements, rafraichissez votre site web WordPress.

Visual CSS Style Editor

Cet éditeur convient à tous les types de thèmes. Il est adapté aux débutants et experts. Il dispose de plus de 50 propriétés CSS, ce qui permet à son utilisateur de modifier son site/sa page selon ses convenances. De plus, les familles de polices que cet outil prend en charge dépassent la barre de 800.

Pour les adeptes de codage, Visual CSS Style Editor est l’outil idéal. Vous aurez la possibilité de le faire en direct et de personnaliser à la fois votre feuille de style.

SiteOrigin CSS

Bien qu’il soit gratuit, SiteOrigin CSS possède de nombreuses options. Grâce à ce plugin interactif, vous pourrez ajouter votre feuille de style personnalisée à WordPress.

Vous devez l’installer pour y accéder. Dans l’onglet « Apparence », cliquez sur « CSS personnalisé ». Vous verrez apparaître un éditeur muni de plusieurs outils intégrés vous permettant de modifier chaque partie de votre site. Faire votre codage manuellement vous est également possible.

Simple CSS

Grâce à cette extension, vous pouvez laisser vos marques en modifiant la feuille de style de votre thème WordPress. Même après changement de thème, les changements apportés seront conservés. Suite à son activation, vous verrez  « Simple CSS » s’afficher dans la section « Apparence ». Méthode simple et efficace, vous devez juste saisir le code dans l’éditeur et d’enregistrer.

Pour voir les modifications, rafraîchissez le site web WordPress.

Simple Custom CSS and JS

Parmi les plus populaires, Simple Custom CSS and JS permet d’ajouter non seulement des feuilles de style personnalisées, mais aussi des JS personnalisés. Grâce à l’éditeur, les syntaxes peuvent être en couleur. Après son installation, le menu « Custom CSS and JS » apparaîtra dans votre barre d’administration WordPress. Un seul clic et vous serez amené à la page où vous trouverez des codes déjà ajoutés.

Pour ajouter votre code CSS personnalisé, il suffit de cliquer sur le bouton « Ajouter du code CSS ». Simple Custom CSS and JS est disponible en version gratuite, mais aussi en pro pour permettre à ses utilisateurs de bénéficier de plus de fonctionnalités.

Besoin d’un hébergement WordPress rapide et de qualité ?

Profitez de l'offre exclusive de LWS : hébergement WordPress en France à -42% ! Démarrez dès maintenant à partir de 3,49€/mois au lieu de 5,99€. Performance 🚀 et support exceptionnel garantis ! 😊

Découvrir l’offre

Méthode 3. Ajouter un CSS personnalisé à WordPress à partir d’un thème enfant

Le thème enfant est une solution plus avancée, mais très utile pour ajouter du CSS personnalisé de manière durable. Un thème enfant reprend le design et les fonctionnalités du thème parent, tout en vous permettant de modifier certains fichiers sans toucher directement au thème principal. Si vous n’en avez pas encore, commencez par créer un thème enfant WordPress avant de continuer à lire ce guide.

Cette méthode est particulièrement recommandée si vous prévoyez d’ajouter plusieurs personnalisations CSS ou si vous travaillez sur un site professionnel. En effet, lorsque le thème parent est mis à jour, vos modifications ajoutées dans le thème enfant sont conservées. Cela évite de perdre votre travail après une mise à jour du thème.

Une fois votre thème enfant créé et activé, vous pouvez ajouter votre CSS personnalisé dans son fichier style.css. Par exemple :

/*
Theme Name: Mon thème enfant
Template: nom-du-theme-parent
*/

.site-title {
font-size: 32px;
color: #222222;
}

Dans cet exemple, le CSS modifie l’apparence du titre du site. Vous pouvez ajouter vos règles sous les informations du thème enfant, en veillant à garder un code propre et lisible.

Le thème enfant demande un peu plus de méthode qu’un plugin ou que le personnalisateur WordPress. Il est donc préférable de l’utiliser si vous êtes à l’aise avec les fichiers du thème ou si vous êtes accompagné par un développeur. Pour de simples ajustements visuels, l’outil CSS additionnel reste souvent plus rapide.

Quelle méthode choisir pour ajouter du CSS personnalisé ?

Le choix de la méthode dépend surtout de votre niveau technique et du type de modification à effectuer. Pour un ajustement rapide, comme changer une couleur ou modifier une marge, le personnalisateur WordPress reste la solution la plus simple. Pour une gestion plus avancée, un plugin peut être plus pratique. Enfin, pour un site professionnel avec plusieurs personnalisations durables, le thème enfant est souvent la méthode la plus propre.

Pour la majorité des utilisateurs, la rubrique CSS additionnel suffit. Le plugin devient utile si vous souhaitez mieux organiser votre code. Le thème enfant est recommandé pour les personnalisations avancées ou les projets web plus structurés.

Bonnes pratiques avant d’ajouter du CSS personnalisé WordPress

Avant d’ajouter du CSS personnalisé à WordPress, il est important de prendre quelques précautions. Même si le CSS ne modifie pas directement le contenu de votre site, une règle mal écrite peut perturber l’affichage d’une page, d’un menu ou d’un bouton.

Commencez toujours par sauvegarder votre site, surtout si vous travaillez sur un site en production. Si possible, testez vos modifications sur un environnement de préproduction avant de les appliquer au site public. Cela permet d’éviter les mauvaises surprises pour vos visiteurs.

Pensez aussi à organiser votre CSS avec des commentaires clairs. Par exemple :

/* Personnalisation des boutons principaux */
.button-primary {
  background-color: #1e73be;
  border-radius: 6px;
}

Après chaque modification, vérifiez le rendu sur ordinateur, tablette et mobile. Certains styles peuvent très bien fonctionner sur grand écran, mais poser problème sur smartphone.

Enfin, si vos changements ne s’affichent pas immédiatement, pensez à vider le cache de votre navigateur, de votre plugin de cache ou de votre hébergement. Un ancien fichier CSS peut parfois continuer à être chargé temporairement.

Besoin d’un hébergement WordPress rapide et de qualité ?

Profitez de l'offre exclusive de LWS : hébergement WordPress en France à -42% ! Démarrez dès maintenant à partir de 3,49€/mois au lieu de 5,99€. Performance 🚀 et support exceptionnel garantis ! 😊

Découvrir l’offre

Conclusion

Ajouter du CSS personnalisé à WordPress est une solution efficace pour adapter le design de votre site sans modifier toute sa structure. Selon vos besoins, vous pouvez utiliser la rubrique CSS additionnel intégrée à WordPress, installer un plugin dédié ou passer par un thème enfant pour des personnalisations plus avancées. ✨Pour de petites modifications, le personnalisateur WordPress reste la méthode la plus simple et la plus rapide. Pour mieux organiser plusieurs règles CSS, un plugin peut être utile. Pour un projet durable, le thème enfant offre davantage de contrôle.

🙂

Avez-vous ajouté du CSS personnalisé à votre site WordPress ? Si oui, quelle méthode avez-vous utilisée ?