Adding Custom CSS in WordPress: Complete Guide

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 Additional CSS. A text box will appear where you can enter your CSS code.

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

4. Preview and Publish
   • You’ll see a live preview of changes. Once you’re happy, click Publish.

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
   • In Appearance > Theme File Editor, select your child theme’s style.css file.

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. Save Changes
   • Click 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.
• WPCode: Adds CSS site-wide or per page.
• SiteOrigin CSS: Visual editor for beginners.

Example Using WPCode:

1. Install WPCode
   • Go to Plugins > Add New Plugin, search for WPCode, install, and activate.

2. Create a New CSS Snippet
   • Head to Code Snippets > Add Snippet. Choose CSS Snippet.

3. Choose 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 Advanced Settings
   • In Elementor, select an element, go to Advanced settings, and find Custom CSS (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
   • Navigate to 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.

Steps:

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.

Frequently Asked Questions

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.