Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress WordPress Theme Development WordPress Header and Footer Templates Porting existing headers and footers into WordPress

Brent Palmer
Brent Palmer
175 Points

content wrapper breaking my html after porting header and footer content into header and footer.php

I know that my wrapper container div is causing my html to break in my header.php file (see here for live site http://coafcu.ribbonwebdesign.com) and I'm not sure how to resolve except to remove this div. But once the wrapper div is removed there goes my container for main menu styles and footer. Anyone run into a similar issue when creating a container div in the header and closing it in the footer and it breaking all html in this step?

4 Answers

Ryan Boone
Ryan Boone
26,518 Points

The code looks correct. The div#wrapper is surrounding all of the content. How does it appear to be breaking?

Brent Palmer
Brent Palmer
175 Points

Are you seeing any content on the page when you visit http://coafcu.ribbonwebdesign.com , should at least see the static header and footer. With the wrapper you don't see either. Take the wrapper away and the static header and footer are visible.

Ryan Boone
Ryan Boone
26,518 Points

Okay, I dug a bit deeper into your code. Everything is there, just hidden. Your problem lies in how #wrapper is styled. Devtools shows #wrapper is set to an opacity of 0. Also, you have several console errors, the first of which is an undefined variable, $, which means you are not loading jQuery on the page. You may need to go back into your functions.php and check how you're enqueueing scripts.

As a rule of thumb, always check your console for JS errors or to see if any resources failed to load. That's usually the best place to start.

Brent Palmer
Brent Palmer
175 Points

First, thanks for taking your time to look at my mess of an attempt at creating a theme, I appreciate it. Take a look at the site now (http://coafcu.ribbonwebdesign.com) and let me know what you think. I found a work around for now with the wrapper, but does it appear that my jQuery is loading correctly? I can't seem to get my menu to drop down children in the submenu.

Thanks again

Ryan Boone
Ryan Boone
26,518 Points

jQuery is loading in the head of the document. If that's your intention, then it works. Just remember you cannot run any code in the head of the document that accesses the DOM until the entire page has loaded. You must wrap that code in the $(document).ready() function.

As far as menu children, I don't see any in the code. You may need to revisit how you've created the menu or your WordPress menu settings.