Enqueueing Child Theme CSS Breaks Main CSS

General HivePress
1

Hi there,

I have followed the instructuins to create the child theme and it worked flawlessly.

However, when I enqueue the child theme css, it breaks main css (colours, buttons etc…)

That happens even when my child css does not contain any changes whatsoever.

This is the code:

functions
functions1049×310 44.4 KB

This is child CSS:

css
css1098×287 25.5 KB

This is part of the page before enqueueing:

before
before1241×537 84.2 KB

This is same part after enqueueing:

after
after1235×481 76.9 KB

Please help.

4

Hi,

Please try to remove the PHP code or replace hivetheme-parent-frontend with any other name, such as parent-css.

5

Hi Andrii,

When I do that, the CSS does not get applied.

Kind regards,

Jovica

6

Hello there,
I also use a child theme, but handled the custom CSS in a custom plugin instead.
Here is the code if it is of any help to you :

function add_css_header(){
	//TODO : replace lcl.css by lcl.min.css once everything is done. Of course needs the minified file needs to be updated. 
	//$css_file_url = plugins_url( 'css/lcl.min.css' , dirname(__FILE__) ); 
	$css_file_url = plugins_url( 'css/lcl.css' , dirname(__FILE__) );
	wp_enqueue_style( 'style-name', $css_file_url);
}
add_action('wp_enqueue_scripts', 'add_css_header');

Please note that this called is called from /inc/lcl-utils.php which is called for my main plugin file.
include 'inc/lcl-utils.php';

The css file (lcl.css) is located under /css/.

You may have to tweak your code (and path), is you use a different architecture.

Hope this helps.

7

Thank you, @cotasson, for your post. I would prefer to avoid additional plugins because there should be no need for it.

8

It’s really up to you. It seems you know better.

Here’s a solution that works with a child theme (I tested it).

//add to child theme's  functions.php 
function my_child_theme_enqueue_styles() {
    // Enqueue parent theme styles
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');

    // Enqueue additional CSS file
    wp_enqueue_style(
        'custom-style', // Handle
        get_stylesheet_directory_uri() . '/css/custom-style.css', // Path to CSS
        array('parent-style'), // Dependencies
        filemtime(get_stylesheet_directory() . '/css/custom-style.css'), // Cache busting
        'all' // Media type
    );
}
add_action('wp_enqueue_scripts', 'my_child_theme_enqueue_styles');
1 Like
10

There are 2 requirements for a child theme:

  1. The parent theme slug set in Template: in style.css
  2. The functions.php file with this content:
add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style( 'child-theme-style', get_stylesheet_directory_uri() . '/style.css', [ 'hivetheme-parent-frontend' ] );
	}
);

Hope this helps

11

Unfortunatley, still not working when I tried both suggestions here. It still behaves as per my original question above.

13

Please try creating these 2 files from scratch, I tested this code again and it works, but there should be no other code in functions.php:

add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style( 'child-theme-style', get_stylesheet_directory_uri() . '/style.css', [ 'hivetheme-parent-frontend' ] );
	}
);

The issue with the snippet in the first post is that is re-registers the hivetheme-parent-frontend style, and the Customizer styles are not loaded because the original hivetheme-parent-frontend style is disabled. If you load the child theme’s CSS only, it should be ok.

14

Hi Ihor,

Thanks for your suggestion, I tried it but it did not work.

It makes me wonder if the comment on top of the child theme CSS is somehow wrong. It was created automatically, but still worth checking it:

image
image963×325 11 KB

Is there something wrong there?

Kind regards,

Jovica

15

Remove the stars.
Just keep the opening and closing ones.

TLDR;

/*
* This
* is
* not 
* correct
*/

/*
 This
 is
 correct
*/
17

Sorry for the confusion. I tested this again and created 2 files with this content:

style.css

/*
Theme Name: RentalHive Child
Template: rentalhive
Version: 1.0.0
*/

functions.php

<?php
add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style( 'rentalhive-child-style', get_stylesheet_directory_uri() . '/style.css' );
	},
	1000
);

If you create the same files, the parent CSS should be loaded, including the Customizer styles.

18

Thanks Ihor,

This definetly solves one part of the problem: Using this, main CSS is not broken anymore.

Unfortunatly, any custom CSS that I put into style.css, does not get applied. It gets applied correctly using customiser.

Kind regards,

Jovica

20

If you added files with the same content, please try testing this by adding body{background:red} to the style.css file. I re-tested the child theme with the same style and the CSS seems to be applied Awesome Screenshot

21

Thanks Ihor,

Tested it again and red background does not appear when I have it in the style.css

Kind regards,

Jovica