Understanding child theme functions.php

by

I have successfully created a child theme for the Emmet Lite template, using the information provided on here and here

The CSS file of the child theme looks like this:

/*
Theme name: Emmet Child
Theme URI: http://www.example.com/
Description: This is a child of Emmet Lite theme
Author: Motopress
Author URI: http://www.getmotopress.com/
Template: emmet-lite
Version: 1.0
*/

/* Adjustments to the Emmet Lite template start here */

.top-header {
display: none;  
}

.site-header {
background-color: #FFC421;
}

I firstly added the @import function, but that didn’t work for me. What I read is that the parent css was loaded after the child, so the last one wins.
To counter this I added a functions.php to my child folder and removed the @import. This looks like this:

<?php
function my_theme_enqueue_styles() {

$parent_style="parent-style";

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', 'my_theme_enqueue_styles' );
?>

So all is working correctly, the changes/overrides I made inside the style.css of the child folder are correctly applied on my website.

Understanding the situation:

My question is:

The parent Emmet theme uses CSS files called differently than style.css. The names used by this template are …

  • emmet-style.min.css
  • emmet-style.css

(They are located in the theme folder, path: emmet-lite/css/emmet-style.css)

It includes also a set of other styles for Woocommerce, Buddypress, Bootstrap, but the only file I use for editing is emmet-style.min.css.

I would like to understand what I’m doing here, even if it already works. I’m not into PHP, so from my understanding this line of code calls a wrong CSS but still works?

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

The style.css should be emmet-style.min.css or is it always style.css no matter what? I don’t see anything mentioned in the documentation when developing a functions.php which mentions to change the style.css path to the correct CSS path. So I probably misunderstand the PHP here.

Can somebody help me explain more in-depth what is going on inside the functions.php for child themes and the paths given ?

1 Answer
1

What I read is that the parent css was loaded after the child, so the
last one wins

It depends on the order in which theme developer is loading stylesheets.

Normally WordPress loads child theme’s functions.php first and then parent theme’s functions.php.

the parent Emmet theme uses CSS files called differently than
Style.css

Yes it does. The style.css in the root folder of the theme is only needed for WordPress to properly identify the theme from it’s header.

style.css doesn’t need to be enqueued if doesn’t have any CSS properties other than theme header.

We can use any other name for the stylesheets and load them differently but style.css with theme header need to be there in the root folder to be identified as a theme by WordPress.

Normally some theme developers like to organize all the stylesheets in css folder, this is also the case used by the Emmet Lite theme developer.

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css'     );

you don’t need to enqueue the above parent style.css since it doesn’t have any CSS rules.It’s just a overhead.

Then how it’s working now ?

If we take a look at parent theme’s functions.php , we can see that it loads stylesheets in the following order.

  • Bootstrap
  • Font Awesome
  • Flex Slider
  • Main Style ( /css/emmet-style.min.css )
  • …
  • …
  • Finally stylesheet uri ( which basically means active theme’s style.css)

So here the parent theme is loading the required /css/emmet-style.min.css file first and then loadin the style.css , this is the style.css of the active theme, in your case child theme’s style.css.So you don’t even need to use the following code as it is already done by the parent theme.

wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style )
);

Paths

  • get_stylesheet_directory_uri gives the current active theme folder uri.
  • get_template_directory_uri gives the parent theme folder uri if it doesn’t have one then the current theme folder.

Leave a Comment