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 WordPress Theme Development WordPress Header and Footer Templates Porting existing headers and footers into WordPress

Posted by Gabriel Ward
Gabriel Ward
20,222 Points

Importing CSS styles

I'm having a go at creating a basic header and footer template using different CSS and HTML from what Zac is using. At the moment the CSS styling is not importing into the header.

I've followed all the steps but can't see where I've gone wrong. Here's my functions.php 

<?php

function ftd_theme_styles() {

    wp_enqueue_style( 'grid_css,', get_template_directory_uri() . '/css/grid
        .css');
    wp_enqueue_style('normalize_css,',get_template_directory_uri() . '/css/normalize
        .css'); 
    wp_enqueue_style( 'normalize_css,', 'http://fonts.googleapis.com
        /css?family=Montserrat' ); 
    wp_enqueue_style( 'main_css,', get_template_directory_uri() . '/style
        .css');  
}
add_action( 'wp_enqueue scripts', 'ftd_theme_styles');

?>

here's my header.php

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><?php wp_title(); ?></title>


    <?php wp_head(); ?>

</head>
<body>
    <header class="main-header">
        <div class="grid-container">        
            <h1 class="grid-2 main-logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
            <ul class="grid-8 main-nav">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </div>
    </header>

Thanks so much for any help.

6 Answers

Lucas Santos
Lucas Santos
19,315 Points

You have:

add_action( 'wp_enqueue scripts', 'ftd_theme_styles');

You're missing the underscore _ in between enqueue and scripts in your action.

Should be:

add_action( 'wp_enqueue_scripts', 'ftd_theme_styles');
Gabriel Ward
Gabriel Ward
20,222 Points

Thanks Lucas, such a simple typo! I feel so much of computer coding is about proof reading one's code.

Lucas Santos
Lucas Santos
19,315 Points

No problem, yeah just have to re-check and test your code often.

Jimmy Smutek
seal-mask
.a{fill-rule:evenodd;}techdegree
Jimmy Smutek
Python Web Development Techdegree Student 6,629 Points
Jimmy Smutek
.a{fill-rule:evenodd;}techdegree
Jimmy Smutek
Python Web Development Techdegree Student 6,629 Points 
wp_enqueue_style( 'foundation_css', get_template_directory_uri() . 'css/foundations.css' );

Looks like you're missing the slash in the first enqueue, and should "foundations" be "foundation"? Ie:

wp_enqueue_style( 'foundation_css', get_template_directory_uri() . '/css/foundation.css' );
Thas Eagans
PLUS
Thas Eagans
Courses Plus Student 2,533 Points
Thas Eagans
Thas Eagans
Courses Plus Student 2,533 Points

I'm not the best with PHP, but it seems like.....

   wp_enqueue_style( 'grid_css,', get_template_directory_uri() . '/css/grid
        .css');
    wp_enqueue_style('normalize_css,',get_template_directory_uri() . '/css/normalize
        .css'); 
    wp_enqueue_style( 'normalize_css,', 'http://fonts.googleapis.com
        /css?family=Montserrat' ); 
    wp_enqueue_style( 'main_css,', get_template_directory_uri() . '/style
        .css');

Should be

   wp_enqueue_style( 'grid_css', get_template_directory_uri() . '/css/grid
        .css');
    wp_enqueue_style('normalize_css', get_template_directory_uri() . '/css/normalize
        .css'); 
    wp_enqueue_style( 'normalize_css', 'http://fonts.googleapis.com
        /css?family=Montserrat' ); 
    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style
        .css');

You got an extra comma in there before the quotation.

</TREagans>

Gabriel Ward
Gabriel Ward
20,222 Points

Thanks. You're right on that. Unfortunately the styles are still not importing even after I've fixed that.

Lucas Santos
Lucas Santos
19,315 Points

The script actually still runs even with the comma there. But it's good idea to not leave any commas after the first parameter.

Jimmy Smutek
.a{fill-rule:evenodd;}techdegree
Jimmy Smutek
Python Web Development Techdegree Student 6,629 Points

** Edit ** Disregard, just noticed you've got it solved. :)

Did you try inspecting the output with dev tools, to see where the browser is looking for the files?

Usually, for me, seeing where the browser is looking, vs where I thought I told it to look is a huge help.

Thas Eagans
PLUS
Thas Eagans
Courses Plus Student 2,533 Points
Thas Eagans
Thas Eagans
Courses Plus Student 2,533 Points

Understood.

</TREagans>

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

Hi all!

My site content is showing but my styling isn't. I would greatly appreciate if someone could take a look at my function file and see if the problem is there.

Thank you so much!

<?php

function wpt_theme_styles() {

    wp_enqueue_style( 'foundation_css', get_template_directory_uri() . 'css/foundations.css' );
    wp_enqueue_style( 'normalize_css', get_template_directory_uri()  . '/css/normalize.css' );
    wp_enqueue_style( 'normalize_css', 'http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' );
    wp_enqueue_style( 'main_css', get_template_directory_uri() .  'style.css' );
}
add_action(  'wp_enqueue_scripts', 'wpt_theme_styles' );

function wpt_theme_js() {

    wp_enqueue_script( 'modernizr_js',  get_template_directory_uri() . '/js/modernizr.js', '', '', false );
        wp_enqueue_script( 'foundation_js',  get_template_directory_uri() . '/js/foundation.js', array('jquery'), '', true );
        wp_enqueue_script( 'main_js',  get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true );
}
add_action( 'wp_enqueue_scripts', 'wpt_theme_js' );


?>
tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

Thanks jimmy!