Multiple .css files in child theme

Question

First working with child themes in WP.

I created a new folder in themes folder with the name my-theme-name-child and placed style.css file which works.

Now, the original theme has a responsive stylesheet which is located in my-theme-name/css/layout.css how do I replicate this in my child theme?

I created the folder css in my child theme and created layout.css there like this:

@import url("../my-original-theme/css/layout.css");

@media only screen and (min-width: 769px)

#header {
    padding: 20.618em 0 !important;
}

Pratik, this is for you: original theme: www.myweb.com/wp-content/themes/mytheme child theme: www.myweb.com/wp-content/themes/mytheme-child the responsive css is located here: www.myweb.com/wp-content/themes/mytheme/css/layout.css I have located the layout file in my childs theme like this: www.myweb.com/wp-content/themes/mytheme-child/css/layout I have tried placing the file in the root of the child theme but the styles are not recognized from there. Any ideas? — Damir
– Damir, Commented Mar 7, 2014 at 13:46

Nathan Dawson · Accepted Answer · 2014-03-07 12:28:27Z

4

I'd load the stylesheets directly instead. Open up functions.php inside your child theme and add the following code:

function wpse_load_parent_stylesheets() {
    wp_enqueue_style( 'layout', get_template_directory_uri() . '/css/layout.css' );
}
add_action( 'wp_enqueue_scripts', 'wpse_load_parent_stylesheets' );

Repeat wp_enqueue_style for each stylesheet you want to load.

answered Mar 7, 2014 at 12:28

Nathan Dawson

19.4k3 gold badges59 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amirhossein Rzd Over a year ago

I use this function and still it does not work. My folder and file structure is exactly like pevoje. I used the answer below, also does not work. What might be wrong?

Nathan Dawson Over a year ago

@Navid This is the correct answer to the question asked. If it isn't working for you, that doesn't mean that it's wrong. It means that you have a different problem. The answer below mine for instance references the stylesheet directory which doesn't solve the problem posed by the question.

Domain · Accepted Answer · 2014-03-11 12:03:45Z

4

After creating layout.css in the css folder of your child theme, you will have to write the below function in child theme's function.php, in order to load it:

function load_child_stylesheet() {
    wp_enqueue_style( 'layout', get_stylesheet_directory_uri() . '/css/layout.css' );
}
add_action( 'wp_enqueue_scripts', 'load_child_stylesheet' );

You can refer this article which talks of a similar issue

answered Mar 11, 2014 at 12:03

Domain

11.8k3 gold badges26 silver badges45 bronze badges

1 Comment

stloc Over a year ago

agree with @WisdmLabs.To note that get_template_directory_uri return parent theme directory and get_stylesheet_directory_uri return child theme directory

Collectives™ on Stack Overflow

Multiple .css files in child theme

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related