Want to switch from @import to wp_enqueue for style.css plus more in child theme

Hello,

Have you visited the WordPress Codex reference on child themes? If not, I provided the link below:

https://codex.www.ads-software.com/Child_Themes

Pasting the code below in your functions.php file should do the trick:

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

}

Additionally, don’t forget the stylesheet header, the “template” part being of great importance. Let me know if this helps.

Andrew

Wow, thank you very much, so I think this is loading up the child theme stylesheet properly, but now let’s say I wanna load up a “responsive.css” in my child theme (or any other CSS I want in my child theme), how would I also add that guy? I tried the following but it wasn’t loading up my child theme’s responsive.css:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/css/responsive.css' );

}

I’m sure I’m doing something wrong, but if you could help me to load up that other CSS file in my child theme that would be awesome. I basically want to know how to enqueue any other additional CSS or JS file in my child theme.

Thanks in advance!

If these are stylesheets already in the parent theme as I am thinking, you would have to set up a dependency on the parent themee’s stylesheets, if that makes sense. Try replacing your code with the following:

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
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’)
);
}

Let me know if this helps and works. If not and you’re just trying to queue up one particular stylesheet, then this can be done differently.

Andrew

Yeah I was reading on the codex that this would help if it wasn’t loading up properly, but say for example the code below:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    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')
    );
}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/css/responsive.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/css/responsive.css',
        array('parent-style')
    );
}

The responsive.css that’s in my child theme isn’t being loaded. I’m assuming I’m doing something wrong here, but just curious how to go about loading that responsive.css from my child theme.

Thanks again!

Is the responsive.css something you created or did it come with the parent theme? This will help me with what I’m thinking needs to be done. Thanks

Andrew

It’s from the parent theme. Basically what I’m trying to do is adjust a particular line of code so that at horizontal mobile sizes, it pushes the content to 90% of the width (currently it’s like 480px, so it doesn’t fill up the space when switched to horizontal viewing). Only way to do that would be to change that line in the parent theme’s responsive.css which lives in the css folder in the parent theme. That’s why I’d like to just load up an edited version of that responsive.css in my child theme so whenever I update the parent theme there are less things to tweak every time.

Hope this makes sense!

I think I see. With wp_enqueue, all of the parent’s styles load, it’s just a particular style you want to change, right? Are you familiar with Google’s developer tools or Firebug in Firefox? Any styles you place in your child theme’s style.css file will override that of the parent theme’s styles. So using Firebug or something you could get the selector, maybe id or class and change it that way. Or, if that doesn’t work and you have a code editor, open the responsive.css file up in your code editor, change what you need to, then putting that file in your then try placing the below in your function in the functions.php file.

wp_enqueue_style(‘responsive_css’, get_template_directory_uri() . ‘/css/responsive.css’ );

Let me know if this helps and if I’m understanding correctly.

Hey thanks for the reply. So yeah, through the inspector I can see which line of code I have to change, the problem I think is that the responsive.css supersedes everything else, so just dropping the same code in my child style.css does nothing. The original line of code also has an !important tag originally, so only way that I’ve been able to get everything to work is to comment out that line in the original responsive.css. Here is what it looks like originally:

@media only screen and (min-width: 480px) and (max-width: 690px) {

 	body .container, body div.slider-nav {
    	max-width: 420px!important;
  	}

And this is what I need it to be:

@media only screen and (min-width: 480px) and (max-width: 690px) {

 	body .container, body div.slider-nav {
    	max-width: 90%!important;
  	}

I tried putting in the code you suggested, but it didn’t seem to enqueue the responsive.css in my child theme. When I look in the inspector at the head, I see two versions of the responsive.css being pulled, with ids of “responsive-css” and “responsive_css-css”, but both from the parent theme. Just still not sure how to get it to load the child theme version.

Thanks again for your help!

Sure, no problem. Yes, what you said with the responsive-css and responsive_css-css doesn’t seem right. I would take that out and just put the original PHP to enqueue the style.css. I think I had a bit of a dumb moment. If you haven’t already tried, just copy the responsive.css from the parent to your child theme directory where style.css and functions.php reside. Then you can edit that file under Appearance > Editor and I believe it should do what you want. Hopefully this helps.

Andrew

I may be mistaken, but I don’t think you should have to enqueue all of the CSS files come to think of it.