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

Marc Spears
Marc Spears
1,680 Points

Problems with CSS and JavaScript

I'm having a problem with my theme not looking like the example in this video. I've gone through the video twice after finishing to look for problems but am unable to find any thus far. The demo page at the 4 minute mark is what I'm after, but my page is loading like this:

(I tried a bunch of different ways listed in the forums for including images, they didn't seem to work with Photobucket, so I just pasted the direct link)

http://i649.photobucket.com/albums/uu219/Marc_Dustin_Spears/ProblemPage_zpsghodqeyq.png

My functions.php

<?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_enque_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' );

?>

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="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="index.html">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>

My footer.php

    <div class="footer-clear"></div>
<footer class="row no-max pad">
  <ul class="social-links no-bullet">
    <li><a href="" class="icon icon-twitter"></a></li>
    <li><a href="" class="icon icon-facebook"></a></li>
    <li><a href="" class="icon icon-vimeo"></a></li>
    <li><a href="" class="icon icon-youtube"></a></li>
    <li><a href="" class="icon icon-linkedin"></a></li>
    <li><a href="" class="icon icon-github"></a></li>
    <li><a href="" class="icon icon-flickr"></a></li>
    <li><a href="" class="icon icon-google"></a></li>
    <li><a href="" class="icon icon-email"></a></li>
  </ul>            
  <p>Copyright 2014</p>
</footer>

<script src="assets/js/vendor/jquery.js"></script>
<script src="assets/js/foundation.min.js"></script>
<script src="assets/js/app.js"></script>
<script>
  $(document).foundation();
</script>

  </body>
</html>

My index.php

<?php get_header(); ?>
<?php get_footer(); ?>

Any help or assistance would be much appreciated!

Marc Spears
Marc Spears
1,680 Points

Interesting, now that I've gone about three videos down in the lesson (just created the page.php file as instructed). Setting my site to use a Static Home page (set to home), the page is now blank. No error codes or anything, just blank white space.

1 Answer

Nicolas Brier
Nicolas Brier
20,437 Points

Hey Mark

Your styles are not loaded. You have a typo in your hook name in your first add_action

add_action( 'wp_enque_scripts', 'wpt_theme_styles' );

It should be wp_enqueue_scripts

[WP codex] https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

Thx

Marc Spears
Marc Spears
1,680 Points

I'm always amazed at how much difference a character or two can have! Thanks a bunch for the assist, this fixed my problems. :)