Multiple .css files in child theme

3
votes

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;
}
2
htmlwordpresscss
post your Folder structure. – Pratik
there is post structure in my question – Damir
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

2 Answers

5
votes

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

3
votes

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.