A beginners guide to WordPress custom CSS

How to add custom CSS to WordPress

Now that you know the basics, it’s time to add your custom CSS to your WordPress site – here’s how:

Method 1: Using the site editor (for block themes)

If you’re using a block theme like Twenty Twenty-Five with WordPress’s Full Site Editing (FSE) capabilities, WordPress provides the site editor. 

The site editor is a powerful tool that lets you build and customize your entire site using blocks. All you need to do is:

1. Navigate to Appearance > Editor in your WordPress dashboard.

2. Click anywhere on your site’s preview to open the options on the left side.

3. Click on the Styles icon in the top-left corner.

4. Click on the options menu icon and select Additional CSS.

5. Now you can add your custom CSS snippets depending on what exactly you want to change!

💻 Note: You’ll need to find the class or ID of the specific element you want to style. You can do this by using your browser’s Developer Tools. Just open your website in a browser and go to the webpage where you want to change something (like a button, heading, paragraph, etc.). Then, right-click on the element you want to customize and select Inspect. This opens the Developer Tools pane, which will show you the HTML structure of the page, and the element you clicked on will be highlighted in the HTML code.

For example:

<button class="cta-button" id="contact-button">Contact Us</button>

Here, the class is cta-button and the ID is contact-button.

You can use either the class or ID to target that element with CSS. Classes are used when you want to target multiple elements (e.g., all buttons with the same style), while IDs are used when you want to target a unique element (e.g., only one specific button).

Method 2: Using the customizer (for classic themes)

For classic themes, the WordPress Customizer offers a user-friendly way to add custom CSS:

1. Go to Appearance > Customize in your dashboard.

2. Click on the Additional CSS section.

3. Just like in Method 1, you’ll need to find the class or ID of what you want to alter and add your custom CSS rules.

4. Use the live preview to see changes and click Publish when satisfied.

Method 3: Using WordPress plugins for CSS editing

There are several plugins available in WordPress that allow you to add custom CSS easily, without needing to interact with theme files directly. These plugins provide a simple interface for adding custom styles and can be helpful for users who want to keep everything within the WordPress dashboard and avoid coding altogether.

Here’s a general overview of how to use a WordPress CSS editing plugin:

1. Install and activate the CSS editing plugin of your choice. For this walkthrough, we’ll use the Simple Custom CSS plugin.
2. Go to Appearance > Custom CSS (or the specific plugin settings page). You will be presented with a text area where you can input your custom CSS code once you get the class and ID of the element(s) you want to modify.
3. After writing your CSS, click Save to apply the changes.

Method 4: Using a child theme and editing directly

If you’re getting serious about customizing your site – or you’re working on a client project – child themes are where it’s at.

A child theme inherits the functionality and styling of a parent theme while allowing you to make modifications without affecting the parent theme’s files. This is particularly useful when you want to make customizations that won’t be lost when the parent theme gets updated. 

Here are the steps:

1. Access your WordPress files via an SFTP client (like FileZilla) or your web host’s file manager.

⭐ If you’re hosting with Liquid Web, you’ve got tools like SFTP access, staging environments, and a file manager in your control panel to make this process safer and smoother.

2. Go to the theme directory (wp-content/themes/) and create a folder for your child theme.

3. Inside the folder, create a style.css file and a functions.php file.

4. In style.css, add the following at the top of the file.

/*
Theme Name: Your Child Theme Name
Template: parent-theme-folder-name
*/

Replace parent-theme-folder-name with the folder name of the parent theme.

5. In functions.php, enqueue both the parent and child theme styles:

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

6. Go to the WordPress dashboard, navigate to Appearance > Themes, and activate your child theme.

7. Now that the child theme is set up, add your custom CSS directly into the style.css file of the child theme.

As you can see, setting up a child theme requires some technical understanding of WordPress theme structure and basic coding. However, it’s the most reliable and long-term solution for custom CSS.