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

Rc Cnls2
Rc Cnls2
1,178 Points
Posted by Rc Cnls2
Rc Cnls2
1,178 Points

changes wont show in porting existing header and footer in wordpress video.

changes wont show in porting existing header and footer in wordpress video.

Stanley Thijssen
Stanley Thijssen
22,831 Points
Stanley Thijssen
Stanley Thijssen
22,831 Points

Could you show your code? Then i can take a look

Rc Cnls2
Rc Cnls2
1,178 Points
Rc Cnls2
Rc Cnls2
1,178 Points
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>
Rc Cnls2
Rc Cnls2
1,178 Points
Rc Cnls2
Rc Cnls2
1,178 Points
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.min.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' );



?>
Rc Cnls2
Rc Cnls2
1,178 Points
Rc Cnls2
Rc Cnls2
1,178 Points

location of css and js files are 100% correct. checked them so many times. Also I've checked it by using view page source and it is correct and being loaded.

Stanley Thijssen
Stanley Thijssen
22,831 Points
Stanley Thijssen
Stanley Thijssen
22,831 Points

So all the files do get loaded in the head and footer ? So what exactly is your problem?

Rc Cnls2
Rc Cnls2
1,178 Points
Rc Cnls2
Rc Cnls2
1,178 Points

I wish I know how to insert a screenshot here but I will try my best to describe. In the video there should be a huge dark grey My Portfolio button on the top left corner of the page. But in my case its just full text that looks like this:

My Portfolio
Menu
My Portfolio

    Portfolio
        Portfolio Item
        Portfolio Item
        Portfolio Item
        Portfolio Item
    Blog
        Single Post
        Author Page
    About
    Contact
Stanley Thijssen
Stanley Thijssen
22,831 Points
Stanley Thijssen
Stanley Thijssen
22,831 Points

Any chance u have an online link?

So I guess your app.js is jquery code? and this is the code thats not working? Have you used a noconflict wrapper for your jquery code then? Because jqeury doesnt work inside wordpress without a noconflict wrapper.

This is an example of a noconflict wrapper in wordpress:

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});
Rc Cnls2
Rc Cnls2
1,178 Points
Rc Cnls2
Rc Cnls2
1,178 Points

I am developing on a localhost so I cant provide a link but here is the code for my app.js with the no conflict wrapper I copied on the lesson

app.js 
jQuery(document).ready(function($) {

    $(document).foundation();

    $( ".nav-toggle" ).click(function() {
      $(this).toggleClass("open");
      $("nav").fadeToggle(100);

      return false;
    });
});
Stanley Thijssen
Stanley Thijssen
22,831 Points
Stanley Thijssen
Stanley Thijssen
22,831 Points

the only thing i can think of now is, do you have wp_footer() at the end of your footer.php file? Else i cant really see any problems with your code right now.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Does your page look like the styles aren't being applied?

Have you checked the net or network tab in your browser's dev tools to make sure every asset is loading?

Rc Cnls2
Rc Cnls2
1,178 Points
Rc Cnls2
Rc Cnls2
1,178 Points

here is the code in my footer

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>
Rc Cnls2
Rc Cnls2
1,178 Points
Rc Cnls2
Rc Cnls2
1,178 Points

yes I checked the page source code and clicked on every css and js links there and it shows correctly.

Rc Cnls2
Rc Cnls2
1,178 Points
Rc Cnls2
Rc Cnls2
1,178 Points

I cant say that the styles wont apply since whenever I comment the normalize_css part, the changes does reflect on the browser, so I guess the css files are called correctly.

1 Answer

Zander Curtis
Zander Curtis
10,634 Points
Zander Curtis
Zander Curtis
10,634 Points

I am having this exact same problem. I even copied the above code exactly into my files and get :

My Portfolio Menu My Portfolio

Portfolio
    Portfolio Item
    Portfolio Item
    Portfolio Item
    Portfolio Item
Blog
    Single Post
    Author Page
About
Contact

Anything get resolved on this?