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

Question

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

Answer 1 · 2015-11-29T20:33:34Z

November 29, 2015 8:33pm

Hi Margaret,

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

Try adding that in.

Welcome to the Treehouse Community

Looking to learn something new?

Margaret Godowns

Margaret Godowns

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

1 Answer

Joe Consterdine

Joe Consterdine

Margaret Godowns

Margaret Godowns