Web Development: How to Add Custom CSS to Your WordPress Site

How to Add Custom CSS to Your WordPress Site

The WordPress ecosystem is huge, so it can be a challenge to find the perfect theme to match your brand in every respect. A good starting point is by browsing the thousands of high-quality WordPress themes on ThemeForest.

However, it frequently happens that you find an almost perfect design but you still want to tweak it a little—or a lot. Although most WordPress themes come with built-in options that let you modify basic things such as typography and colors, sometimes you want to make bigger changes. This is when you need to add custom CSS to your WordPress site.

In this tutorial, we'll look at four techniques for adding custom CSS to WordPress:

using the Customizer
with a plugin
editing the style.css file of your child theme
editing the functions.php file of your child theme

The first two techniques don't require you to create a child theme. You can do everything from your WordPress admin, without touching the source files or connecting to your server via (s)FTP. Both are excellent methods that allow you to quickly add custom CSS rules to your site.

However, if you want to make significant changes, it can be a good idea to create a child theme—even if it takes more work to set it up. Besides directly adding custom CSS rules to your WordPress theme, you can also safely enqueue external CSS files with the help of a child theme.

WordPress

How to Create a WordPress Child Theme

Rachel McCollin

1. Add Custom CSS to WordPress Via the Customizer

When you add custom CSS to your WordPress site via the Customizer, your custom CSS will be tied to your theme. You can keep the customizations as long as you are using the same theme. Your modifications won't be deleted when you update the theme, either. However, when you switch to a new theme, your additional CSS rules will be lost. (If you want to add theme-independent CSS to your WordPress site, you will need to use a plugin.)

You can open the Customizer by clicking the Appearance > Customize menu in the left sidebar of your WordPress admin area.

As the Customizer shows a live preview of your site, you can immediately see the changes you are making. For example, here's how it looks like with the Twenty Twenty theme:

You can see the Customizer sidebar on the left of the screen. Here, navigate to the last menu item called Additional CSS. This is where you can insert the custom CSS you want to add to your theme. You only need to type your style rules into the text area below the instructions:

Say you want to change the font-size property of the headline. By default, the theme options of Twenty Twenty don't allow you to do that. The easiest way to find out which CSS rule you need to override is by using your browser's developer tools. Right-click the headline and choose the Inspect or Inspect Element option (depending on your browser) to open your DevTools' inspector right at the headline element:

The inspector tool will show you that the Twenty Twenty theme uses the following style rule to control the font-size of the headline:

@media ( min-width: 700px ) {
    h1,
    .heading-size-1 {
        font-size: 6.4rem;
    }
}

As most DevTools also show the file name and line number (style.css – line 4716 on the image below) of every style rule, you can also open the CSS file in your code editor and check out the exact code.

Now, you can override the font-size rule by inserting the same CSS rule with a different value into the Additional CSS input field, for example:

@media ( min-width: 700px ) {
    h1,
    .heading-size-1 {
        font-size: 5.2rem;
    }
}

As the Customizer shows a live preview, you can see the effect of the new rule right as you are typing it.

Note that if you want to keep your theme responsive, it's important to pay attention to media queries. You can test the theme for different screen sizes using the little device icons (desktop, tablet, mobile) at the bottom of the Customizer sidebar.

Once you've added all the custom CSS rules you wanted, you can hit the Publish button on top of the Customizer sidebar and your changes go live immediately.

2. Add Custom CSS to WordPress With a Plugin

The biggest advantage of using a custom CSS plugin is that it allows you to add theme-independent CSS to your site that you can keep when switching to a new theme. This technique can be useful when you want to modify the look of theme-independent content added by a plugin, such as an extra page, a custom post type, or a widget.

Besides, if you want to add a lot of custom CSS to your site, you might also find that a plugin's settings page and UI is more user-friendly than the tiny input field of the Customizer. On the downside, note that these plugins can slow down your site, as they add extra overhead to the page load time compared to the Customizer which is built into the WordPress Core.

In the WordPress.org plugin repo, you can find a couple of free plugins that let you add custom CSS to your WordPress site. In this tutorial, we will use Simple Custom CSS that works without any further configuration.

You can install the Simple Custom plugin from the Plugins > Add New menu of your WordPress admin area:

After installing and activating the plugin, click the Appearance > Custom CSS menu that will take you to the plugin's admin page. As Simple Custom CSS has only one input field, it's super easy to use. You only need to enter your custom CSS into the text area and hit the Update Custom CSS button.

