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
Marc Spears
1,680 PointsProblems with CSS and JavaScript
I'm having a problem with my theme not looking like the example in this video. I've gone through the video twice after finishing to look for problems but am unable to find any thus far. The demo page at the 4 minute mark is what I'm after, but my page is loading like this:
(I tried a bunch of different ways listed in the forums for including images, they didn't seem to work with Photobucket, so I just pasted the direct link)
http://i649.photobucket.com/albums/uu219/Marc_Dustin_Spears/ProblemPage_zpsghodqeyq.png
My functions.php
<?php
function wpt_theme_styles() {
wp_enqueue_style( 'foundation_css', get_template_directory_uri() . '/css/foundations.css' );
wp_enqueue_style( 'normalize_css', get_template_directory_uri() . '/css/normalize.css' );
wp_enqueue_style( 'normalize_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_enque_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' );
?>
My 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>
My footer.php
<div class="footer-clear"></div>
<footer class="row no-max pad">
<ul class="social-links no-bullet">
<li><a href="" class="icon icon-twitter"></a></li>
<li><a href="" class="icon icon-facebook"></a></li>
<li><a href="" class="icon icon-vimeo"></a></li>
<li><a href="" class="icon icon-youtube"></a></li>
<li><a href="" class="icon icon-linkedin"></a></li>
<li><a href="" class="icon icon-github"></a></li>
<li><a href="" class="icon icon-flickr"></a></li>
<li><a href="" class="icon icon-google"></a></li>
<li><a href="" class="icon icon-email"></a></li>
</ul>
<p>Copyright 2014</p>
</footer>
<script src="assets/js/vendor/jquery.js"></script>
<script src="assets/js/foundation.min.js"></script>
<script src="assets/js/app.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
My index.php
<?php get_header(); ?>
<?php get_footer(); ?>
Any help or assistance would be much appreciated!
1 Answer
Nicolas Brier
20,442 PointsHey Mark
Your styles are not loaded. You have a typo in your hook name in your first add_action
add_action( 'wp_enque_scripts', 'wpt_theme_styles' );
It should be wp_enqueue_scripts
[WP codex] https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
Thx
Marc Spears
1,680 PointsI'm always amazed at how much difference a character or two can have! Thanks a bunch for the assist, this fixed my problems. :)
Marc Spears
1,680 PointsMarc Spears
1,680 PointsInteresting, now that I've gone about three videos down in the lesson (just created the page.php file as instructed). Setting my site to use a Static Home page (set to home), the page is now blank. No error codes or anything, just blank white space.