styles from child theme not loaded for file other than style.css

Question

I have set up a Worpress page with Multisite and Multilingual Press to support english and german. Currently only working on the english version.

I use the "definition" theme of WooThemes and have set up a child theme (following this manual) to customize the design to my needs. Basically this works fine, with some exceptions.

I have created the child theme directory, adopted the example style.css to my needs (including the ../definition/style.css, Theme Name, Template). As long as I overwrite css definitions which are defined in the style.css, everthings is fine. The parent theme also defines styles in other files (e.g. themes/definition/css/layout.css). If I overwrite on of this styles, nothing happens. I have allready tried to create the same file on the same path in the child theme folder, but to no avail.

When I check with Chrome element examination (?) in the css style section, I see it is still loading the style from the parent file.

for classes in style.css it shows following url: "host/wp-content/themes/definition-child/style.css?ver=3.9.2:69"

but for classes out of css/layout.css it shows a link to the parent theme: "host/definition/css/layout.css?3.9.2:87"

to be exhaustive the style.css file:

/* Theme Name:   WooThemes Definition Calendr.it Child
 Theme URI:    TODO to be defined.
 Description:  WooThemes Definition Calendr.it Child Theme
 Author:       Andras Scheucher
 Author URI:   http://andreasscheucher.com
 Template:     definition
 Version:      1.5.0
 Tags:         TODO to be defined
 Text Domain:  definition-celendrit-child
*/

@import url("../definition/style.css");


/* =Theme customization starts here
-------------------------------------------------------------- */

....

After reading this article (and not fully understanding it) I also tried to load the css/layout.css with this functions.php:

<?php // register and enqueue the stylesheet.
add_action( ‘wp_enqueue_scripts’, ‘register_child_theme_styles’ );

function register_child_theme_styles() {
  wp_register_style( ‘style’, get_stylesheet_uri() );
  wp_enqueue_style( ‘style’ );
  wp_register_style( ‘layout’, get_stylesheet_uri() + "/css" );
  wp_enqueue_style( ‘layout’ );
} ?>

This did not help, but I assume it's not correct anyway.

Any hints, what I could try else?

If you need code parts, of the definition theme, I can give them of course...

Answer 1

The child theme's main stylesheet (style.css) is loaded after the parent theme's main stylesheet (style.css), that is why you see the changes in the child theme overriding the parent theme style.

As for the rest of your stylesheets, it is all about priority. What this means is, the custom stylesheet in your parent theme is loaded after your child theme's stylesheet, so any changes made that should affect the parent's custom stylesheet, is overridden by the custom stylesheet in the parent theme. That is why you don't see any changes.

To combat that, you'll need to create your own custom stylesheet (as you already did with layout.css) in your child theme, and load all your custom styles in there. You jus lack final execution now. Your stylesheet needs to be enqueued with wp_enqueue_style() and then it must be hooked via a function to wp_enqueue_scripts which is the proper hook to use when registering/enqueueing styles and scripts.

You have a few mistakes in your code. Firstly, you should add priority to your action. You'll need to go and check what priority is used by the parent theme to load its own layout.css. Your priority should be lower (higher number). This will ensure that your custom stylesheet loads after the parent theme's custom stylesheet.

Secondly, your path should be get_stylesheet_directory_uri() which is the properly formed URL, not get_stylesheet_uri() which is used to retrieve the current theme's stylesheet.

<?php // register and enqueue the stylesheet.
add_action( 'wp_enqueue_scripts', 'register_child_theme_styles', 9999 );

function register_child_theme_styles() {
  wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/css/layout.css' );
} 
?>

Just a point of note, if your not loading a stylesheet or script coditionaly, you don't have to register it, you can simply just enqueue it

Another point to note here, your name of your $handle should always be unique

You should also have a look at the links provided for additional info