For some plugins you may need CSS styling to be changed, but if you change the plugin files, either you won’t update it, or you will lose your changes. I will show you a simple trick to overcome this problem using seperate stylesheets.


Problem is generally caused by loading of plugins stylesheets is later then theme stylesheet:

...
 <!-- Theme Stylesheet -->
 <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/style.css" />
 <?php wp_head(); // <- This is where your plugin stylesheets and scripts are generated ?>
 ...

Simple Fix using seperate CSS files

You can easily overwrite plugin styles using a seperate stylesheet file, for example overwrites.css. Then in your header.php file, insert it using:

...
 <!-- Theme Stylesheet -->
 <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/style.css" />
 <?php wp_head(); // <- This is where your plugin stylesheets and scripts are generated ?>
 <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/overwrites.css" />
 ...

This fix is aimed for basic users. For advanced users, I recommend using wp_dequeue_style function to remove plugin stylesheets. After you dequeue stylesheets, you need to include/write required CSS rules yourself.

I hope this trick helps you with your styling issues.

Search Queries: wordpress fix plugin css, wordpress css issues, wordpress theme css issue

Comments (0)

Leave a Reply

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