Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress WordPress Theme Development WordPress Header and Footer Templates Porting existing headers and footers into WordPress

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

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

Joe,

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