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
Ben Goldman
14,626 PointsPage template not rendering correctly in WordPress.
I've been following along with the WordPress Custom Theme tutorials, and I have noticed problems with getting pages to render the way that they appear in Zac's videos. In the latest lesson, creating a two column page layout, the titles & content of both my columns just sit at the left side of the screen. Also, the fonts are not right. I'm wondering if this could be a Foundation issue? Since Foundation has issues with some browsers. (I am using Chrome on a Win 8 PC, btw.) I have tried tinkering with the column parameters, but, so far no luck. I am grateful for any help. Thanks!
<?php
/*
Template Name: Left Sidebar
*/
?>
<?php get_header(); ?>
<section class="two-column row no-max pad">
<div class="small-12 columns">
<div class="row">
<!-- Primary Column -->
<div class="small-12 medium-7 medium-offset-1 medium-push-4 columns">
<div class="primary">
<!--if there are posts, returns title & content. Else, 'Sorry, no results.' -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no results found.'); ?></p><!-- php_e = support for other languages -->
<?php endif; ?>
</div>
</div>
<!-- Secondary Column -->
<div class="small-12 medium-4 medium-pull-8 columns">
<div class="secondary">
<h2 class="module-heading">Sidebar</h2>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>
Debby Beachy
Courses Plus Student 2,096 PointsBen did you ever get this fixed as my two col. sit on the left side too?
Ben Goldman
14,626 PointsHi, Debby,
I never really did figure it out. I just deleted the project and started over. After that everything worked. Looking back over my comments on this thread, I'm guessing the Foundation files weren't being loaded for some reason. My advice would be to double check your functions.php file to make sure everything is correct. I was in a rush that week, so I couldn't afford to spend too much time on the issue. If things aren't aligning right on the page, it seems that the problem would have to be in either the CSS or the importing/including of Foundation.
If you figure out the issue, please feel free to post your answer here. I would be curious to know.
Good luck!
Debby Beachy
Courses Plus Student 2,096 PointsHi Ben, I've been really frustrated with the whole process, it seems every step of the way something is not functioning right. What I ended up doing is following along and anyway and hope it will straighten out in the end. So you went all the way back to the beginning? Yikes...time consuming for sure!
Ben Goldman
14,626 PointsIt is frustrating at first. I thought I would never learn all of the templates and what defaults to what. But it comes with time and practice. You'll be surprised how easy it will seem eventually. As far as going back to the start, that might not be as bad an idea as you might think. It's still pretty early in the course, at that point. If something isn't working, in this case, at least, it's most likely that you've missed something. So going back allows you to reinforce the process, while making sure to follow each step precisely. But I know how it is when you can't get something to work. I spent two hours yesterday troubleshooting an installation of bourbon.io into my project. Just when I was about to give up, I discovered a period that shouldn't have been there. It was calling something a class that wasn't, and screwing up the whole output for my CSS. One little period. Lol. I find that most problems are a lot simpler than they seem. The nice thing about starting over sometimes is that at least it allows you to stop being frustrated and to approach the project with a clean start.
Take care and much luck.
Debby Beachy
Courses Plus Student 2,096 PointsI'm on...delete, delete, delete... Ha! I was told once much of learning is NOT how smart you are, rather it's repetition, repetition, repetition! Thanks for the sound advice and great knowing other students going through this course that have the stick-to-itivenss to see it through to the end, for us in the thick of WordPress learning tunnel! :-)
Debby Beachy
Courses Plus Student 2,096 PointsBen, I thought I would check back with you after deleted and starting all over. I'm now at the place that I was earlier today and all is GREAT and went fast a smooth! :-) Cheers!
Ben Goldman
14,626 PointsGlad to hear it! Sometimes that's what it takes. Keep up the good work.
6 Answers
Ben Goldman
14,626 PointsI decided to simply download WordPress again, and start the site over from scratch. So far, no issues. Foundation.css seems to be loading. No errors in the console log so far. Fingers crossed.
It's killing me a little that I couldn't find the problem from before, though. I searched the files with a fine-tooth comb, but I'm on a tight time-table, so I had to move on. I guess it's all the same in the end. Except for my ego.
Ray Whitaker
2,544 PointsDid you bring all of the css files over that were in the downloadable area of the video?
I ask because the first place I think to look with an issue like that is the css. Also, re-check your
</div>
count above in the code as it seems you are missing one.
On the CSS document, find these: "small-12 medium-4 medium-pull-8 columns"
Ben Goldman
14,626 PointsHi, Ray,
Yeah, I've brought over all of the CSS. I've been following the video pretty meticulously. Also, the count on the <div> is off in the video as well. Not entirely sure I get it, either. But, I've tried different configurations with the div tags, and nothing seems to make any difference. Personally, it seems to me the row should have a closing div after the second the column. But that didn't make any difference, so I guess I'll go back to mirroring the structure from the video.
I did look up .module-heading. Changing the font size from ems to pixels worked. For some reason, em isn't registering. Very weird. Hoping I don't have to go back through all of the CSS and change every em out. Lol.
Ben Goldman
14,626 PointsUpdate: Seems that the em measures in my CSS aren't registering. Only pixels will work. I've updated my browser, but still the same. That explains the font size not rendering right. I have no idea why that is, though. Seems to me normalize would take care of these type of issues.
Ben Goldman
14,626 PointsI think I may have found a large part of the problem. When I use the js console, I see that the foundation.css file is not loading. There is a 404 error. I just need to figure out why it isn't loading. The path is correct. As well as the file extension.
This is the code from my functions.php file that calls in foundation.css.
wp_enqueue_style('foundation_css', get_template_directory_uri() . '/css/foundation.css');
If the foundation.css file isn't being loaded, I would imagine this file must have something to do with it. Does anyone know how this code. or the function that it's part of, gets executed on index.php or page.php?
Any suggestions are much appreciated.
David Tonge
Courses Plus Student 45,640 PointsIs your wp_enqueue_style() located within in a function? You might have to call on it with the add_action() function.
Should look something like:
add_action('your containing function name','foundation_css');
Ben Goldman
14,626 PointsThat's correct, David. It's located within this function:
function wpbg_theme_styles()
and called by this function:
add_action('wp_enqueue_scripts', 'wpbg_theme_styles');
Does the personalized prefix (in my case, the 'wpbg_' above) need to match the prefix in my database? That's the only other thing I can think of.
Ben Goldman
14,626 PointsBen Goldman
14,626 PointsOne other thing. I have been able to adjust the titles by replacing the column data with inline-css. This, however, is not a great solution, as you can imagine. Especially since the responsive features of the foundation columns would be lost.
I should also add that I am working in a local environment.