troubleshooting WordPress CSS

Even though WordPress is one of the most used CMS, it lacks out of the box awesomeness. This means that you still need to customize it before you can make your website live. To customize your website, you need to add CSS to your theme. Advanced users might want to create a fully customizable theme from scratch, but with so many awesome themes available online, there is no point going through that route.

Great, so, you decided to customize your WordPress theme with custom CSS. However, you got stuck as none of your custom CSS code work. There is nothing to worry about as in today’s article; we will be going through the solution of how to make custom CSS work in WordPress.

CSS stands for Cascading Style Sheets. They are used to make the WordPress theme look great. To solve the issue, first, we need to understand why it is happening. Let’s discuss it below.

What’s going wrong?

There are many scenarios where the CSS doesn’t work. Let’s take an example to get a better understanding. If you installed a new theme, you would surely create a child theme with it. Child theme works differently and is used to ensure that new core theme updates don’t mess up your customization.

But child theme also creates new problems. For example, you installed a new plugin which utilizes its stylesheet for rendering different visual elements. Now, if you want to change some its appearance, you might want to add new CSS through customizer or any other method. However, it will not work the way you want as the plugin own’s CSS will override the CSS that you wrote using the child CSS.

So, why does it even happen?

It happens because of the cascading. Cascading is a technical word that mainly refers to the cascading feature that CSS carries. It means that if you implement a CSS to a button or a section of the page, and then later add another CSS to modify its design, the following CSS will take precedence over the first one.

When you add a custom CSS to the WordPress theme, the plugin CSS always loads last which means that your custom CSS never gets the chance to get implementing. We can check a simple example to understand it. For example, I want the paragraph elements to be red and the H1 tag to be blue. We do it by adding the following CSS code.

p {color: red;}

H1{color:blue;}

Now, you can make the above CSS irrelevant by adding another CSS code in your CSS file that overrides the above CSS properties for both P and H1. Let’s do it below.

p{color: yellow};

H1{color: purple};

The 2nd CSS code will supersede the first one.

Diagnosing the problem

Now that we have understood the issue, we are ready to learn how to diagnose the problem. To do so, you need Google Chrome. Open the website and then click on the inspect item. You will see that a side window has opened which contains a lot of code.

Now, you need to click on <head> where you will get a lot of elements listed. There you need to check out of the stylesheets. If you see two or more stylesheet, you should know that one is cascading the other. The one listed later will cascade the earlier one. This technique is handy if you are starting a website or managing an existing one. It will help you diagnose not only the CSS issue but also other issues if you know what you are doing.

How to solve the problem

Great! We have now understood the technique that is causing the problem, but also understood how to diagnose it. Many blogging guides would tell you why you should customize your design by adding custom CSS, but they never tell you about the problems that you may have. This is where the guide comes in.

To make the cascading work as intended, you may want to ask the plugin developer to enqueue a stylesheet properly. However, that’s not possible in every situation, and you might have to wait for the changes to happen.

The best approach is to use the enqueue function to make the stylesheet work as intended. To do so, you need to use the following code.

wp_enqueue_style( ‘total-child-css’,

get_stylesheet_directory_uri() . ‘/style.css’, array(‘total-parent-css’), ‘1.0’, all );

The function enqueue takes five parameters. All the parameters are important, but the third parameter, “dependency” is what we should look after. It changes the dependency of the theme; in this case, a child theme is dependent on the parent theme.

You can change the dependency to enqueue the style sheets properly. You need to find the handle of the stylesheet you want to enqueue by using the wp_enqueue_style function

Using Plugins

If you are a webmaster that is not interested in fiddling with the code, you can still achieve the desired results with the help of plugins. We recommend using the following plugins.

1. Debug Bar

2. Debug Bar Script and Style Dependencies

With these plugins, you can find out the dependencies and then use the enqueue function to make the cascading work as intended. After you install those two plugins, you need to go to the admin bar and click on “debug.” Once done, click on the “Script and Style Dependencies.” There you will find the list of the enqueued styles. Choose the one that you need and then simply enqueue it using the wp_enqueue_style function.

The code you write needs to be added into the child theme and it is will automatically overdrive the main theme or plugin CSS.

Conclusion

Cascading is a complex subject, and you may find yourself lost if you dive deep into it. In that case, we recommend you to get help from a professional developer who can easily isolate the problem and solve it for you. The best way is always to check the <head> tag of the page you want to solve the issue as quickly as possible. CSS might look easy, but it is complex under the hood.

So, are you going to solve the issue yourself or ask the help of the WordPress developer? Comment below and let us know. We are listening.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *