Custom CSS Issues with WordPress and How to Fix It
As a WordPress user, you may find tons of tutorials online that explains how you can customize your theme by adding custom CSS. But none of these tutorials explains the problem that you can have when doing so.
In this article, we will be covering the reasons why your custom CSS doesn’t work. We will also provide a fix to the issue so that you can customize your website any time you want.
CSS stands for Cascading Style Sheets. These are used to customize how your website looks and feel. If you are new to customizing WordPress theme, the chances are that you will be confused on how to customize your website using custom CSS when building a website.
Customizing a website is not a bad idea as it gives you the ability to polish a website and ensure that it looks like the way you want. All the current WordPress themes come with the option to add CSS and override the old CSS.
Why custom CSS is not working?
To get a better understanding of why your custom CSS is not working, you need to learn why the issue is even happening in the first place. If you follow any guide on the web, you would know how easy it is to add custom CSS considering you know how CSS works in the first place.
The custom CSS cannot work due to many reasons. One of the reasons includes cascading issues.
When you install your theme, you get a set of CSS files associated with the theme. However, things get complex when you create a child theme. Child themes bring a new complexity to the table. For example, if you want to change a plugin’s CSS and change how it looks in the front-end, you may find yourself stuck as custom CSS doesn’t work. It happens because of cascading issues.
Cascading is a CSS property that makes which enables you to override the original CSS associated with the theme itself. Let’s take an example to get a better understanding.
Let’s try to change the background and font color of the footer. To do so, you need to add the following code.
footer{background-color: blue, font-color: red};This above CSS code will supersede the one that is initially implemented by the theme.
The problem occurs when cascading doesn’t work as intended. If you created a child theme, then the problem can intensify itself considering that many plugins that still take the main theme CSS over the child theme CSS. These issues occur depending on how the developer designed the plugin or theme to work.
How do diagnose the problem and solve it.
So, how would you diagnose the problem? To diagnose it, you need Google Chrome. Google Chrome lets you inspect the different aspects of the webpage and helps you to diagnose the problem that you might be having. To get started, just right click on the element and then click on inspect. This will open up a small window with a lot of code.
After that, you need to click on the <head>. Once you are there you will see a list of the element. From there you need to find out the stylesheets that are listed there. If you see more than two spreadsheets that means that one stylesheet is cascading the other. Once you find it, you can solve the cascading issue either by changing their position or using the stylesheet that precedes the other one.
Another way is to simply use the WordPress enqueue function which lets you prioritize the custom CSS. You can do it by adding the following code.
wp_enqueue_style( ‘parent-child-css’,
get_stylesheet_directory_uri() . ‘/style.css’, array(‘total-parent-css’), ‘1.0’, all );The wp_enqueue functions take multiple parameters to work correctly. Of all the parameters, the one parameter that is worth looking into is the 3rd one. It is a dependency parameter which controls the dependency of the style sheets over each other. By using it you can make sure that the dependency is working as intended.
If you are not sure where and how to do it, we recommend hiring a web designer to do it for you. Or if you are using a reliable hosting provider then they may also help you if their support covers the issue. Because free or cheap web hosting providers, don’t offer much technical support.
Solving the problem using plugins
One of the amazing feature of using WordPress is its ecosystem. Some plugins can help you solve the issue. The plugins that you can use is the debug plugins that will help you to find out the issues with the theme style and scripting.
You need to install Debug Bar and Debug Bar Script and Style Dependencies. After you install it, you need to enable debugging from the admin bar. Once the debugging is enabled, then it time to use the script and style dependencies. This will list all the enqueued styles and you can then use the wo_enqueue_style function.
After the enqueue style is set properly, you can then add the code in the child CSS or the CSS file that you have selected, and the custom CSS will work as intended.
Conclusion
CSS and WordPress might seem easy from the surface, but things can go complex if you try to customize it. Also, the fact that WordPress always enqueue alphabetically can lead to problems. This is something that plugin and theme developers need to note when they develop their product. They can also ensure that these problem doesn’t exist if they provide a provision for enqueuing the CSS correctly. That’s not all as styles can be specified which can lead to more issues. The best way to solve is to manually check the <head> and enqueue CSS files to your requirement.
The amount of dependency that a CSS have can also factor in the problem. It is not only the responsibility of the developers but also how WordPress utilize and implement them. We hope that this article has equipped you to solve the custom CSS problem. If it did, then don’t forget to comment below and let us know if it fixed the issue for you or not. We are listening.
