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

Posted by jazib shahzad
jazib shahzad
Courses Plus Student 268 Points

My Site is not showing menu bar

HELP ME??? Menu bar is not appearing on my site although I followed Zac. Here is my Code:

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="js/index.html">Portfolio</a>
        <ul class="sub-menu">
          <li><a href="js/item.html">Portfolio Item</a></li>
          <li><a href="js/item.html">Portfolio Item</a></li>
          <li><a href="js/item.html">Portfolio Item</a></li><!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 <?php  body_class(); ?>>
    <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="js/index.html">Portfolio</a>
        <ul class="sub-menu">
          <li><a href="js/item.html">Portfolio Item</a></li>
          <li><a href="js/item.html">Portfolio Item</a></li>
          <li><a href="js/item.html">Portfolio Item</a></li>
          <li><a href="js/item.html">Portfolio Item</a></li>
        </ul>
      </li>
      <li class="parent"><a href="js/blog.html">Blog</a>
        <ul class="sub-menu">
          <li><a href="js/single-post.html">Single Post</a></li>
          <li><a href="js/author.html">Author Page</a></li>
        </ul>
      </li>
      <li><a href="js/about.html">About</a></li>
      <li><a href="js/contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

          <li><a href="js/item.html">Portfolio Item</a></li>
        </ul>
      </li>
      <li class="parent"><a href="js/blog.html">Blog</a>
        <ul class="sub-menu">
          <li><a href="js/single-post.html">Single Post</a></li>
          <li><a href="js/author.html">Author Page</a></li>
        </ul>
      </li>
      <li><a href="js/about.html">About</a></li>
      <li><a href="js/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>

index.php

<?php get_header(); ?>
<h1>Index file</h1>
<?php get_footer(); ?>

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=Asp: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' );





?>

2 Answers

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

Hello Jazib,

You header.php has double content inside it that is not valid. Because of this your html code breaks and never reaches the footer so the menu cannot be loaded on the top.

your header.php file should look like this:

<!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="js/index.html">Portfolio</a>
        <ul class="sub-menu">
          <li><a href="js/item.html">Portfolio Item</a></li>
          <li><a href="js/item.html">Portfolio Item</a></li>
          <li><a href="js/item.html">Portfolio Item</a></li>
          <li><a href="js/item.html">Portfolio Item</a></li>
        </ul>
      </li>
      <li class="parent"><a href="js/blog.html">Blog</a>
        <ul class="sub-menu">
          <li><a href="js/single-post.html">Single Post</a></li>
          <li><a href="js/author.html">Author Page</a></li>
        </ul>
      </li>
      <li><a href="js/about.html">About</a></li>
      <li><a href="js/contact.html">Contact</a></li>
    </ul>
  </nav>
</header>
jazib shahzad
jazib shahzad
Courses Plus Student 268 Points

Thank you sooooooooooooooo very much.I change the code and now it's working fine. Can i contact u in future if i have some problems?