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
Joel Rivera
29,401 PointsFoundation 5 and WordPress
A course on creating a theme with Foundation 5 would be awesome. Any plans on doing this?
Thanks.
25 Answers
Zac Gordon
Treehouse Guest TeacherHey Joel!
Thanks for the recommendation :) I will be doing some small little projects and this could make for a good one.. I am booked for the next month or two of content creation, but I'm adding it to my list.
Thanks!
Anthony Hind
5,715 PointsHey Zac,
Yes i think small courses would be ideal or even Blog post's like your current WordPress & Bootstrap Integration was excellent, I am prepared to learn all the theme development courses as you mentioned with no issues what so ever and then to have the ability to interconnect Frameworks with Wordpess can only be a plus in my opinion I have been working on a couple of personal projects one being Twitter Bootstrap and the other Foundation 5 and I am already realising the potential of bringing frameworks into WordPress even just for the blog functionality at the minimum.
What I personally struggle with is what is the right/wrong way or even the best way to do something I could probably muddle my way through and get these Frameworks integrated myself now!, but what I love about Treehouse is that you guys point us in the right direction from a commercial and best practice point of view. So if you was to release a track that could highlight this is how you use WordPress and Foundation together and then link us into the WP Dev track or link us to the Frameworks track I think that would be suffice.
Hope I have bored you there rambling on :)
Zac Gordon
Treehouse Guest Teacher"What I personally struggle with is what is the right/wrong way or even the best way to do something I could probably muddle my way through and get these Frameworks integrated myself now!"
Ahahaha, story of learning, huh ;)
Thanks again for the course suggestion. Like I mentioned, I have my next two months of releases already done so you shouldn't expect anything until March at the earliest, but I will put it on my to do list :)
Anthony Hind
5,715 PointsI would be interested in this too Zac to go with the Bootstrap Framework courses that you mentioned in another post, it would be great to have the two framework heavy weights covered with Wordpress as I personally see that my basic static sites our always requiring the use of a blog and two have the ability to quickly work with Foundation/Bootstrap and WordPress would be invaluable.
Can you tell us what is coming Zac ?
Zac Gordon
Treehouse Guest TeacherHey man!
The next two courses coming are How to Build a Website with WordPress (full course, end of Jan) and Local WordPress Development (short course, beginning of Feb). They should be on the roadmap in the next week or so.
The tricky thing about teaching a CSS Framework/WP Theme Dev course is that I would not really be getting into either the CSS framework or the WP theme development in much detail since we have in depth courses on both of those topics. Rather, they would be short courses that show, okay here is a basic Foundations template and here are the steps you need to convert it into a simple WP theme. Then you would have to go watch the in depth CSS Framework or WP Theme Dev course to take it to the next level.
Would you still find this useful?
Anthony Hind
5,715 PointsThanks Zac
Zac Gordon
Treehouse Guest TeacherHey Anthony Hind - looks like there's a little change in plans with this project.. I'm going to be testing out doing a live workshop broadcast in two weeks and I want to try doing a Foundations template to WordPress theme project as the content. If you're willing I'd like to maybe collaborate with you a bit on helping me prep the initial Foundations template we port over to WP? Let me know :) Thanks!
Anthony Hind
5,715 PointsHi Zach,
That's great news what would you need from me?
i'd be happy to help
Thanks Anthony
Zac Gordon
Treehouse Guest TeacherAnthony Hind awesome! Could you build a static template that integrated some off canvas content, like navigation and a little text widget?
Ideally we would have a template with a homepage, single static page, blog listing page and a single blog page view. I think it may take me two workshops to show how to integrate Foundation and build the basic theme pages, but if you could do up a template ahead of time for me that I could use it would be super helpful for me! (Plus give us a chance to collaborate on a little something ;))
Anthony Hind
5,715 PointsNo problem I will get on to something asap looking forward to it.
Thanks a lot Zac
Anthony Hind
5,715 PointsHi Zac,
Whats the best way to get the files over to you?
Anthony Hind
5,715 PointsHi Zac Gordon, I have a template homepage and about us demo page ready with OFF Canvas Navigation, Modal buttons a sidebar with text widgets is there anything else you would like in the site?
Joel Rivera
29,401 PointsHey Anthony, I was wondering if you could share your Off Canvas Navigation Solution. I look forward to seeing what you and Zac put together.
Anthony Hind
5,715 PointsHi Joel, no problem I'm just out this evening but I'll get something online you can have a look at. Iv gone with the default foundation 5 method for now with only minor styling as I'm not sure if Zac will want to make it look massively different as it's more about hooking foundation and Wordpress up together but it functions great as you would expect from Zurb
Joel Rivera
29,401 PointsThanks Anthony, Have you found any issues with Foundation 5 and the fact it uses jQuery 2 vs what WordPress uses which is I think 1.10. I was also wondering if it's possible to make it compatible with IE8 using the HTML Shiv and Respond.js
Thanks again.
Anthony Hind
5,715 PointsHi Joel, Not got that far yet but checkout ZURB there is some interesting points made on there that may help you out I think Foundation 3 is the only version that supports IE8 with Foundation.
Do you have a specific reason for supporting IE8 ?
Anthony Hind
5,715 PointsHi Joel, OFF canvas demo links don't function but you will get the idea demo
Joel Rivera
29,401 PointsHey Anthony. The only reason I want to support ie8 is because my analytics says I still get a ton of visits to my site from there. So for the mean time I need to support it. Thanks for your help.
Joel Rivera
29,401 PointsThis is great news Zac Gordon - I have done a little research. Since Foundation 5 uses jQuery 2.0 and Wordpress uses jQuery 1.10 how would we deal with the conflict? By deregistering the default jQuery and then register the new one? I've also found JointsWP which is a WordPress Framework that uses Foundation 5 and it is featured on Foundations website. I was wondering if you or Anthony Hind had a chance to look at it and determine the quality of the theme.
Thanks again.
McFadden Gavender
4,893 PointsHi Joel, I'm actually the developer behind JointsWP (and a long time Treehouse user) - if you have any questions about JointsWP, don't hesitate to ask!
Joel Rivera
29,401 PointsHey Jeremy,
Thanks for replying,
Basically, I just wanted to know if there is any issues with using Foundation 5 with WordPress since they use different versions of jQuery. Also is there a way to get it to work in IE8? I know that people always ask why support IE8 when it's an old browser and rapidly being phased out, but the issue is in my area according to my analytics 30% of my traffic comes from ie8.
Thanks again for touching base and awesome job on merging Foundation 5 with WordPress.
McFadden Gavender
4,893 PointsJoel,
Sorry for the slow reply - it doesn't look like I get email notifications from the Treehouse forums.
As far as the jQuery issue goes, JointsWP de-registers the WP version of jQuery and uses jQuery 2.0. So far, I have not had any issues (or heard of any issues) with 3rd party plugins or WordPress core features.
As far as IE8 goes, a few guys on the Foundation Forum have Foundation 5 working pretty well with iE8. Some of the jQuery stuff still doesn't work 100% - but from what i remember, they were getting close. One solution brought up was to load a different version of jQuery for IE8 users.
Anthony Hind
5,715 PointsHi Jeremy,
Just looking at your theme great work!!! what is the best method for bringing in the foundation features like orbit or different Navbars, sorry if its a bit of a vague question is it just a case off manually editing the index.php file to suit??
Just going through Zac's Wordpress series now and trying to figure out the best methods for customising your setup! I use Codekit and sublime text. Would you suggest downloading your zip files and then working locally with codekit and mamp so i could customise with Sass, Do you have any blog post's or any more useful resources to help.
Cheers
Anthony
McFadden Gavender
4,893 PointsAnthony,
Thanks for the kind words! : )
As far as integrating Foundation features, you are correct. You can simply edit the files or even use the code inside the WordPress WYSIWYG editor. By design, this theme is shortcode free.
You are also correct when it comes to the Sass workflow - you are going to have to work locally in order to take advantage of the Sass features.
I don't have any detailed documentation (as most of the time I simply link people to the Foundation documentation). However, I may add some basic documentation to the website during its next refresh.
If you have anymore questions, feel free to ask! I'm always glad to help.
Zac Gordon
Treehouse Guest TeacherHi Joel Rivera I haven't really started researching this too much yet. I'm aware other themes exist out there and this would in no way be a comprehensive theme we would build out here. The jQuery situation will be an interesting one, I look forward to figuring out the best solution ;)
McFadden Gavender
4,893 PointsZac, it is fairly simple. For JointsWP I simply de-registered the default jQuery and used the Google CDN to run jQuery 2.0.
McFadden Gavender
4,893 PointsZac, it is fairly simple. For JointsWP I simply de-registered the default jQuery and used the Google CDN to run jQuery 2.0.
Anthony Hind
5,715 PointsHey Zac Gordon
Just working with Foundation 5 and the WordPress template that we created got everything functioning OK which is great but you sparked the idea of putting some widgets into the OFF Canvas right nav bar.
So just as a test I dropped in some static code into the sidebar-off-canvas.php file below the code we used in the initial template
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<?php
$args = array (
'theme_location' => 'off-canvas',
'items_wrap' => '%3$s',
'container' => ''
);
wp_nav_menu( '$args' );
?>
</ul>
</aside>
<!-- OFF CANVAS RIGHT -->
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li><a href="#">Hari Seldon</a></li>
...
</ul>
</aside>
```
Is this the correct method the content appears OK but it is only static html at the moment obviously I will need to integrate widgets somehow just wanted to know i'm going in the right or wrong direction :)
Thanks
Anthony
Zac Gordon
Treehouse Guest TeacherNice! Like it ;)
McFadden Gavender
4,893 PointsDropping a widget area into the off-canvas menu is extremely easy. I simply created an additional sidebar and called that specific sidebar inside the code for off-canvas - worked like a charm!
McFadden Gavender
4,893 PointsDropping a widget area into the off-canvas menu is extremely easy. I simply created an additional sidebar and called that specific sidebar inside the code for off-canvas - worked like a charm!
Anthony Hind
5,715 PointsCheers Jeremy Englert
I will try that! am i right in thinking I just need to call my newly created sidebar.php in the right off canvas menu and replace that with my static default HTML that i used in the above post would you agree
Joel Rivera
29,401 PointsHey everyone, I just took the WorkShop on Foundation and WordPress. Awesome and thanks. I am having some trouble though. When I resize the window, the sidebar disappears in what should be the tablet view, then reappears for smart phone view. Also the menu icon on the right completely disappears. I went through the code a bunch of times but not sure where I messed up.
Anthony Hind
5,715 PointsHey Joel,
Log out of the WP-ADMIN and try again
Anthony Hind
5,715 PointsI had strange errors with the wp-admin nav bar at the top maybe that is doing it to you
Joel Rivera
29,401 PointsThanks Anthony,
That worked. I forgot the jQuery issue. But I still have the Sidebar issue disappearing when scaled down to the tablet mode but then reappears in the smart phone mode. Not sure what I did wrong.
Note: Thats awesome that you were able to be part of putting this together.
Anthony Hind
5,715 PointsNot sure what happening I had a similar issue but the logging out worked for me!
I have a working index.html file with Wordpress live at Link i have tweaked the CSS if you want to have a look
What browser are you using ?
Joel Rivera
29,401 PointsChrome
Joel Rivera
29,401 PointsCool website.
Anthony Hind
5,715 PointsIs your modal button working on the get in touch button ?
Anthony Hind
5,715 PointsThanks Joel it will be my own website once I get the time to finish it :)
Joel Rivera
29,401 PointsYeah, The modal is good.
Joel Rivera
29,401 PointsLooks like at the 1024 pixel mark it disappears but then reappears at the 640 pixel mark.
Anthony Hind
5,715 PointsHave you done the same test with the original HTML files was there any glitches with that??
Joel Rivera
29,401 PointsYeah, The sidebar disappears at the tablet point and reappears at the smart phone point.
Anthony Hind
5,715 PointsI can't get it to do the same it functions perfectly on chrome for me in the HTML version and the Wordpress version.... I didn't use any media queries I just left all that to the default for foundation I only really tweaked the look of the site and the layout slightly....
Maybe Zac will release the Wordpress version he did and you can compare the two together.
Have you looked at the foundation 5 media queries maybe you could have a play with them.
Or If you want I could send you my files just incase something corrupted in your download or something strange has happened.
Joel Rivera
29,401 PointsOk, if it's cool send me the files so I can compare. I appreciate it. I'm going to play around with it on my side and see what's going on.
Thanks again.
Anthony Hind
5,715 PointsHey Guys, just a quick question regarding the OFF Canvas menu on some of my pages I have more content in the sidebar than in the main content for example I have only a contact form on my contact page but this appears to interfere with the sidebar scrolling all the way to the bottom. any ideas how i can allow the Off Canas Nav to be scrollable all the way to the bottom of the sidebar content even when the main content has less in the page.
I think it may just be a simple fix or something obvious as I have been staring at my screen for about 5 hours :)
Cheers guys
Anthony Hind
5,715 PointsOK i Just put a class on my bottom widget in the sidebar
/*Widgets and Styles */
.bottom_right_sidebar{ /*This is the bottom widget in the sidebar */
margin-bottom: 150px;
}
```
this seemed to do the trick but if there is a better method would love to know
Joel Rivera
29,401 PointsJoel Rivera
29,401 PointsHey Zac, Where can I get the final project code for the Foundation 5 and WordPress Workshop? I have the html code and I've built out the templates following the course but there are a few glitches that I can't seem to fix.
Thanks for putting this together with Anthony.