Adding grid.css to a Child Theme

Hi @m4j4,

The function seems being ok. If I were you, I would add also the dependencies($deps), making sure all the files are loading on the order you need.

Turn the DEBUG ON and Check on the HTML generated if the CSS files are showing up.

Thanks you. So the function seems to be ok. And yes if I use Chrome inspector it it listed in the head.

I’ve also turned on debug.

But it seems that I’ll have to make one step backwards as I’m not even able to make my normal style.css (the one that’s directly in the theme folder) working.

I change something very little there, for example this:

.site-branding {
text-align: left; /* Original position is center */
}

And nothing happens on the page. Site branding stays centred.
However, in the Inspector both styles are listed separately. So it somehow gets the new left option but does not follow it.

I think I’m doing something wrong generally concerning css in a child theme.
Do you may be know what that could be?

Hi @m4j4,
Is there any chance your server using a cache like plugin or even a VARNISH?

Try locally and it might work. Check your html if’s appearing the styles like so:

<link rel=”stylesheet” href=”https://m4j4.url.com/grid.css&#8221; />
<link rel=”stylesheet” href=”https://m4j4.url.com/parent-style.css&#8221; />
<link rel=”stylesheet” href=”https://m4j4.url.com/child-style.css&#8221; />

PS: Try removing the param PHP_INT_MAX as I don’t believe is necessary

Hi, Leo and thanks for helping me.

1. I’ve realised that the above code is wrong because I’ve forgotten to change parent-style to pho. So I have now this function in my pho-child/functions.php and it works fine.

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'pho', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'pho-child', get_stylesheet_uri(), array('pho')  );
}

2. The above function still does not have an extra pho-child/css/grid.css included. I’ve tried adding this (please look at the third line) but it does not work:

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'pho', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'pho-child', get_stylesheet_uri(), array('pho')  );
    wp_enqueue_style( 'grid', get_template_directory_uri() . '/css/grid.css');
}

3. I’ve also remembered to put all the content form pho-child/css/grid.css into pho-child/styles.css so I do not really need to know how to enqueue grid.css separately. Nevertheless, if you know I would be happy to learn.

Thanks for all your help,
M4j4

Hi, In the meantime I’ve found a way to do it using get_stylesheet_directory_uri()

So this needs to be written in the pho-child/functions.php:

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'pho', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'pho-child', get_stylesheet_uri(), array('pho')  );
    wp_enqueue_style( 'grid', get_stylesheet_directory_uri() . '/css/grid.css');
}

Nice one!