Adding a WordPress Custom CSS rule is necessary in some cases. Thankfully, we have multiple methods to add a few custom CSS rules to style or fix something.

Method 1: Custom CSS box (theme panel)

Some of our themes have this nice and helpful CSS Box, placed on the theme panel in the styling tab.

 

Method 2: Theme Editor (Child Theme’s style.css)

This is a safe place to add a custom CSS rule. If your child theme isn’t installed or activated you have to do so (the child theme is located in the downloaded package). When the child theme is activated, go to Appearance – Theme Editor, and select the child theme. From here, search for the style.css and place your custom CSS rule.

 custom

Method 3: WordPress Customizer

3.1. This method is not too recommended in our themes (because you will have a hard time finding the rules), but the good part is that you see in real-time if it has been applied or not. To add a rule via this method, go to Appearance – Customize – Additional CSS:

custom-css-customizer

3.2. And then choose the Additional CSS tab to toggle it:

custom-css-customizer2

3.3. Now you will see the CSS Box to insert your custom CSS rule.

customizer-css

 

Possible problems:

  • My CSS rule is not applied:
    1. A broken CSS rule: always validate your CSS rule (use http://csslint.net/ to validate your CSS).
    2. Caching issue: A hosting or plugin caching is blocking the rule from being displayed. In this case, clear the cache for any caching plugin or hosting and reload the page (Hint: Also try the page in incognito, if you see the rule, then it’s a caching issue).

Was this post helpful?

Tags: , , ,