How to correctly enqueue the parent and child theme stylesheets in the creation of a child theme?

I have to create a child theme to implement some changes to a WordPress theme and avoid that these changes are lost when the theme will be update.

So I have some doubt about how do it.

I am following this official tutorial: https://codex.wordpress.org/Child_Themes

So I have create the child theme directory (named accesspress-parallax-child because the directory of the original theme is accesspress-parallax) into the WordPress wp-content/themes/ directory of my WordPress installation and I

Into this new folder I have put the style.css* and the **functions.php file.

Into the style.css file I have put this commented code (as explained into the documentation):

/*
 Theme Name:   Accesspress Parallax Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Accesspress Parallax Child Theme
 Author:       Andrea Nobili
 Author URI:   http://example.com
 Template:     accesspress-parallax
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  accesspress-parallax-child
*/

Now, it say, that I have to enqueue the parent and child theme stylesheets putting into the functions.php file this code:

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

}

Now I have two doubts:

1) in the previous code snippet have I to referer my parent theme in some way or not? How it know what is the parent theme?

2) Into the documentation it say:

The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.

What exaclty means? Into my original theme I have more than a single .css file. Infact into the original theme I have a css directory that contains many css files.

What have I to do to solve this problem?

Tnx

Answers 1

  • Check this codex page.

    In the event that a child theme is being used, the parent theme directory URI will be returned.

    So if you want to include your other css files you just need to all your CSS files:

    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'custom-handler-one', get_template_directory_uri() . '/custom-css-one.css' );
        wp_enqueue_style( 'custom-handler-two', get_template_directory_uri() . '/custom-css-two.css' );
        ...
        wp_enqueue_style( 'custom-handler-n', get_template_directory_uri() . '/custom-css-n.css' );
    }
    

    Please note that some themes are coded in strange ways so this methodology may not always work. If you share the theme's name or how the styles are included more detailed description can be provided :).


Related Questions