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

Joe Consterdine
Joe Consterdine
13,965 Points
Posted by Joe Consterdine
Joe Consterdine
13,965 Points

CSS appears to be working, but menu isn't working as shown in the video.

Hi guys,

I've followed everything in the videos but on the video it shows a menu tab and then "portfolio" with CSS styling.

When I load mine the menu is shown in text with no tab and the portfolio isn't showing the same styling.

The fonts do look styled though.

Here is my code:

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 ( 'googlefont_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');

?>

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>

Footer.php

<div class="footer-clear"></div>
<footer class="row no-max pad">
  <p>Copyright <?php echo date('Y');?></p>
</footer>

<?php wp_footer(); ?>

  </body>
</html>

Thanks Joe :)

2 Answers

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

I figured it out in the end.

The problem was there was no '/' infront of my 'style.css'.

So my question is this, why do we need that '/' front of our folders?

I was wondering this before, it seems like the it's completely necessary, but obviously it isn't haha.

Why do we need it?

Thanks

Heidi Bada
Heidi Bada
14,197 Points
Heidi Bada
Heidi Bada
14,197 Points

Thank you Joe, that helped me too. In the functions.php file, the enqueue line that brings in style.css is:

wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css');

All of a sudden my notes work correctly and my site looks like the one in the video.