How to Fix Duplicate Stylesheet Loading in WordPress Child Theme

Last Updated:

In this WordPress blog, we encountered an issue where the child theme's stylesheet file (style.css) was loading twice, leading to the same code being loaded redundantly. Although it's unclear when this problem began, I noticed the duplicate loading of the CSS code while configuring the Breeze cache plugin.

To fix this issue, one effective method is to remove the code responsible for loading the child theme from its functions file. I am using the GeneratePress theme, and the problem was resolved by replacing the original functions file with the one provided by the GeneratePress developer.

How to Fix Duplicate Stylesheet Loading in WordPress Child Theme

I noticed an issue of duplicate loading of the child theme's stylesheet file after moving this blog to Cloudways and implementing the Breeze plugin.

Duplicate Stylesheet File Loading in WordPress Child Themes

Upon inspecting elements using Chrome browser, I confirmed that the same code was being loaded twice, as depicted in the above figure.

The caching plugin Breeze provides a CSS Minification feature. It appears that the stylesheet file is being cached and loaded by the Breeze plugin, indicated by the path starting with 'breeze_04f1…'.

In such cases, it's recommended to review the functions file in your child theme. My child theme's functions file was set up as follows:

<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;

// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:

if ( !function_exists( 'chld_thm_cfg_locale_css' ) ):
    function chld_thm_cfg_locale_css( $uri ){
        if ( empty( $uri ) && is_rtl() && file_exists( get_template_directory() . '/rtl.css' ) )
            $uri = get_template_directory_uri() . '/rtl.css';
        return $uri;
    }
endif;
add_filter( 'locale_stylesheet_uri', 'chld_thm_cfg_locale_css' );
         
if ( !function_exists( 'child_theme_configurator_css' ) ):
    function child_theme_configurator_css() {
        wp_enqueue_style( 'chld_thm_cfg_child', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css', array(  ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css', 10 );

// END ENQUEUE PARENT ACTION

I remember creating the child theme using the Child Theme Configurator plugin. Interestingly, on another site where I utilized the same plugin for child theme creation, there was no issue of duplicate stylesheet loading. This observation led me to suspect that multiple factors might be causing this issue on this specific site.

I managed to fix the problem by altering the code in the following manner:

<?php
/**
 * GeneratePress child theme functions and definitions.
 *
 * Add your custom PHP in this file.
 * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
 */

Wrapping Up

In conclusion, we have examined the issue of the stylesheet file in WordPress child themes loading twice. To fix this, inspect the child theme’s functions file for any code that loads the stylesheet and remove it.

Another solution is to transfer the CSS from the child theme’s stylesheet to the Additional CSS section found in the Appearance » Customize menu of the WordPress admin panel. This method ensures the child theme’s stylesheet remains empty, preventing duplicate loading.

However, it's important to note that moving CSS to the 'Additional CSS' section means it will load in the header of each page. If the CSS is extensive, it might impact page load times.

See Also...