How to Add Additional CSS in the WordPress Customizer
WordPress is a Content Management System (CMS) that is open source and highly customizable with a knowledge of CSS and how to add it in Customize -> Additional CSS.
Many of my clients know WordPress well. A few of my clients know more about WordPress than I know! Since I know how to code and they don’t know how to code, my role is to support them with custom coding in WordPress. Most of this work is in CSS, but some is in PHP.
A premium WordPress theme has a lot of settings. One of the first tasks with a WordPress website is to know the theme well and all of its Customize settings. However, not everything can be fixed with Customize in WordPress. What I do is add CSS to make everything look they way my client wants it to look. I generally follow this process when there is a desired design change
Step 1. Attempt to make the requested design change in the theme settings or with Edit Page or Post. With a premium theme and perhaps a page builder, most design changes can be made with settings.
Step 2. After I have ruled out that the design change can’t be made in the settings, then I add CSS in Customize -> Additional CSS.
Some changes require changes to the PHP Scripts for the website, and that is a bit of a different topic, and requires at least a cursory knowledge of PHP. This post is about Step 2; in other words, how to add CSS to WordPress in order to meet the design requirements.
Customize -> Additional CSS
WordPress makes it fun to add CSS, because there is a WYSIWYG (What You See Is What You Get) in Customize. Simply go to Customize->Additional CSS, and there you can write CSS for the entire website. But before you can write the CSS, you need to know what CSS you want to override.
An important piece of background is that a WordPress website is a complicated beast. There can be CSS from the theme, from the theme settings, and each plugin can add some CSS. With that in mind, the only way you can override the CSS in a WordPress website is to know exactly the CSS you are trying to override. You can see that in the Chrome Inspector.
Set up your Workspace
Start by setting up your workspace, so you can see both the Additional CSS in Customize and the Chrome Inspector. Attached is a screenshot of how I work on CSS in WordPress when I have only one monitor. First, I need to know what CSS I am trying to edit, and I need the Inspector to help me find that. Then, I write the CSS in the Additional CSS area.
As you can see in the screenshot above, I have set the inspector on the post title. You “set” the Inspector by right-clicking on the item you want to see in the inspector. As you can see in the Inspector the title is an <h1> and it has a class of .fl-post-title.
Say I want to add some margin (white space) above the title. I could select the <h1>, but that would affect every page on the website. Since I only want more space on the post titles, it would probably be better to select .fl-post-title. Here is the code for that:
.fl-post-title{
margin-top: 30px;
}As soon as I place that code into the Additional CSS, WordPress shows me the change even before I publish it! It’s a true WYSIWYG. I added a pink background to make the change more obvious.
As you can see, the CSS I added in the Additional CSS not only show up on the display, but also in the Chrome Inspector.
Additional CSS Overrides Existing CSS
Remember the “Cascading” part of CSS? When you want to add CSS to a website that already has a lot of CSS, your goal is to override the existing CSS. Not every change is as straight forward as this example, so sometimes you may need to make your CSS more specific in order to override the CSS.
The CSS that you add in Customize has a high priority in the cascading because it will be placed into the <head> of the website as embedded CSS. Embedded CSS prioritizes higher in the cascade than CSS that is adding in separate stylesheets.
If your CSS doesn’t override the existing CSS, this is what you can do:
- Check to make sure you see your CSS in the Inspector. If you don’t see it, you probably have a typo in your CSS.
- Make your CSS more specific by adding an additional selector. For example, if your CSS didn’t win, then try selecting h1.fl-post-title, or .fl-post-header .fl-post-title.
- Add “!important” after your property-value. Only use “!important” as a last resort, because it is very difficult to override if you ever need to.
Interested in Learning CSS?
About 40% of the world’s websites are made with WordPress, so learning HTML and CSS are great skills for your resume. There is a need for developers who can edit WordPress designs with CSS.
There are many ways to learn HTML and CSS. I primarily learned it from Codecadamy.
I have a course on this website that you could consider. It uses some of the same materials that I provide to my students at Saint Paul College. You could consider signing up for the Web Fundamentals class (CSCI1450), which is taught in person, online, and on Zoom.
If you need help with a CSS problem, you can reach out to me at susan.metoxen@saintpaul.edu.