[Resolved] CSS files loaded twice (both parent + child theme)

[john770]

Hello Tom,

I am very happy with your GeneratePress theme and presently have just one issue with it:

Both the parent’s and the child’s css files seemingly are loaded twice.
(Cf. source code of test URL provided)

This issue is also confirmed by GTmetrix.com, which says:
The following resources have identical contents, but are served from different URLs:

[…]generatepress/style.css?ver=1.4 (see line 35)
[…]generatepress/style.css?ver=4.8.3 (see line 38)
[…]generatepress-child/style.css?ver=1.0.0 (see line 36)
[…]generatepress-child/style.css?ver=1510262936 (see line 49)

I checked the enqueue styles of my child theme’s functions.php file, which are exactly following the recommendations in the Codex (see *third* code block in the linked section):

function my_theme_enqueue_styles() {

    $parent_style = 'generatepress-style'; 

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

In the section linked above, this problem of css files loaded twice is even expressly mentioned:

$parent_style = 'twentyfifteen-style';

Failure to use the proper tag will result in a CSS file needlessly being loaded twice. This will usually not affect the site appearance, but it's inefficient and extends your page's loading time. 

but I cannot see anything wrong with my use of $parent_style:

$parent_style = 'generatepress-style';

So I have no idea why both css files are loaded twice.

Any idea what could be the reason for it?

Thanks a lot in advance for any help! 🙂

[Tom]

There’s no reason for that function in your child theme. If you remove it, the issue should go away.

[john770]

Hello Tom,

There’s no reason for that function in your child theme.

Hmm, then I wonder why
https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme
suggests:

If your child theme style.css contains actual CSS code (as it normally does), you will need to enqueue it as well. Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it. Including the child theme version number ensures that you can bust cache also for the child theme. (See a more detailed discussion on Stack Exchange.) *The complete (recommended) example becomes*:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

You say

If you remove it, the issue should go away.

Do you mean I can remove that complete enqueuing script from my functions.php?
Or only parts of it? I thought the enqueuing script was mandatory for a child theme.
Thanks!

[john770]

I just checked the parent GP functions.php and it has

	// Add the child theme CSS if child theme is active.
	if ( is_child_theme() ) {
		wp_enqueue_style( 'generate-child', get_stylesheet_uri(), array( 'generate-style' ), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
	}

so I guess that’s the reason why, together with the enqueuing script in my child theme’s functins.php, the css file is loaded twice, right? It seems to depend on the parent theme, because I didn’t have that issue before.

I’ll try and remove the whole enqueuing script from my child theme, as you suggested.

Thanks again for your answer!

[Tom]

That’s correct – GP handles everything for you. Your functions.php file shouldn’t have any functions to start 🙂

[john770]

Thanks, Tom, that’s good to know. 🙂

Well, under these circumstances the question arises as to my future work with GP, do I need a child theme at all with GeneratePress? Given that I can use your plugin “Simple CSS” for CSS, then the “Code Snippets” plugin and WordPress hooks and filters for PHP snippets, what use cases can you think of where said tools are not enough and I would definitely need a child theme for GP?

I guess one of the cases you’ll mention is when I wanted to change any theme templates themselves, right? Can you think of any other possible reasons, and would any of these imaginable reasons make it mandatory that I set up a child theme *right from the start* of a theme project or would it be enough to do so just when the need arises (given my use of the above mentioned tools)?

Thanks a lot for your thoughts!
I really appreciate your help and the many useful forum posts I am finding here and that I can learn from.

[Tom]

I think you can get away with not having a child theme thanks to plugins like those.

That being said, it doesn’t hurt to add it. It really depends on how you want to add your custom code.

Adding a child theme later could mean having to reset your copyright text and possibly your menu locations. Other than that, everything would be the same.

[john770]

Thanks Tom!
Just for the record and for any users with the same problem or question (I just noticed I hadn’t reported back after having announced I would try your suggestion) – as you had predicted, removing the enqueuing code from the child’s function.php file solved the problem, thanks again for your advice!

[Tom]

Glad it worked 🙂

[Author]

Posts