Add custom CSS with the Simple Custom CSS plugin

3. Add Custom CSS to Your Child Theme's style.css file

If you want to significantly modify your theme's CSS, it's a reasonable thing to create a child theme and add your custom code to it. A child theme sits on top of the parent theme. It uses the same templates but lets you override any file of the parent theme—not just CSS but JavaScript, PHP, and static assets such as images too.

You can add your customizations to the child theme while the parent theme remains intact. When a new update for the parent theme is released, you can securely update it, as your custom code will be held by the child theme. However, the child theme will also inherit the updates from the parent theme, so you can have both the updates and the custom CSS at the same time.

To create a child theme, you can check out our step-by-step tutorial by Rachel McCollin. In this article, I will use a child theme of the Twenty Twenty theme that I have created following the above tutorial.

WordPress

How to Create a WordPress Child Theme

Rachel McCollin

Every child theme is required to include two files (even though you can override any other file of the parent theme if you want):

style.css for the custom CSS styles,
functions.php for the custom theme functions.

If you want to add custom CSS directly to your child theme, you need to edit style.css. Only use functions.php if you want to add an external CSS file to your child theme.

You can edit the style.css file from either your code editor such as Atom or Visual Studio Code, or the Appearance > Theme Editor menu of your WordPress admin area (see on the screenshot below).

You need to add your custom CSS rules below the top comment section that serves the purpose of notifying the WordPress Core about the presence of the child theme (so don't delete the top comment). Otherwise, you can edit style.css as any other CSS files. Whichever CSS rule you place here, it will override the corresponding CSS rule of the parent theme.

4. Enqueue an External CSS File in Your Child Theme's functions.php File

If you want to add an external CSS file to your child theme, you will need to enqueue it by editing the functions.php file so that the WordPress Core can properly call it. This technique can be useful when you want to use a third-party CSS library on your site or modularize your custom CSS code.

Say, you want to change the styles of a widget by creating a widget.css file where you can store all the widget-related CSS rules. In this case, the file structure of your child theme will look as follows:

- twentytwenty-child/
    - assets/
        - widget.css
    - functions.php
    - style.css

Besides the two required files (style.css and functions.php), you will also have an assets folder holding the widget.css file with the custom CSS code. Now, you need to edit functions.php using either your code editor or the Appearance > Theme Editor menu within your WordPress admin area.

You need to create a custom function (called tutsplus_external_styles() in the example below) in which you can register and enqueue widget.css using the wp_register_style() and the wp_enqueue_style() WordPress methods. I registered the stylesheet using the 'widget-css' handle but you can use any other name.

You also need to attach the custom tutsplus_external_styles() function to the wp_enqueue_scripts WordPress action with the help of the add_action() method.

<?php
/* Enqueues the external CSS file */
add_action( 'wp_enqueue_scripts', 'tutsplus_external_styles' );
function tutsplus_external_styles() {

    wp_register_style( 'widget-css', get_stylesheet_directory_uri().'/assets/widget.css' );
    wp_enqueue_style( 'widget-css' );

}

And, that's it—the custom widget.css file has been added to your theme. The entire functions.php file of your child theme should look as follows:

<?php
/* Enqueues the child theme - Required for the child theme */
add_action( 'wp_enqueue_scripts', 'tutsplus_parent_styles');
function tutsplus_parent_styles() {
     
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
         
}

/* Enqueues the external CSS file */
add_action( 'wp_enqueue_scripts', 'tutsplus_external_styles' );
function tutsplus_external_styles() {

    wp_register_style( 'widget-css', get_stylesheet_directory_uri().'/assets/widget.css' );
    wp_enqueue_style( 'widget-css' );

}

Wrapping Up

When you need to add custom CSS to your WordPress site, you can use four different techniques. If you don't want to touch the code base, you can add your customizations with either the Customizer or a custom CSS plugin. The latter method is recommended when you want to add theme-independent CSS to your site or make a lot of modifications without editing the source code.

You can also opt for creating a child theme for your customizations. For adding custom style rules to your child theme, you need to edit the style.css file, while for enqueuing an external CSS file, you need to edit functions.php. Before starting to add custom CSS to your WordPress site, think about what you exactly need, what purpose your customizations will serve, and choose the best technique accordingly.

The Best WordPress Themes on ThemeForest

While you can do a lot with free themes, if you are creating professional WordPress sites, eventually you will want to explore paid themes. You can discover thousands of the best WordPress themes ever created on ThemeForest. These high-quality WordPress themes will improve your website experience for you and your visitors.