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
Evan MacAlpine
7,173 PointsMenu items not linking in wordpress template.
I have single level menu in my worpress header that I created using the wysiwyg editor, choosing items from the pages section of the sidebar. Unfortunately, when I click on the links, they don't lead anywhere. The menu stays open and I stay on the home page. Any help is appreciated.
Here's the header.php file:
<!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( '|', true, 'right' ); bloginfo( 'name' ); ?></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>
<?php
$defaults = array(
'container' => 'false',
'theme_location' => 'primary-menu',
'menu_class' => 'no-bullet',
);
wp_nav_menu( $defaults );
?>
<!--
<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>
Edit
Here's my functions.php file
<?php
add_theme_support( 'menus' );
add_theme_support( 'post-thumbnails' );
function wpt_excerpt_length( $length ) {
return 16;
}
add_filter( 'excerpt_length', 'wpt_excerpt_length', 999 );
function register_theme_menus () {
register_nav_menus(
array(
'primary-menu' => __('Primary Menu')
)
);
}
add_action( 'init', 'register_theme_menus' );
function wpt_create_widget( $name, $id, $description ) {
register_sidebar(array(
'name' => __( $name ),
'id' => $id,
'description' => __( $description ),
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="module-heading">',
'after_title' => '</h2>'
));
}
wpt_create_widget( 'Page Sidebar', 'page', 'Displays on the side of pages with a sidebar' );
wpt_create_widget( 'Blog Sidebar', 'blog', 'Displays on the side of pages in the blog section' );
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' );
?>
4 Answers
Kenneth Love
Treehouse Guest TeacherCan you post the generated HTML for that menu? Not your Wordpress theme/PHP code, but the HTML that actually shows up in the browser. Thanks.
Chris Ramacciotti
Treehouse Guest TeacherWhat does the browser's status bar show when you hover over those menu items? Does it show the correct URL? And what happens when you paste that URL into the address bar? Does the browser render the correct page? If so, It looks like you may have some rogue JS.
Evan MacAlpine
7,173 PointsHi Chris. Upon hover the following links display: http://ca-apple20-nb.local:5757/contact/ , http://ca-apple20-nb.local:5757/portfolio/ , http://ca-apple20-nb.local:5757/about-me/ . When pasted into a new window a blank page is displayed (aka. not the correct one). It should be mentioned that I'm using Codekit to streamline some of my coding workflow and it seems that it generates it's own urls for live preview purposes.
Chris Ramacciotti
Treehouse Guest TeacherThe fact that the URLs don't lead anywhere when directly visited in a new tab tells me that there's something wrong with how Wordpress is fetching content. What are your permalink settings? Post name?
As for your browser not navigating to the links you've clicked on, this tells me that there is likely a JS problem. Have you used the developer tools in your browser to view any errors that might be occurring? If so, what are the errors that you're seeing?
Evan MacAlpine
7,173 PointsHi Chris. You're correct, my permalink settings are set to Post name. There aren't any errors displaying in the console that I can see.
Evan MacAlpine
7,173 PointsAlso, here's my header.php file. Maybe there are some bugs in there that I missed?
<!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( '|', true, 'right' ); bloginfo( 'name' ); ?></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>
<?php
$defaults = array(
'container' => false,
'theme_location' => 'primary-menu',
'menu_class' => 'no-bullet',
);
wp_nav_menu( $defaults );
?>
<!--
<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>
Evan MacAlpine
7,173 PointsEvan MacAlpine
7,173 PointsThanks for checking this out! Here is the generated html: