If you do CSS customizations in Wordpress, you know what an enormous pain it is when other plugins/themes use !important declarations. It’s my job to write hacky, incorrectly cascading code, not theirs, you say. So you dutifully put an !important declaration on the relevant code, hit refresh… and it still didn’t work! Because the offending CSS is loading after the child theme CSS. No matter how many times you yell at your monitor, you’re never going to be able to override that CSS. Unless you go into full specificity wars mode.

Unfortunately, as far as I know, there’s no right way to fix this. You are supposed to use a functions.php file in your child theme to call your stylesheet using wp_enqeue_style(), and list the file you want it to come after as a dependency. But this won’t work if the offending styles didn’t also use enqeue_style, because you have to know that style’s ID.

If you want to beat bad code, you have to become the bad code.

I’m going to assume you’re using a child theme for this tutorial. If you’re not using a child theme, and you have FTP access to the site you’re working on, it takes 5 minutes to set up and it’s much better and easier than editing theme files directly.  If you’re making a theme or plugin, you probably already know where to put this code to make it work.

The first thing you have to do is make a functions.php file. Just right click in your child theme’s root folder in your FTP client (/wp-content/themes/your-child-theme/) and make a new file called functions.php. If your FTP client won’t let you make new files, just make a blank file with a text editor, save it with the name functions.php and upload it. You’ll also need to make a CSS file other than style.css in your child theme’s root folder that you can link to in your functions.php file (you could call it main.css).

Now, open up that functions.php file you uploaded and put this code in there:

if (!function_exists('childtheme_css')) { function childtheme_css () {
echo '
<link rel="stylesheet" type="text/css" href="' . get_stylesheet_directory_uri() . '/<strong>your-css.css"</strong>>';
} }
add_action('wp_head', 'childtheme_css', 9999); }

This is a function that echoes (prints) a link tag that links to your stylesheet (make sure to change your-css.css to a real file). The add_action() function is a function that tells Wordpress to call (do) your function when the action wp_head() is called. The 9999 tells wordpress what order you want your function to be called inside wp_head. If other CSS is still loading after yours, try adding some more 9s! If you asked a member of the Wordpress theme about this, they would tell you that this is the wrong way to do this. But sometimes, when other developers play dirty, you have to stoop to their level to do your job.