Search code examples
phpcsswordpresschild-theming

Wordpress Newspaper child theme loads CSS twice

I am using Wordpress with Newspaper theme (as a child theme). I've noticed that my custom CSS from the child theme is loaded twice.

I checked function.php, and I am wondering if the second function is the root of my problem?

if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
    function chld_thm_cfg_parent_css() {
        wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array(  ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 1001 );

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( 'chld_thm_cfg_parent','td-theme','td-theme-demo-style' ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css' );

Thanks for your help.

Edit 1: I have found these two lines of code via site code inspector. Do you think this might be it? 

<link rel='stylesheet' id='td-theme-css'  href='.../wp-content/themes/Newspaper-lesser-old-child/style.css?ver=8.1.1504096948' type='text/css' media='all' />
<link rel='stylesheet' id='chld_thm_cfg_child-css'  href='.../wp-content/themes/Newspaper-lesser-old-child/style.css?ver=8.1.1504096948' type='text/css' media='all' />
Solution

  • We can see that the stylesheet is being included twice with different ids...:

    <link rel='stylesheet' id='td-theme-css'  
      href='.../wp-content/themes/Newspaper-lesser-old-child/style.css?ver=8.1.1504096948' type='text/css' media='all' />
<link rel='stylesheet' id='chld_thm_cfg_child-css'  
      href='.../wp-content/themes/Newspaper-lesser-old-child/style.css?ver=8.1.1504096948' type='text/css' media='all' />

    ...so we can use the ids td-theme and chld_thm_cfg_child to locate the problem.

    You need to look at the functions called in the wp_enqueue_scripts action in your functions.php in both your parent and child themes.

    You've already found where your stylesheets are being enqueued in your child theme, and can see from the id that its being loaded by the following code from your child functions.php:

    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( 'chld_thm_cfg_parent','td-theme','td-theme-demo-style' ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css' );

    So now we need to track down the other instance. This is where the difficulty is because you haven't included the enqueuing code from the parent.

    Potential Causes & Solutions:

    1. The parent theme is using get_stylesheet_directory_uri

    As far as I can tell, the id td-theme comes from the Newspaper theme. This suggests that it is using get_stylesheet_directory_uri instead of get_template_directory_uri() to load the stylesheet.

    get_stylesheet_directory_uri loads the stylesheet from the active theme's folder, so if a child of that theme is active, then it will load the child stylesheet instead of its own.

    If its being loaded by the parent theme already, you don't need to load it again in the child theme so remove the code that loads the child stylesheet again in the child functions.php

    There are other potential causes of this issue, but they don't appear to apply here. However I'll include them just in case your question doesn't have all the enqueuing functions, and also for anyone else who might have similar problems.

    1. If your child theme is including it instead of the parent theme

    A child theme could be incorrectly trying to load the parent stylesheet as well as the child one. In that case, I'd expect to see something like this in your child's function.php:

    wp_enqueue_style( 'td-theme', get_stylesheet_directory_uri() . '/style.css',  
                  array(), $version);
wp_enqueue_style( 'chld_thm_cfg_child', get_stylesheet_directory_uri() . '/style.css',  
                  array(), $version);

    In your case, this doesn't appear to be the problem, because you are using a different id ("chld_thm_cfg_parent") to load the parent stylesheet.

    If this was the case, to fix it you should use get_template_directory_uri for the parent stylesheet and get_stylesheet_directory_uri for the child, e.g.:

    /* load parent stylesheet from parent theme folder with get_template_directory_uri */
wp_enqueue_style( "td-theme", get_template_directory_uri() . '/style.css' , 
                  array(), $version);

/* load child stylesheet from child theme folder withget_stylesheet_directory_uri
   Note: we include the parent's id in the dependencies array so it gets loaded first */ 
wp_enqueue_style( "chld_thm_cfg_child", get_stylesheet_directory_uri() . '/style.css', 
                  array("parent-id"), $version);

    (Note that this could cause the parent theme to be included twice, depending on how its included in the parent theme - but again without seeing the actual code, it's difficult to know exactly).