Let’s face it… WordPress is an awesome CMS. There’s nothing it can’t do. There are thousands of free themes and plugins you can use to extend the out-of-the-box WordPress functionality. But sometimes, you come across a great plugin and there’s no way to change the CSS styles without editing the plugin’s stylesheet. This is problematic because when the plugin is updated, you have to a) remember to save the stylesheet you modified and upload it after the update, or b) reapply the styles you changed after you update the plugin. Im my opinion, neither option is acceptable. I’ve come up with a solution. Others likely have come across this solution, but I haven’t seen any articles about it, so here’s how you can easily and safely override WordPress plugin styles.
I ran across this problem with All-in-One Event Calendar, which gave me event calendar functionality that was perfect for a website I’m building. However, the styles didn’t fit well with the WordPress theme I’m building for the site.
My first thought was to override the styles in one of the stylesheets I’m using for the site. I used the !important attribute to override the styles since my stylesheets are loaded first and the plugin’s stylesheet is loaded later. This worked until I ran across some styles that the plugin developer also marked !important. As such, the plugin styles in these instances could not be overridden. What to do?
All plugin stylesheets are added to the header using the wp_head() hook. So here’s what I did:
- Created a separate stylesheet. I called it override-plugin-styles.css
- Changed the styles as I wanted, still using the
!importantattribute for each style I changed. If you don’t, any styles the plugin developer marks!importantwill not be overridden. - Below the php code for
wp_head(), insert a stylesheet link that links to your plugin override styles.
That’s all there is to overriding WordPress plugin styles that don’t provide a mechanism for overriding the CSS styles included with the plugin. Now you can update the plugin and be reasonably sure that your styles will remain intact. The only way they won’t is if the plugin developer changes the ids and classes of the HTML elements.
Here’s the code for your header:
<?php
/* We add some JavaScript to pages with the comment form
/* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to
* as styles, scripts, and meta tags.
*/
wp_head();
?>
<!-- Plugin Style Override CSS -->
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/css/plugin-style-override.css" media="screen" />
</head>
<body <?php body_class(); ?>>
