0

I have made a child theme of a themify theme. I used thier example on enqueuing as well as my own. In both cases the child css is loaded after the parent.

Loaded on Line 53

<link rel='stylesheet' id='parent-style-css'  href='https://example.com/wp-content/themes/themify-ultra/style.css?ver=4.7.3' type='text/css' media='all' />

Loaded on Line 69

<link rel='stylesheet' id='theme-style-css'  href='https://example.com/wp-content/themes/Ultra-Child/style.css?ver=1.0.0' type='text/css' media='all' />

However the elements in the line 53 file override the 69 file. I have tried a few things that have changed positions and one that even loads the same child stylesheet twice. The earlier stylesheet caches and overrides unless I change the version number. It still overrides but will update if I change the version. Exact same elements in both files, one change, no !important. Why is the first one overriding the second?

This is the entire Child functions.php:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

function theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'theme_enqueue_parent_styles', 9);

function theme_enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
  • Could you please post some of the actual code, no one can answer your question with out it. – ngearing Mar 16 '17 at 22:29
  • I added the child function.php. CSS is a ton. But my testing has been trying to change h1, h2, h3, h4, h5, h6. The styles load from the child and parent stylesheets. But in the google developer console the parents are above the child. Not overriding from underneith like when you use !important – JpaytonWPD Mar 16 '17 at 23:04
  • This still isn't enough, can you post a screenshot of your dev console? And the <head> of your site where the styles are being loaded. Are you loading the parent css multiple times perhaps? – ngearing Mar 17 '17 at 2:51
1

I looked at my child theme's functions.php and I found that I had commented out the line to enqueue the child style.css. I'm guessing that the stylesheet is loaded automatically because that is the active theme. I would suggest you try not explicitly loading your child theme's stylesheet and see if that helps.

P.S. Only include the styles in your child stylesheet that need to be overridden. In other words, at this point, you should only have styles for h1, h2, h3, et al.

  • That was the original code, which does work in the sense that the child css is loaded after the parent. But ether way even with the child css loading later on the resulting HTML the Parent elements still override. – JpaytonWPD Mar 16 '17 at 23:51
0

Themifies built in minification was inlining the parent CSS after the child. Which is why I could not find it, I was not looking for inline CSS.

Chromes console still showed it as the remote CSS file even though it was inlined.

Disabling the built in minification fixed the issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.