Still in editing – Learning To Use WordPress Child Themes And Their css For Styling

Problem pending – still working on it…

A while ago I created a child theme for a wordpress theme we kinda liked to run a woocommerce shop.

I did a lot of minor styling of this theme to match it to our needs adding some classes or overwriting some of the parent theme’s classes in my child theme’s style.css.

This worked out fine until I came across a class that got some arguments from a style.css which was not the parent style theme’s but somewhere deeper in that parent theme from an include of the woocommerce plugin.

Adding a class in my browsers developer mode showed me the exact result I was aiming for. But as my child theme’s style.css appeared not to be the last one in the cascade the operation of adding theses classes there failed.

This was one of this things I really had now clue where to start searching…

As a developer and friend of mine suggested I asked Mr. Google what do do. I came across a thread on wordpress.stackexchange.com where Pieter Goosen seems to give the answer to my problem. – If I only understood. – And here some learning has to be starting.

What is the problem?

My child theme’s style.css is not the last .css in the cascade. Thus some classes get overwritten.

What’s my aim?

I want to make sure that my child theme’s style.css will be the last one in the cascade so I don’t have to do changes in multiple .css (that I might loose with updates of the parent theme).

What does Pieter tell us?

properly enqueue and add the parent stylesheet to the childtheme

He proposes to use this code:

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

Right – the question that arises for me: Where do I have to put that code?

Following his link to the codex of child themes I find it has to be enqueued in my child theme’s functions.php.

So let’s take a look at that file. There I find:

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

To be hones that looks pretty much the same for me except that php tells wordpress: Hey – if you load your scripts, do also load my:

enqueue_parent_theme_style

(this is for the codex version)

theme_enqueue_styles

(this is in my functions.php)

Let’s try if this makes any difference!

Nope. As I assumed you might use any name here as you tell wordpress in the second line of code what you mean by the name given.

Even following the idea to manually enqueue FIRST the parent theme’s style sheets and SECOND the child theme’s as shown in the child theme codex does not prevent this woocommerce style sheet beeing called up later in the cascade.

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’s ask Google again!

In a quite old discussion on github.com I find some info about my problem and some ideas how to solve. Yet all of them seem to be solutions that either don’t work anymore in current versions of woocommerce or I don’t get how to make them work for me.

Still working on that problem…

 

Leave a Reply

Your email address will not be published. Required fields are marked *

12 − one =