How to Load Custom CSS with Very High Priority Easily
If you’re tweaking your WordPress site with a child theme, you’ve probably noticed that sometimes your custom styles don’t load as expected, or you see a brief flicker of the parent theme’s styles before your custom ones kick in.
This annoying issue, often called a Flash of Unstyled Content (FOUC), can make your site look unpolished. The good news? You can fix it by loading your custom CSS with high priority and removing conflicting styles. In this article, we’ll share a simple code snippet to do just that, explain how it works, and tell you what to expect. Whether you’re using a child theme or just want your styles to load smoothly, this trick is a game-changer.
Why This Snippet Is Awesome
This code is perfect for anyone who wants their custom CSS to take charge right away, especially when using a child theme. By loading your styles early and removing unwanted ones from the parent theme, you can:
- Avoid that pesky FOUC, where the parent theme’s styles flash before your custom ones load.
- Ensure your custom design looks consistent from the moment the page loads.
- Keep your site clean by ditching styles you don’t need.
Yes, this snippet does help prevent layout flashing when using a child theme. It forces your custom CSS to load early in the page’s
section and removes conflicting styles, so your site looks exactly how you want it, right from the start.// Hook into 'wp_head' to add custom CSS with high priority (lower number = earlier execution)
add_action('wp_head', function() {
// Change 'style.css' to your custom CSS file name and path relative to your theme folder
// Update 'v=1.0' to a new version number when you update the CSS to bust browser cache
echo '<link rel="stylesheet" id="my-early-css" href="' . get_stylesheet_directory_uri() . '/style.css?v=1.0" type="text/css" media="all" />' . "\n";
}, 5); // Adjust priority (e.g., 1-10) to load earlier or later in <head>
// Hook into 'wp_enqueue_scripts' to remove conflicting theme styles
add_action('wp_enqueue_scripts', function() {
// Replace 'avia-style' and 'avia-style-css' with the handles of the styles you want to dequeue
// Use wp_dequeue_style() to remove specific theme or plugin styles that conflict with your custom CSS
wp_dequeue_style('avia-style');
wp_dequeue_style('avia-style-css');
}, 20); // Priority set to 20 to run AFTER theme enqueues; adjust if needed (higher number = later execution)How It Works
Let’s break it down:
- Loading Your CSS Early: The first part uses the wp_head hook to add your custom CSS file (like style.css) directly into the section of your site. The 5 at the end means it loads early (lower numbers run sooner).
This ensures your styles are applied before other styles mess things up. The get_stylesheet_directory_uri() function points to your theme’s folder, so WordPress knows where to find your CSS file.
The ?v=1.0 part helps browsers load the latest version of your CSS by busting their cache when you update it. - Removing Unwanted Styles: The second part uses the wp_enqueue_scripts hook to dequeue (remove) specific styles from your parent theme or plugins. In this example, we’re removing styles with the handles avia-style and avia-style-css (common in some themes like Avia).
The 20 priority means this runs after the theme loads its styles, ensuring we can override them. Why do we dequeue? Because parent themes or plugins sometimes load styles that conflict with your custom CSS, causing layout issues or that annoying FOUC. - Why Use wp_dequeue_style? The wp_dequeue_style function is your cleanup tool. Without it, your parent theme’s styles might load alongside your custom CSS, causing conflicts. For example, if the parent theme’s CSS sets a background color you don’t want, it could briefly show up before your styles take over. By dequeuing those styles, you’re telling WordPress, “Nope, don’t load these. I’ve got my own!”
This keeps your design clean and consistent, especially in child themes where the parent theme’s styles can be stubborn.
What to Expect
Once you add this code to your functions.php file, here’s what you’ll notice:
- Smoother Loading: Your custom CSS will load early, so your site looks right from the start, with no flashing or flickering.
- Consistent Design: By removing conflicting styles, your child theme’s design will shine through without interference.
- Easy Customization: You can tweak the CSS file name, version number, or style handles to fit your needs. For example, if your theme uses different style handles (like theme-style instead of avia-style), just swap them out in the code.
Pro Tip: To find the right style handles to dequeue, use your browser’s developer tools (usually F12) to inspect the
section of your site. Look for tags with id attributes ending in -css—those are the handles you can dequeue.How to Use It- Open your child theme’s functions.php file in a code editor or WordPress’s theme editor.
- Paste the snippet above.
- Update the CSS file name (e.g., style.css) and version number (e.g., v=1.0) to match your setup.
- Check your theme’s style handles (using developer tools) and replace avia-style and avia-style-css with the ones you want to remove.
- Save the file and test your site to ensure it looks perfect.
If you update your CSS file later, bump the version number (e.g., v=1.1) to make sure browsers load the new version.
Wrapping Up
This simple snippet is a lifesaver for WordPress users who want their custom styles to load fast and flawlessly, especially with child themes. By loading your CSS early and kicking out conflicting styles, you’ll avoid layout flashes and keep your site looking polished. Try it out, tweak it to fit your theme, and enjoy a smoother, more professional website.
Written by Milan on 4th July 2025
