fbpx

Select Page

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:

  1. using the Customizer
  2. with a plugin
  3. editing the style.css file of your child theme
  4. 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.

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 what 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 Inspector 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:

As most DevTools also show the file name and line number of every style rule (style.css – line 4716 in the image below), 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:

As the Customizer shows a live preview, you can see the effect of the new rule 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 want, you can hit the Publish button at the 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, which works without any further configuration. 

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

After installing and activating the plugin, click the Appearance > Custom CSS menu, which 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.

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 idea 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 by following the above tutorial.

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

  1. style.css for the custom CSS styles
  2. 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 the screenshot below). 

You need to add your custom CSS rules below the top comment section, which 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 like any other CSS file. 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:

Besides the two required files (style.css and functions.php), you will also have an assetsfolder 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.

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:

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.cssfile, while for enqueuing an external CSS file, you need to edit functions.php. Before you start to add custom CSS to your WordPress site, think about what you exactly need and 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. 

Here are a few of the best-selling and up-and-coming WordPress themes available on ThemeForest for 2020.

Leave a reply

FREE DOWNLOAD

Video of the Month

⚡ Introducing Color Filters, Effects And Blend Modes For All Images, Modules, Rows and Sections ⚡

https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=50195&url=60995Our latest Divi Feature Update is live! 😍 Today we are excited to announce a full range of color filters, effects and blend modes that can be applied to any Divi image, module row or section. You are going to have a blast getting creative with these new controls.Everything inside of Divi now has Hue, Saturation, Brightness, Contrast, Invert and Sepia controls that allow you to quickly adjust the appearance of any element. These new features are the perfect way for anyone to bring their unique flare to the page, and the collection of controls really lend themselves to experimentation and exploration. Even if you don’t end up using these filters on your completed page, they are a great way to make sweeping adjustments as you explore new possibilities for your design.In addition to color filters, we have also added Blur and Opacity controls. Now you can create stunning depth-of-field effects that really bring your page to life without needing to open Photoshop or compromise the integrity of your original image. No need to use super-big transparent PNG images that take forever to load.Finally, you can also apply blend modules to any Divi element. A whole new range of effects can now be accomplished by blending layered elements, such as columns, rows and sections in creative ways. If you are looking for some inspiration, be sure to click the link below to check out some of the amazing demos created by our team!

Posted by Bonus4you on Tuesday, May 5, 2020

must have

UNLIMITED DOWNLOADS: 1,500,000+ Logos & Design Assets

All the Logos you need and many other design elements, are available for a monthly subscription by subscribing to Envato Elements. The subscription costs $16.50 per month and gives you unlimited access to a massive and growing library of 1,500,000+ items that can be downloaded as often as you need (stock photos too)!

Get unlimited downloads 2,300,000+ top quality assets

UNLIMITED DOWNLOADS: 1,500,000+ Icons & Design Assets

All the Icons you need and many other design elements, are available for a monthly subscription by subscribing to Envato Elements. The subscription costs $16.50 per month and gives you unlimited access to a massive and growing library of 1,500,000+ items that can be downloaded as often as you need (stock photos too)!