Custom CSS gives you control over your WordPress site’s style, letting you adjust everything from fonts and colors to layouts. Here’s a guide on how to add custom CSS to WordPress using different methods to fit your needs.

Method 1: Using WordPress’ Built-in Custom CSS Feature

WordPress has a built-in option for adding custom CSS right in the dashboard. It’s ideal for minor tweaks and beginner-friendly.

1. Access the Customizer
   • Log in and go to Appearance > Customize.

2. Select “Additional CSS”
   • In the left sidebar, click CSS supplémentaire. A text box will appear where you can enter your CSS code.

3. Add Your Custom CSS
   • Type in your code. For example:

4. Prévisualisation et publication
   • You’ll see a live preview of changes. Once you’re happy, click Publier.

Best For: Simple adjustments, no theme file edits needed.

Method 2: Using the Child Theme’s Style.css File

It’s better to use a child theme’s style.css file for more significant changes. This way, your edits stay safe even after theme updates.

1. Enable a Child Theme
   • If you still need to start using one, create or install a child theme. Plugins like Child Theme Configurator make it easy.

2. Access the Style.css File
   • En Appearance > Theme File Editor, select your child theme’s style.css fichier.

3. Add Your CSS
   • Add your custom CSS at the bottom of the file. Example:

.custom-header { background-color: #2c3e50; color: #ffffff; }
.custom-button { background-color: #e74c3c; color: #ffffff; padding: 10px 20px; border-radius: 5px; }

4. Enregistrer les modifications
   • Cliquez sur Update File to save.

Best For: Bigger style changes that should stick around after updates.

Method 3: Adding Custom CSS with a Plugin

If you’d rather avoid editing files or child themes, plugins can handle custom CSS. This is great for managing CSS across multiple pages.

• Simple Custom CSS and JS: Lightweight and easy to add CSS and JavaScript.
• Code WPC: Adds CSS site-wide or per page.
• SiteOrigin CSS: Visual editor for beginners.

Example Using WPCode:

1. Install WPCode
   • Aller à Plugins > Ajouter un nouveau Plugin, recherchez Code WPC, install, and activate.

2. Créez un New CSS Snippet
   • Head to Code Snippets > Add Snippet. Choisissez CSS Snippet.

3. Choisir le placement
   • For CSS to work site-wide, select Site-Wide Header.

Best For: Easy CSS management without touching theme files.

Method 4: Adding Custom CSS via Page Builders (Elementor, Divi)

Page builders like Elementor and Divi usually have CSS options built-in, making it simple to manage styles.

In Elementor:

1. Select Element and Access Avancé Paramètres
   • In Elementor, select an element, go to Avancé settings, and find CSS personnalisé (Elementor Pro).

2. Enter CSS Code
   • Use the selector keyword to target the element. Example:

selector { background-color: #333; color: #fff; }

In Divi:

1. Go to Theme Options
   • Naviguez jusqu'à Divi > Theme Options > Custom CSS.

2. Enter and Save CSS Code
   • Add your custom CSS and save.

Best For Those already using page builders with easy access to custom CSS.

Method 5: Directly Adding CSS via FTP or Code Editor

If you’re familiar with FTP and want complete control, you can edit CSS files directly on the server.

Les étapes :

1. Connect via FTP
   • Use an FTP client (like FileZilla) to connect to your site.
2. Navigate to the Theme Folder
   • Go to wp-content/themes/your-child-theme/ and open style.css.

3. Edit and Upload
   • Add your custom CSS, save, and upload.

Best For: Advanced users needing complete control.

Questions fréquemment posées

1. Why isn’t my custom CSS working?

Clear your browser cache or any site caching plugins, as caching might be blocking updates.

2. How do I prevent CSS from being lost during updates?

Use a child theme or plugin to store CSS rather than modifying the parent theme’s files.