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

Margaret Godowns
Margaret Godowns
6,268 Points
Posted by Margaret Godowns
Margaret Godowns
6,268 Points

Some styles are appearing but most are not. Any ideas?

I have a few styles appearing once I call the <?php wp_head(); ?> function in header.php, but most are not (i.e. the hamburger menu). I went into the style.css file to tweak the styles just to see if they were being picked up, but they do not seem to be. Below are my files and any help would be greatly appreciated!

functions.php

<?php
function wpt_theme_styles() {
    wp_enqueue_style('foundation_css', get_template_directory_uri() . '/css/foundation.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', '/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.min.js', array('jquery'), '', false);
    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');

?>

And my header so far...

<!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="row no-max pad main">
  <h1><a class='current' href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
  <a href="" class="nav-toggle"><span></span>Menu</a>
  <nav>
    <h1 class="open"><a class='current' href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
    <ul class="no-bullet">
      <li class="current parent"><a class='current' href="<?php bloginfo('url'); ?>">Portfolio</a>
        <ul class="sub-menu">
          <li><a href="item.html">Portfolio Item</a></li>
          <li><a href="item.html">Portfolio Item</a></li>
          <li><a href="item.html">Portfolio Item</a></li>
          <li><a href="item.html">Portfolio Item</a></li>
        </ul>
      </li>
      <li class="parent"><a href="blog.html">Blog</a>
        <ul class="sub-menu">
          <li><a href="single-post.html">Single Post</a></li>
          <li><a href="author.html">Author Page</a></li>
        </ul>
      </li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

And index.php:

     <?php get_header(); ?>

My file structure is as follows: css/foundation.css css/normalize.css js/app.js js/foundation.min.js js/modernizr.js footer.php functions.php header.php index.php screenshot.png style.css

Also, when I open the console, I get the following messages (so I'm guessing there's something wrong with my funcitons.php file):

    Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost/local-wp.com/style.css?ver=4.3.1".
    Uncaught SyntaxError: Unexpected token <  jquery.js:2
    Uncaught SyntaxError: Unexpected token <  foundation.min.js:2
    Uncaught SyntaxError: Unexpected token <  app.js:2

1 Answer

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi Margaret,

you're missing 'get_template_directory_uri() .' from the last two stylesheets.

Try adding that in.

Margaret Godowns
Margaret Godowns
6,268 Points
Margaret Godowns
Margaret Godowns
6,268 Points

Joe,

That was definitely it. Not sure why I thought it wasn't needed on the final one. Thank you SO much!