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
Eric Nevitt
4,914 PointsEditing the Home page on the How to Build a Responsive WordPress Theme
http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial
I'm having trouble with this tutorial once I get to adding the content to the home page. http://www.allpawsgreatandsmall.com/ This is what it looks like.
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?>
<?php get_footer(); ?>
This is my code for the main index template This is my header <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>All Paws Great and Small Animal Rescue</title> <meta name="viewport" content=" width, initial-scale =1.0, user scalable = no"> <!--user-scalable--> <!-- Le styles --> <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_enqueue_script("jquery"); ?> <?php wp_head(); ?> </head>
<body> <div class="container clearfix"> <div id="header" class="grid_12"> <div id="topmenu" class="grid_12"> <ul class="topnav grid_12"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Products</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Products</a> </ul>
</li> <li><a href="#">Sponsor A Animal</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#"></a></li>
</ul> </div><!--end top menu-->
<div id="logo" class="grid_3"></div><!--end logo-->
</div><!--end-- header-->
<div id="verticalcol" class="grid_2"> <div class="animal grid_11"> <h3>Featured Animals</h3> <ul class="nav"> <li><a href="#">Dogs</a></li> <li><a href="#">Cats</a></li> <li><a href="#">Horses</a></li> <li><a href="#">Reptiles</a></li> <li><a href="#">Dinosaurs</a></li> <li><a href="#">Aliens</a></li>
</ul>
</div><!--end animal menu--> <div class="animal grid_11"> <h3>Product Menu</h3> <ul class="nav"> <li><a href="#">Dogs</a></li> <li><a href="#">Cats</a></li> <li><a href="#">Horses</a></li> <li><a href="#">Reptiles</a></li> <li><a href="#">Dinosaurs</a></li> <li><a href="#">Aliens</a></li>
</ul> </div><!--end product menu--> <div class="animal grid_11"> <h3>Mystery Menu</h3> <ul class="nav"> <li><a href="#">Dogs</a></li> <li><a href="#">Cats</a></li> <li><a href="#">Horses</a></li> <li><a href="#">Reptiles</a></li> <li><a href="#">Dinosaurs</a></li> <li><a href="#">Aliens</a></li>
</ul> </div><!--end menu-->
</div><!--end vertical menu--> <div id="content" class="grid_10">
Footer </div><!--end content--> <div id="footer" class="grid_12">
<div class="featuredpets grid_4"> <h3 class="footer">Featured Pets</h3> <div class="feature"></div> <div class="feature"></div> <div class="feature"></div> <div class="feature"></div> </div><!--end featuredpets-->
<div class="headlines grid_4"> <h3 class="footer">Featured Products</h3> <ul class="feature"><!--end featured products--> <li><a href="#">Dogs</a></li> <li><a href="#">Cats</a></li> <li><a href="#">Horses</a></li> <li><a href="#">Reptiles</a></li> <li><a href="#">Dinosaurs</a></li> <li><a href="#">Aliens</a></li> </ul> </div> <div class="headlines grid_4"> <h3 class="footer">Latest News</h3> <ul class="feature"> <li><a href="#">Dogs</a></li> <li><a href="#">Cats</a></li> <li><a href="#">Horses</a></li> <li><a href="#">Reptiles</a></li> <li><a href="#">Dinosaurs</a></li> <li><a href="#">Aliens</a></li> </ul> </div><!--end latest news-->
<p>© Gateway Designs 2013</p> </div><!--end footer--> <?php wp_footer(); ?> <?php wp_enqueue_script("jquery"); ?> <?php wp_head(); ?> </div><!--end wrapper--> </body> </html>
Theme functions
<?php
function westie_scripts_with_jquery() { // Register the script like this for a theme: wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) ); // For either a plugin or a theme, you can then enqueue the script: wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' ); ?>
9 Answers
Matt Campbell
9,767 PointsWhat exactly are you having trouble with?
Eric Nevitt
4,914 PointsWhen I cut the code so that only the get_header and get_footer so show up and then paste in the code for getting the post my content disappears. The code that is on the static page doesn't show up <?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; else: ?> <?php _e('Sorry, no posts matched your criteria.'); ?> <?php endif; ?>
<?php get_footer(); ?>
Matt Campbell
9,767 PointsSo you write, get_header and get_footer and the header and footer are on the page. But, when you then paste in the loop, it all disappears?
Eric Nevitt
4,914 PointsYes. The header and footer are still there, but the content within Main Index template disappears.
Matt Campbell
9,767 PointsHave you got the loop inside a div?
Eric Nevitt
4,914 PointsNo. The content div opens in the header and closes in the footer. The body itself doesn't have a div in it.
Matt Campbell
9,767 PointsHere's what I suggest just to make a start. Put the loop in a div in the index.php page, if that's the page you want the content on.
Then in CSS, set the height and width of the div to 100%. That will get things rolling for you. If you're going to have a containing div starting in the header and ending in the footer, use it as that. A container to constrain the site to 90% page width or give it a background etc.
Eric Nevitt
4,914 PointsI will try that and see what happens.
Eric Nevitt
4,914 PointsThe front page isn't working even after I added the content div to contain the php code on the post. http://www.allpawsgreatandsmall.com/