Methods for Overriding Styles in WordPress

Let’s say you manage a WordPress site. You chose, purchase, and install a pre-made theme. Say you added a few items you came across in the WordPress plugin directory to add some advanced features to the site. This is the awesomeness that is the WordPress ecosystem. It’s relatively easy for anyone with light technical chops to get a website off the ground and wrangle together something powerful without having to build everything from scratch. It just works great and your website looks wonderful.

Until it doesn’t.

I do a little work for a WordPress plugin. The number one thing that gets reported to the support team is, without a doubt, are situations where the plugin conflicts with either the installed theme or another installed plugin. The person reporting the problem has the plugin installed, but what it is doing looks nothing like the screenshots advertised by the plugin.

This can be extremely irritating for the person managing the site. If this plugin is downloaded from the WordPress directory, then it ought to work right out of the box, right?

You could argue this is an unrealistic expectation when you consider that most themes and plugins are developed by different people. It’s understandable that mashing code from multiple authors into the same site will lead to at least some conflicts now and then, despite everyone’s best intentions to deliver good work.

This post is going to look into the specific area of style conflicts and ways to overcome them.

I’ll start off by saying that it’s a tough position being a WordPress theme or plugin developer. On one hand, any stylesheets a plugin includes need to be opinionated enough so that they do what they need to do and look great. On the other hand, they need to respect the work of the active theme and other plugin developers so that the styles play nicely together. It’s a balance that even a trained tightrope walker can appreciate.

We’re not going to talk about the different methods WordPress plugin developers have to make theme and plugin styles more compatible or theme-able. Instead, we’re going to look at the different ways we can override conflicting CSS in WordPress that allow you to take control of the styling for any component of a WordPress site, regardless of whether it originates from the theme or a plugin.

Override Styles in the Active Theme

All WordPress sites employ a theme. CSS-Tricks runs on WordPress and it has its own custom theme, which contains all the template and style files needed to generate this post. Well, assuming you’re reading this on the site and not from a syndicated feed.

The point being that all themes require at least two files, one of which is the magical style.css. This file is required because it contains information about the theme that WordPress would be unable to recognize the theme without.

Those of you who know a thing or two about WordPress might want to stop me here because style.css does not have to contain CSS and you would be right. It does not have to and we could simply add our own stylesheet to the header of the theme instead and use style.css as a shell for the theme to be recognized. That’s legit. However, the file was indeed intended to be the primary location of a theme’s files, regardless of how we choose to develop our sites.

If your theme uses the file to contain the theme styles, you can modify it directly to change any of the styling properties of your site. It can also be used to add and override styles that might come packaged in plugins or other third-party sources.

Override Styles in a Child Theme

The active theme method is only great if you are the developer of the theme. Many folks, however, roll with themes made by other developers. I’m sure you’ve seen the many theme marketplaces out there that sell premium WordPress themes that you purchase, download, and install into WordPress. That’s what we’re talking about.

If you’re using one of these themes, then best practice is to manage your customizations in a child theme. This is really a fancy way of describing the process of creating a new folder in your WordPress wp-content/themes directory that is the same name as your parent theme, only with -child appended to it.

For example, if our parent theme directory is called css-tricks then our child theme directory would be called css-tricks-child. This directory requires style.css just like the parent directory and it will be loaded on the site after the parent theme’s style.css file so that any styles contained in the child theme version will override the parent.

Don’t you wish that’s how your teenage years worked?

Now you can make as many changes as needed and you will not lose those changes when installing future updates that the theme developer releases.

Register and Enqueue Your Own Stylesheet

This is one of my favorite ways to go about overriding styles in WordPress. The idea is that you create your own stylesheet and load it into the site theme after all of the other stylesheets so that yours overrides the others.

There are two well-documented WordPress functions, one called wp_register_style() and the other wp_enqueue_style() that allows us to do this and it can be added either to parent or child theme functions.php file in order tell WordPress to look for it and load it in the site header.

This is a basic example of how the function can be used to call a stylesheet by the file name (aka handle) and file path:

function my-custom-styles() {
  // Register my custom stylesheet
  wp_register_style('custom-styles', get_template_directory_uri().'/lib/styles/custom-styles.css');
  // Load my custom stylesheet
  wp_enqueue_style('custom-styles');
}
add_action('wp_enqueue_scripts', 'my_custom_styles');

We could get a little more fancy by telling WordPress to load it only on a specific page:

// Load my custom stylesheet
function my_custom_styles() {
  // Register my custom stylesheet
  wp_register_style( 'custom-styles', get_template_directory_uri().'/lib/styles/custom-styles.css' ) );
  // Check that the current page is the homepage
  if ( is_home() ) {
    // Then grab the custom stylesheet
    wp_enqueue_style( 'custom-styles' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );

Note that adding an extra request to all pages is a performance consideration, but you can certainly wrangle control of that as well.

Art Direction

Art direction seemed to be all the rage in something like 2009, though recent data suggests a slight rebound. The idea being that adding styles to the head on a one-off basis would allow you to create compelling layouts on a post-to-post basis. Styles injected into a

<style> block in the head, as long as they come after the regular stylesheets of the site which are probably <link> elements, will have the opportunity to override existing styles nicely.

Art direction can be used as an effective means for overriding conflicting styles as well and is particularly effective when those conflicts only exist in very specific places without having to create and load a full stylesheet to clean things up.

There are plenty of WordPress plugins that enable art direction. It’s actually not too incredibly difficult to build this on your own.

Using a Plugin

Hey, if a plugin got you into this mess of conflicting styles, then maybe there is one to get you out of it, right? Of course, there is.

I am sure there are others out in the wild, but the one I am most familiar with is Simple Custom CSS. The idea is pretty straightforward: a new screen is added that allows you to write CSS. The CSS entered and saved gets added to the document head which, like the art direction method we discussed, gives you the opportunity to override other styles on that particular page.

WordPress Customizer

WordPress 4.7 introduced a new feature in the WordPress Customizer that adds a CSS editor:

This is essentially WordPress adding native support for the the Simple Custom CSS plugin mentioned earlier. In other words, styles are added to the head upon being saved.

WordPress Editor

Oh yeah, remember that? You can actually edit a site’s style.css file directly in WordPress by navigating to the buried tavern that is the Appearance > Editor screen.

I’ll preface this by saying I find this to be a scary place to hang out. It provides you with access to edit the code of any theme file, including PHP templates. The changes are not version controlled, so it’s hard to know what has changed in case you screw something up, and if your version control system is in charge of deployment, and changes there might override changes made here.

Still, it is possible to override styles here and to do so without needing to open up a text editor, saving your changes, then uploading them to a server (via whatever you do for deployment).

Wrapping Up

Look at that: seven methods for overriding styles in WordPress. The next time you run into a situation where something does not look right after installing a theme or plugin to your WordPress installation, you now have the power to take control of the mess and clean things up like a boss.