Setting up separate responsive.css for a child theme

an easy way is to just put this at the top or bottom of your stylesheet:

@import url(‘/css/responsive.css’);

or the right way:

// enqueue styles for child theme
function example_enqueue_styles() {
	
	// enqueue parent styles
	wp_enqueue_style('parent-theme', get_template_directory_uri() .'/style.css');
	
	// enqueue child styles
	wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
	
}
add_action('wp_enqueue_scripts', 'example_enqueue_styles');

You don’t need to replicate the parent’s file content. Just add what ever overriding CSS you want. HVWD’s “right way” example has a couple flaws in this particular case. One is the file name will not be style.css in this case, but /css/responsive.css. Thus the tag names should likely be something more like responsive-child and responsive-style (maybe, see below)

The other is a very common error that’s been perpetuated ever since the “right way” was changed to use wp_enqueue_style(). The Codex example uses ‘parent-theme’ in it’s example, but everyone should be using the actual tag used by their parent theme. I’ve edited the relevant Codex page in hopes of explaining this better. After the jump scroll down to the line starting with “where parent-style is the same $handle used…”

Thank you both! Tried both variants, got both working, stuck with the final one since it seems semi-official ??

Hm, follow-up, seems like I didn’t get everything quite right. As bcworkz suggested, copying all of responsive.css into my child theme wasn’t necessary, so I decided to just have the child theme’s responsive.css contain the actual changes I needed.

Doing so, however, I discovered that the responsive.css file of the parent seems to take priority. After looking closer with Firebug, I think I may have found the issue. Some function somewhere in WordPress appends a version number to the stylesheets, and appears to prioritize the newer sheet. I made this screenshot to demonstrate:

In the parent theme, .menu-toggle gives the hamburger menu an orange color (#e3633b). In my child theme’s responsive.css, I added an identical .menu-toggle class with a green color (#50b200). The browser, however, ignores this. Note how Firebug lists it with a version number of 1.0 (responsive.css?ver=1.0). It does the same for everything I put in the child theme’s responsive.css file. Code from the parent theme’s responsive.css file, on the other hand, gets a version number of 4.7.3, which is equal to my current WordPress install.

Would I be right in assuming that the browser prioritizes what it perceives to be the more up-to-date stylesheet? If so, how do I make WordPress append the “correct” version number to my child theme’s responsive.css?

I noticed that there was something about versions in the PHP I added to functions.php earlier. Perhaps the answer’s there somewhere? Here’s the exact PHP I ended up adding to my child theme’s functions.php:

function my_theme_enqueue_styles() {

    $parent_style = 'accesspress-parallax-responsive-style';

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

• This reply was modified 8 years ago by LarsMigrant.

The version number shouldn’t affect the load order, since each file is a completely different, valid file. What is supposed to affect load order is the dependencies argument: array( $parent_style ). There may be a bug in the WP dependency management algorithm. While we should file a Trac ticket and wait for a fix to be committed, that does not solve the immediate problem.

Try hooking ‘wp_enqueue_scripts’ with a large priority argument number, for example:
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 1000 );

That did the trick, great, thank you ??