Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Maja B.
Maja B.
12,984 Points
Posted by Maja B.
Maja B.
12,984 Points

WP Child Theme: How to attach another CSS file?

Hi, I'm making a child theme of a WordPress theme named Pho. I have successfully connected the two by opening a folder pho-child and writing this lines 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')  );
}

Now I need to enqueue another CSS document called grid.css.

I've placed it into the folder pho-child/css

So what should I do to enqueue that one, too?

I've tried this (see the last line that I've added) 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');
}

Anyone knows what needs to be done?

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Hey, in the meantime I've found the way to solve this problem. I'll put the content from pho-child/css/grid.css into pho-child/style.css and that's it. Simple ...

Nevertheless, if someone knows how to enqueue grid.css separately I'll be more than happy to learn.

1 Answer

Alvin Rudiyanto
Alvin Rudiyanto
13,149 Points
Alvin Rudiyanto
Alvin Rudiyanto
13,149 Points

Hi Maja, 

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');
}

get_template_directory_uri() is looking to parent directory, while get_stylesheet_directory_uri() look through the child theme directory

function reference

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Hi, Alvin,

Thanks for helping me. I've done what you say:

wp_enqueue_style( 'grid', get_stylesheet_uri() . '/css/grid.css');

but if I inspect the page with Google Inspector to see what it generates it does that (style.css gets into the code even though it's not wanted):

<link rel="stylesheet" id="grid-css" href="http://localhost/myproject/wp-content/themes/pho-child/style.css/css/grid.css?ver=4.0" type="text/css" 
media="all">

I've also tried putting grid.css directly into pho-child folder and enqueue it like you've said:

wp_enqueue_style( 'grid', get_stylesheet_uri() . '/css/grid.css');

but again style.css gets into the code and "messes up the link":

<link rel="stylesheet" id="grid-css" href="http://localhost/myproject/wp-content/themes/pho-child/style.css/css/grid.css?ver=4.0" type="text/css" 
media="all">

If you have some other idea what to do, please let me know. Thanks :)

Alvin Rudiyanto
Alvin Rudiyanto
13,149 Points
Alvin Rudiyanto
Alvin Rudiyanto
13,149 Points

oops, i forgot to add "_directory" in between. I've updated the answer, it should work now

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Great! This is now it. Thank you!!!!