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 trialRc Cnls2
1,178 Pointschanges wont show in porting existing header and footer in wordpress video.
changes wont show in porting existing header and footer in wordpress video.
Rc Cnls2
1,178 Points<!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
1,178 Points<?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
1,178 Pointslocation 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
22,831 PointsSo all the files do get loaded in the head and footer ? So what exactly is your problem?
Rc Cnls2
1,178 PointsI 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
22,831 PointsAny 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
1,178 PointsI 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
jQuery(document).ready(function($) {
$(document).foundation();
$( ".nav-toggle" ).click(function() {
$(this).toggleClass("open");
$("nav").fadeToggle(100);
return false;
});
});
Stanley Thijssen
22,831 Pointsthe 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
Courses Plus Student 94,610 PointsDoes 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
1,178 Pointshere is the code in my footer
<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
1,178 Pointsyes I checked the page source code and clicked on every css and js links there and it shows correctly.
Rc Cnls2
1,178 PointsI 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
10,634 PointsI 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?
Stanley Thijssen
22,831 PointsStanley Thijssen
22,831 PointsCould you show your code? Then i can take a look