WebMrFixIt

Save WordPress Plugin CSS changes

Jan 12

John DonovanReference & Tutorials, Technology

WordPress plugins offer a great way to extend the functionality of your ‘standard’ WordPress implementation. Often the plugin author includes a CSS file that provides the style attributes for the content elements that the plugin creates. However, many authors do not provide a way to change the style of the elements, without having to change the plugin’s CSS file. This works fine – however, any changes will be lost when the plugin is upgraded and the bundled CSS file is replaced.

My solution for this problem is to place CSS changes in a separate ”style-override.css” file in the Theme’s directory – including all of the selectors and attributes that I’d like to change.  CSS works on the ‘last one in wins’ rule – so the last definition of a given rule will over-ride any previous definitions.

You can load this ‘style-override.css’ file at the end of the page, over-riding any previous definitions, by using the following code in your functions.php:

//load the style-override.css file at the very end of the document
//allowing CSS for plugins to be altered and protected against overwrite by upgrade
add_action(‘wp_footer’, ‘loadOverrideCSS’);
function loadOverrideCSS() { ?>
    <!– load style-override.css file –>
    <link rel=’stylesheet’ type=’text/css’ media=’screen’ href=’<?php echo get_bloginfo(‘stylesheet_directory’); ?>/style-override.css’ />
<?php }
//pcLoadOverrideCSS()

This will use the ‘wp_footer’ hook, which is one of the last things executed by WordPress when generating the content page.