Additional CSS and Customization

CSS code on a computer monitor

Do you want to know how to add custom CSS to your WordPress site? It isn’t nearly as difficult as it was in the past. Back then you would add customizations to the theme’s Cascading Style Sheets (CSS). These days (and even then) this is a really bad idea. All theme updates contain updated CSS files. These new files overwrite the installed files, including any modifications added before the update. This is why the Additional CSS section is useful. WordPress version 4.7 added it to allow customization without the fear of losing it.

Before this, the best option was to use a Child Theme. The Child Theme CSS rules override the Parent Theme’s CSS rules. While they were and are used for smaller changes, especially before version 4.7, Child Themes are better for making major changes to a theme. They are also great for modifying things like templates for WooCommerce or other plugins.

What about those smaller changes now, you ask? The Additional CSS section changed how to implement that by providing a place to write CSS in the Customizer. I’ve had at least two significant interactions with customers recently about this part of their sites. I’ve also had countless customers that didn’t know it existed and were very happy to learn about it. If you haven’t used this or didn’t know about it, welcome to a new chapter of site customization. πŸ™‚

When you should use this tool

As mentioned before, the Additional CSS section is best for making small changes. Examples of these are final tweaks or one-off changes that don’t need an entirely new CSS file. Remember, these CSS rules are intended to override both Parent and Child theme CSS rules. This means that the rules put here will take priority over all other CSS rules. If there are no rules for something in the Additional CSS then the site cascades (see what I did there? πŸ˜‰ ) back to the Child then Parent theme CSS files, respectively.

One more important note about this section. Any rules you add here are specific to the active theme at the time of implementation. Any CSS added while one theme is active will not show when a different theme is activated. If you switch back, the rule will return.

How to find the Additional CSS section

So where is this elusive section you ask? You can find it in your site’s WordPress Dashboard. From the left sidebar menu select Appearance β†’ Customize, which opens the Customizer. This page shows a sample of your homepage and a menu on the left. At or near the bottom of that menu you will see the Additional CSS option. Selecting that changes this menu and shows a large text box. This is where you add custom CSS rules to implement changes. The pageview on the right is also interactive. If you want to make changes to a specific page you can navigate to it from here and work with a view of the page you’re changing.

Additional CSS section in a WordPress site Dashboard
The Additional CSS section to the left with a view of the Homepage to preview the changes in real-time.

Finding the right CSS to change

Knowing what CSS rules to use in the Additional CSS section is important to make things work properly. There are times when a change is made that does what you want but then you find it also applies somewhere you don’t want it to. This means digging more to find a more selective Class or ID that will work where you want and not where you don’t. There are several ways to do this.

You can view the page’s source code (right-click β†’ View Page Source) to find the correct line of HTML then the different attributes, but that takes time and you need to know what you’re looking for. You also need to keep track of the tags and attributes for any code your selected element is nested in. An alternative to this is to open the zip file your theme comes in and dig into the code directly. Compare the HTML in the PHP files to the CSS files to see where things connect. It all sounds complex, right? I have a better solution.

Opening the browser’s Inspector

Your browser has an Inspector of some kind. I personally use Google Chrome so I can simply right-click on a web page and choose “Inspect” to open a console that I can use to see the page HTML and CSS. Microsoft Edge works identically to this. In Firefox and Safari, you right-click and choose “Inspect Element”. If you use a browser other than these, try this and see what your flyout menu shows.

Google Chrome flyout menu with Inspect option highlighted
Right-click on the page to open the flyout menu.

Using the Inspector

Using this tool it’s also possible to interact with the HTML and CSS to make live changes to your view of the page. Since it doesn’t actually change the live site, what you see during this is completely private. You can make any changes you want and if you mess it up you just refresh the page and start over. It’s also possible to use this to diagnose some rather deep issues in the code. But in this context, it won’t be necessary to dive that deep into things.

Highlighted content and corresponding HTML
The selected paragraph and its corresponding code, with Class attribute

To begin, you should select the content you want to work on and find its HTML tag and attribute(s). In my example above, you see I’ve selected a paragraph tag. You can see the <p tag and the has-normal-font-size Class attribute in the HTML highlighted at the bottom. This corresponds to the p.has-normal-font-size at the top of the image. This is an example of a tag and attribute to use for testing in the CSS portion of this module.

Testing before updating in Additional CSS

In the example below, you see the code I changed and can compare the original font size to the increased font size. To customize my view I highlighted the content I wanted changed and selected the “+” on the right. This opened a new rule with my tag and attribute already added. Then, I added the new CSS rule I wanted to test and watched the results. No changes were made publically and now I know what code to use for my changes.

Homepage text before the customization is activeAdding a temporary CSS rule to the Inspector module and highlighting how all of the code and content connect
Compare the page with and without the temporary customization

Another option to select is the ID attribute. Instead of displaying as <p class="has-normal-font-size">, it would be <p id="has-normal-font-size">. Which changes p.has-normal-font-size to p#has-normal-font-size. They do essentially the same job but the difference is that the same ID attribute can only be used once on a web page. Class attributes can be used multiple times on the same page. This means that an ID attribute is a bit more selective, which is good. Just watch for any changes to the same ID on other pages.

If that’s not your intent you can narrow down the selection to that page by finding the #post-id entry in the Inspector. Be sure to use these in the order you see them in, it matters. Combining this with the original code from above changes the selector to #post-2 p.has-normal-font-size. Which can be added to the CSS selector on the right.

Image showing how to combine two attributes to make a more selective CSS rule
The bottom of the Inspector shows a “path” of HTML tags and attributes

Applying new rules to Additional CSS

The rules built above are how you test things. Once you have something that works the way you want, copy the CSS code and paste it into the Additional CSS text panel. This will apply the changes to your site publically once you’ve clicked the “Save Changes” button. If you don’t see your changes on the front-end but the show here, check to see if your site has a caching plugin and clear it. Also clear your web browser. If those don’t work, contact your host and ask about any kind of server caching or Content Distribution Network (CDN).

Adding the newly developed CSS rule to the Additional CSS section
Adding the new CSS rule to the Additional CSS text panel and selecting “Save Changes” makes your new rule live.

That’s all there is to it. It may seem complex and confusing at first glance but review this as needed. Also don’t forget that playing around in the Inspector does not hurt your live site. It is a tool that can help you test changes to the web page in an impermanent way, so go nuts! As you learn more about it and other tools you will be better prepared to fix issues as they arise. I hope this helps! If you have any questions, feel free to leave a comment below. Take care and stay safe!