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 trialGabriel Ward
20,222 PointsImporting 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
19,315 PointsYou 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');
Jimmy Smutek
Python Web Development Techdegree Student 6,629 Pointswp_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
Courses Plus Student 2,533 PointsI'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
20,222 PointsThanks. You're right on that. Unfortunately the styles are still not importing even after I've fixed that.
Lucas Santos
19,315 PointsThe 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
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
Courses Plus Student 2,533 PointsUnderstood.
</TREagans>
tuukka uosukainen
22,107 PointsHi 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
22,107 PointsThanks jimmy!
Gabriel Ward
20,222 PointsGabriel Ward
20,222 PointsThanks Lucas, such a simple typo! I feel so much of computer coding is about proof reading one's code.
Lucas Santos
19,315 PointsLucas Santos
19,315 PointsNo problem, yeah just have to re-check and test your code often.