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

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

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>

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?