Can I just say that command line and I aren’t friends? I think we have this odd relationship where we pretend we’re friends and then when it gets down to the nitty gritty, we just don’t get along.
I’m new to the Foundation framework. Although I’ve used Bootstrap in the past, for a recent WordPress project of mine, Foundation seemed to be exactly what I needed. I specifically wanted to work in Sass, and I only needed some of the framework. Extra brownie points, Foundation also supports accessibility – hurray! To set up Foundation normally with vanilla ( or just plain old css, not fancy Sass ), the instructions in Steve Zehngut’s WordPress.tv video made sense. To use the Sass version however, this is where my brain was melting…
All of a sudden I was on all these sites, Bower, Node, Ruby, use this command in terminal, then that one! What the hell are all these files in the Foundation Sass version? Which ones do I even need?! Apparently Foundation, Underscores and Sass are quite the combination and it has yet to be documented on how to integrate them together manually – until now.
Yep. With some tinkering ( and frustration ), I finally figured it out. If you’re thinking of using Foundation with Sass in your WordPress theme, and would like a step by step set of instructions all in one place, then this post is for you. And the good news – no command line necessary!
Before We Begin:
- For this tutorial, I’m using the Underscores starter theme. You don’t have to use this theme, but for the sake of reference, this is what I’m using.
- I’m not using Bower. So we don’t need Node since apparently that’s only necessary if we’re using Bower.
- These instructions are tailored for Macs. I’m sorry. T^T
- You will need a Sass Compiler if you don’t already have one. I’m using Koala. Don’t use Scout because it’s deprecated. Here’s a handy list of supported compilers. This tutorial assumes that you already have Sass installed and know how to use compilers.
- For reference, this is Foundation 5 that we’re integrating.
Get The Files
Now, when I first got to the Foundation page for downloads, there are 4 choices: Complete, Essential, Custom, and Sass.
Problem with the first three is that they both use normal CSS, not Sass.
TIP: Hooking WordPress up with normal CSS is much easier if that’s the route you’re already on, and you can even take advantage of the handy Customizer on that same page below the download options.
Clicking on the Sass option however, takes you deeper into the docs to a “Getting Started With Sass” page.
This is where I started reading and my reading eventually self-destructed into “blah blah command line, blah download, blah annoying stuff I don’t wanna do.” I wanted to manually drop folders and files into my install so they could work with my WordPress theme versus setting it up with a bunch of software I wasn’t even using via the dreaded command line. I also wanted to ensure that I could enqueue my files in the same place where my other Sass files and JS files would be versus having an entirely new directory. So I skipped down to “Install Foundation Manually“.
Now the problem with these instructions so far is that it just assumes you’re using Bower, Compass and a bunch of other technologies. Maybe I’m not hip because I’m not using these technologies, or perhaps there are valid reasons why I should learn about them. But for the time being, I just wanted Foundation to work without having to memorize new command line or learn about other software or frameworks. There’s only so much I can learn at once.
So I JUST downloaded the bower-foundation repo highlighted in green in that screenshot above. I didn’t use the master zip for Compass or create any unnecessary folders in my theme that didn’t align with whatever I already had.
Once you have those files, now we can go over where to place them in our WordPress theme.
Setting Up Files
I’m using a theme based on Underscores and the structure of files and folders look something like this:
I decided to set my Sass files and the output CSS files in a folder called “stylesheets” that is placed in the theme’s root. Inside this “stylesheets” folder, these are the files I dropped in from the Bower Foundation Repo:
- bower-foundation/scss/foundation folder
- bower-foundation/scss/foundation.scss
- bower-foundation/scss/normalize.scss
Move that folder and those two files into your stylesheets folder or whatever folder you’re using for your Sass input.
Now, in my theme, I also have a “js” folder for javascript. From the Bower Foundation Repo, I moved these files into it:
- bower-foundation/js/foundation folder
- bower-foundation/js/vendor folder
- bower-foundation/js/foundation.min.js
And that’s all we need file-wise. Make sure that you set your Sass compiler to the correct folder for input and output.
Editing Files and Removing Features
Now that we have what we need in our theme, we can trim down some of these files and features based on what we need for better site performance. If you don’t need all of Foundation’s features, it’s a good idea to go in there and remove what’s not necessary. How do we do this? Let’s start by choosing components in Sass first.
Trimming Down Sass Components
We can go into our theme’s “stylesheets” folder, and open the foundation.scss file. You will see a list of imports for components that look like this:
The components are the features that Foundation includes. Here’s where you comment out what you don’t need as far as Sass components go. In my case, I didn’t want to use anything aside from some helpers and the grid since I was styling my theme from scratch and don’t want interference from Foundation. So after editing, this is what my file looked like:
You can choose to comment them out or remove them completely. I chose to comment out in case I change my mind later.
If you want to get rid of Sass components permanently, take the following steps:
- Remove any imports you don’t need completely from foundation.scss file rather than commenting out.
- Then in your stylesheets/foundation/components folder, delete any Sass files that correspond to the imports that you removed. You don’t have to do this step since the files aren’t being imported anymore, but it makes for a cleaner theme directory.
Enqueuing the Stylesheets
Once you’ve set up what Sass components you want from Foundation, it’s time to set up the files in your functions.php. In your functions.php file, look for the function that loads all the the stylesheets and scripts. If you’ve used Underscores’ theme generator to download and name your theme, the function will be called something like theme_name_scripts. Inside of your function, you’re going to want to enqueue files in this order.
- style.css – the default theme stylesheet, if applicable. In my case, I was only using the theme’s root stylesheet for dashboard detection so I didn’t enqueue it. Instead I have a custom stylesheet after Foundation and Normalize loads.
- normalize.css – Foundation comes with this file
- foundation.css – Foundation’s compiled styles from Sass
- Custom Style Sheet – where your custom styles are, if applicable. If you’re using the default stylesheet, it might be wise to place it here instead of before normalize and foundation.
Here’s what it looks like in my functions.php file as well as the code inside of the scripts function:
/* Register Styles */ wp_register_style( 'my-theme-foundation-normalize', get_template_directory_uri() . '/stylesheets/normalize.css' ); //Foundation Normalize wp_register_style( 'my-theme-foundation-css', get_template_directory_uri() . '/stylesheets/foundation.css' ); //Foundation wp_register_style( 'my-theme-styles', get_template_directory_uri() . '/stylesheets/master.css' ); //My Custom Styles /* Enqueue Styles */ wp_enqueue_style( 'my-theme-foundation-normalize' ); wp_enqueue_style( 'my-theme-foundation-css' ); wp_enqueue_style( 'my-theme-styles' );
Great! Now that Sass is set up, if those are the only components you want to remove and you want all the Javascript components, then you’re done. Skip down to the “Fire Up Foundation” step. If you want to remove Javascript components too, then keep reading from here.
Trimming Down & Enqueuing Javascript Components
Now unlike with Sass, the Javascript components, you don’t need to comment them out somewhere and then enqueue them. You can actually just enqueue them one by one and that is your method to using only the components you need.
To hook up the Foundation JS without removing JS components, you’ll need the foundation.min.js file in the js folder and can skip down to the “Firing Up Foundation” step.
If you are removing JS components, then do not use the minified foundation.min.js file in the js folder. Instead, you’ll be enqueuing the foundation.js file that’s in js/foundation. Here’s where that file is in the bower foundation repo:
Once again, if you missed the link earlier in this post, you can see what each of these components are for on Foundation’s docs page. From there you can decide which ones you want to remove.
According to the Javascript setup page, you want to enqueue your JS files in this order:
- navigation.js and skip-link-focus-fix.js that comes with Underscores in the js folder
- modernizr.js in the js/vendor folder
- jquery-2.1.3.min.js in the js folder (or whatever version it ends up being)
- fastclick.js in the js/vendor folder
- placeholder.js in the js/vendor folder
- foundation.js in the js/foundation folder
- Any components you want to include from the js/foundation folder
- Your custom scripts file, in my case scripts.js in the js folder where we will initialize the Foundation framework and include any other custom Javascript of ours.
Here’s a preview of what it looks like in my functions.php and the code since it gets cut off in the screenshot:
/* Register Scripts */ wp_register_script( 'navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true ); wp_register_script( 'skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true ); wp_register_script( 'my-theme-modernizr', get_template_directory_uri() . '/js/vendor/modernizr.js', '', '', false ); /* Modernizr for Foundation */ wp_register_script( 'my-theme-jquery', get_template_directory_uri() . '/js/jquery-2.1.3.min.js', '', '2.1.3', false); /* Foundation Jquery 2.1.3 */ wp_register_script( 'my-theme-foundation-fastclick', get_template_directory_uri() . '/js/vendor/fastclick.js', array( 'jquery' ), '', true ); /* Foundation Fast Click */ wp_register_script( 'my-theme-foundation-placeholder', get_template_directory_uri() . '/js/vendor/placeholder.js', array( 'jquery' ), '', true ); /* Foundation Placeholder */ wp_register_script( 'my-theme-foundation', get_template_directory_uri() . '/js/foundation/foundation.js', array( 'jquery' ), '', true ); /* Foundation for responsive */ wp_register_script( 'my-theme-foundation-equalizer', get_template_directory_uri() . '/js/foundation/foundation.equalizer.js', array( 'girard-perregaux-foundation' ), '', true ); /* Foundation Feature */ wp_register_script( 'my-theme-foundation-interchange', get_template_directory_uri() . '/js/foundation/foundation.interchange.js', array( 'girard-perregaux-foundation' ), '', true ); /* Foundation Feature */ wp_register_script( 'my-theme-foundation-reveal', get_template_directory_uri() . '/js/foundation/foundation.reveal.js', array( 'girard-perregaux-foundation' ), '', true ); /* Foundation Feature */ wp_register_script( 'my-theme-js', get_template_directory_uri() . '/js/scripts.js', '', '', true ); /* Enqueue Scripts */ wp_enqueue_script( 'navigation' ); wp_enqueue_script( 'skip-link-focus-fix' ); wp_enqueue_script( 'my-theme-modernizr' ); /*loads in head*/ wp_enqueue_script( 'my-theme-jquery'); /*loads in head*/ wp_enqueue_script( 'my-theme-foundation-fastclick'); wp_enqueue_script( 'my-theme-foundation-placeholder'); wp_enqueue_script( 'my-theme-foundation' ); wp_enqueue_script( 'my-theme-foundation-equalizer'); wp_enqueue_script( 'my-theme-foundation-interchange'); wp_enqueue_script( 'my-theme-foundation-reveal'); wp_enqueue_script( 'my-theme-js'); /*Custom Scripts*/
I only load Modernizr and jQuery in the head whereas everything else will default at the end of the closing body tag. To clean up your file directories, you can do the same as with Sass and remove files if you want to permanently delete components. You would remove these files not in use within the js/foundation folder. In my case, I only decided to keep equalizer, interchange, and reveal.
Firing up Foundation
Once all files are in their rightful places within your WordPress theme, files not in use are cleaned up, and then the files you are using in functions.php are enqueued, now you’re ready to fire the framework up. We need to call Foundation in a script to start using it. In my case, I had a custom script file called scripts.js that I enqueued last to initialize. Here is what my script file looks like:
;(function ($, window, document, undefined) {
'use strict'; //enable strict mode
jQuery(document).ready(function($) {
//Doc Ready
$(document).foundation(); //init Foundation
});
}(jQuery, window, window.document)); //no conflict wrapper
Test and Confirm!
And that was the last step! Not a line of command line was needed unless you didn’t already have Sass installed. The most difficult part of this process was figuring out where files went and trimming it down to what I actually needed from the Bower repo versus what came with the repo to work with Bower. I tripped up at the end where I enqueued all the files and saw that they were being loaded in the right order in my browser, but couldn’t figure out why it wasn’t working. And then I realized I forgot to initialize it! So don’t be a goober like me, remember that last step.
Now that I’ve gone through this process, it doesn’t seem so bad. However after the fact, I discovered that there were WordPress themes that already had Foundation integrated into it…
So if this sounded like way too much work and perhaps you don’t need full control over everything, using a starter theme like FoundationPress or JointsWP might be the way to go.
Also this was a long tutorial to write, and I’m hoping that I didn’t skip any steps or fudge up any details. Since I’m a noob, please let me know if I’ve missed something.
Enjoy Foundation with all the Sassy goodness in WordPress – it’s definitely a lot of fun once it’s hooked up. 🙂
Awesome write-up!
If you’re using Sass, it may be worth setting up the imports so all of your Sass files (Foundation, Main, Vendor Related) compile into 1 CSS file. This will cut back on the amount of stylesheets you need to enqueue.
You can also use Gulp (or Grunt) to easily compile all of the JS components into one minified file.
PS – Thanks for mentioning Joints!
Thanks for the comment and happy you enjoyed the post. 🙂
That’s actually something I’ve been looking into as I’ve never used Grunt or Gulp before – in the process of learning as there’s a bit of a learning curve to setting up. But I do agree that sounds like a great way to keep things clean. Thanks for the tip!
And no prob, Joints is awesome!
[…] WP Tutorial: Foundation, Underscores and Sass, Oh My! (RachieVee: Rachel’s Blog).How to Add Facebook Style Autocomplete for WordPress Posts (WP Beginner). How to Put Your WordPress Website in Maintenance Mode (WP Daily Themes). How To Use WordPress Jetpack Offline (Hongkiat). How to Create Custom Menu Structures in WordPress (Elegant Themes). […]
[…] WP Tutorial: Foundation, Underscores and Sass, Oh My! (RachieVee: Rachel’s Blog).How to Add Facebook Style Autocomplete for WordPress Posts (WP Beginner). How to Put Your WordPress Website in Maintenance Mode (WP Daily Themes). How To Use WordPress Jetpack Offline (Hongkiat). How to Create Custom Menu Structures in WordPress (Elegant Themes). […]
[…] WP Tutorial: Foundation, Underscores and Sass, Oh My! (RachieVee: Rachel’s Blog).How to Add Facebook Style Autocomplete for WordPress Posts (WP Beginner). How to Put Your WordPress Website in Maintenance Mode (WP Daily Themes). How To Use WordPress Jetpack Offline (Hongkiat). How to Create Custom Menu Structures in WordPress (Elegant Themes). […]
[…] WP Tutorial: Foundation, Underscores and Sass, Oh My! (RachieVee: Rachel’s Blog).How to Add Facebook Style Autocomplete for WordPress Posts (WP Beginner).How to Put Your WordPress Website in Maintenance Mode (WP Daily Themes).How To Use WordPress Jetpack Offline (Hongkiat).How to Create Custom Menu Structures in WordPress (Elegant Themes). […]
[…] you need to integrate Foundation into your theme, check out this great tutorial from Rachivee. There aren’t too many tutorials out there using Foundation, Underscores and […]
Hello there!
Nice tutorial. I just want to point out a few problems in it. The links are not completed correctly and they point to strange places. For example, in your first paragraph you have two links, one for Foundation and one for Bootstrap. If I click them they take me to https://rachieveecom.mystagingwebsite.com/foundation-underscores-and-sass/foundation.zurb.com and https://rachieveecom.mystagingwebsite.com/foundation-underscores-and-sass/getbootstrap.com respectively. I think the problem stems from the fact that you haven’t appended // before your link to make them protocol free and WordPress understands them as internal links.
Best regards,
In Dodii
Hi In Dodii,
And you are correct! Thanks for pointing that out. Should be fixed now. Now I’m a little nervous and want to check all my other links haha.
Thanks for stopping by. 🙂
Thank you so much for this article. I’m like you with the commandline stuff and i have been looking for an article like this for a while ! really helpful! THANKS!
You’re welcome! I’m glad it was helpful. 🙂
Yes, there are wp themes with foundation already integrated, but the combination of Underscores and foundation is quite worth doing it from scratch, I believe 🙂
So thanks for this tutorial!
You’re welcome Tomzorz88. 🙂
Something I ran into after following this guide was not being able to use the _settings.scss file to make any style changes. I was able to edit the specific scss files though.
When downloading it from the link listed, there is no app.scss file. (some other fiiles are missing too) I tried to make my own but it didn’t seem to work.
If you don’t use the _settings.scss to make your style changes, updating foundation will overwrite them.
Check this out:
http://foundation.zurb.com/docs/sass-files.html
I’m a noob though so I could be way off base..
Hi KingChong,
Thanks for sharing. I took a look at one of my projects and in my case, I never really had to edit what was in Foundation’s Sass so I haven’t tried it yet. I just removed or included components using foundation.scss. It doesn’t appear that I’m using _app.scss either.
The link to the “bower repo” is suggested for manual download on Foundation’s site and it doesn’t have that file – so I’m assuming it’s not necessary in the case of manual download?
http://foundation.zurb.com/docs/sass.html#nocli
I’ll have to mess around and see if I can re-create your situation. In my case just about everything in _settings.scss is commented out because I removed most of the components in foundation.scss. This isn’t something I manually did in _settings.scss but the file must have compiled that way when I edited foundation.scss. Are you using foundation.scss to import components?
Thanks for stopping by!
The settings file comes with everything commented out. When you need to override a specific Foundation style, you simply uncomment the line in the settings file and make your change. It allows you to change Foundation defaults without having to worry about them being overridden when you update.
Thanks for clarifying that, Jeremy! Will keep this in mind for myself as well. 🙂
I spent a significant amount of time yesterday working on getting all the components installed and there definitely is a app.scss file included in that package. It is also in
the scss folder in the Foundation-Compass package from the link on the foundation site:
https://github.com/zurb/foundation-compass-template
Further reading suggests to download both packages to implement your site. creating a bower_components folder to hold the second set. That would make the file structure
similar to the package I downloaded with the Ruby, Git, NodeJS method.
The _settings file has everything commented out, then you can activate and make changes to the items you want. (I think)
http://foundation.zurb.com/docs/using-sass.html
It looks as though editing any of the main files will result in the changes being overwritten in the event of a foundation update. Hence why they provide the _settings file.
The app.scss just has a couple of lines in it calling
@import “settings”;
@import “foundation”;
along with some other commented out functions.
Although I managed to get it all installed and downloaded the Foundation package, now I can’t figure out how to implement it into the WordPress site and have the changes I
made to _settings apply. I had a pretty good start with your method, then when I was looking for how to do something, someone made mention of using the _settings.scss file to
make changes. And I got worried about future updates, losing changes, etc.
I am just starting to get into this whole web dev thing so I could be completely wrong. I always seem to pick the most difficult route to do things! 🙂
You seem to be on the right path.
You could also download one of the starter themes like JointsWP or FoundationPress (more advanced) and all of the files will already be setup for you. I like JointsWP, but I may be a bit biased. 😉
Thanks for replying!
I downloaded one of the FoundationPress so I could see the file structure and compare it to what I have but it was a bit different than what was in the package. It would take a lot more dissecting to try to figure out. I enjoy learning how to make this all work.
So, when I make a change to the _setings.scss file, what do I have to compile for it to take effect? I’ve edited a few things in there but it doesn’t seem to work.
Take a look at the JointsWP file structure – it’s a bit more “traditional”.
In regards to the settings file, what are you using to compile your Sass? Have you worked with Sass before?
This is my first go with sass. I am using Koala to compile, but am considering changing before I get too deep in. Seems I got a lot of research to do!
I’ll download and check out JointsWP and do some reading up on sass. Thanks!
Ok, I have things working..
I’m now using Compass and have it watching the /themes/JointsWP-master/library/scss. It’s a beautiful thing.. Save changes to _settings.scss in Sublime Text, see the results in browser after refresh.. Hallelujah!
P.S. Digging the JointsWP, nice work! 😉
Hey! This is awesome, thanks for the Tutorial. Only issue is that I can’t load a stylesheet! I must not be calling / enqueuing the correct stylesheets, as my theme is loading without any CSS whatsoever. I tried to keep the file structure just like yours, however I’m noticing that the functions.php in your example and the most recent underscores functions.php aren’t the same. I know they change the _s repo often, and without telling anyone (or using versions). I’ve thrown the folder in the trash 4 times and started over, only to hit the same problem again. . :/
Hmm it’s possible that the version of Underscores I’m using is the version right before their newest? The theme should still have the function to enqueue the scripts/stylesheets.
See the function _s_scripts for reference: https://github.com/Automattic/_s/blob/master/functions.php
If no stylesheets are being loaded whatsoever, not even the default stylesheet, I would overwrite the functions.php with the original underscores functions.php from before you made changes. See if the default stylesheet at least gets loaded. Then from there, troubleshoot and try to register/enqueue one file at a time, confirming that they’re loading each time. Also clearing any browser cache or cache plugins while you’re at it.
Also confirm that your paths are correct and there are no 404 errors in your browser console.
Hope that helps! Good luck!
It seems like all the Foundation+Wordpress themes I see are missing many of the Foundation features, like that image slider, etc.
I watched a decent tutorial on Team Treehouse about converting a Foundation site into a WordPress theme. The entire video was 77 minutes and literally none of the steps in this article happened, so I don’t know what the hell he did. I guess I need to watch it again. It’s so frustrating that Foundation didn’t just make a fucking WordPress theme already and that they make it so complicated to get started. Bootstrap was bad enough with the bloat code bullshit, but at least they didn’t force you to do all this command line bullshit. Thank you for figuring out how do this. I will come back to it when I have the head for it.
Also, I just want to say that this description tickled me as it is written so exactly perfectly:
“This is where I started reading and my reading eventually self-destructed into “blah blah command line, blah download, blah annoying stuff I don’t wanna do.”
Damn straight. Bizarre that it is even done this way. Oh, let’s just a bunch of random technologies as a major part of our platform. This kind of horseshit should be an optional method. On a different page. So nobody has to read it except the people who want to do everything in the command line.
Hi Nate,
I’m so glad you found this helpful! Unfortunately for us, there are a lot of cool frameworks and tools for developers to try out that assume we’re using things that not everyone is using. I would like to see more instructions that lend to both users that want to use command line, and ones that want to put things together manually if it’s possible.
I’ve also come to understand that the reason why I don’t really like command line, is while it’s quicker, I’m a visual person. I like to physically see what something is doing to my computer. So a few weeks ago I was hooking up Laravel for the first time with the cursed command line, and some things were messing up in the process. I had to physically navigate to the file to realize things weren’t installing in the location it should. Once I saw that, then I could use that as a reference to fix whatever issues I had via command line with the Laravel setup. But since command line, for someone like me, is so abstract, yeah – it can be hard to grasp.
Anyway let me know if this tutorial works for you! Have you tried Foundation Press? That theme should have all the features and when I got stuck command line wise, the creator of the theme was really helpful in getting me set up. It’s also possible that the slider isn’t included because I believe the slider was deprecated and they recommend you use Slick instead of their Orbit slider. Hope that helps! Thanks for stopping by. 🙂
Thanks, it was helpful! Re-reading my comment, it’s pretty obvious how frustrated I was with all that swearing, huh? I didn’t realize I sounded quite so pissed off about it. 🙂
No worries, Nate! I definitely understood as a fellow developer. I love trying new things, but sometimes it sucks when you have to learn an additional five new things just to use that one thing. Just makes that goal feel even farther away and keeping up in our field is difficult as it is. 🙂
Nate, I’m right there with you – I’m not a fan of the command line at all.
However, Foundation can be used without the command line pretty easily (as RachieVee does a great job pointing out in this article). The command line tools are nice, but completely optional. You can use Foundation just like you would use any other jQuery script or CSS framework.
I developed JointsWP – which is a “blank” WordPress theme that has Foundation included. It comes in a CSS or Sass version – neither of which requires the command line. In fact, the ZURB team recently used JointsWP for their ZURBWired event.
You can see all of the Foundation components in action here: http://jointswp.com/demo/
Thanks, Jeremy. Great job. It does look like maybe everything but the Orbit slider. The Orbit slider is the thing I was always looking for because I wanted to see how it works with the WP Dashboard and analyze the code that makes it work. I hate sliders, but all our clients love them, of course. Regardless, yours looks like a great starting point. I wanted to do it myself by hand so I knew what ever piece of code meant. Are there any Joints tut videos that you know of that explain how to use the different features?
Nate, ZURB deprecated the Orbit slider as there are better options available (such as Slick). However, Orbit is still included in Joints and should work without any issue.
I don’t know of any videos, however, I have recently added some docs: http://jointswp.com/docs/
One of best things about Joints is that the Foundation components work just like they would with any Foundation site. So the ZURB documentation is also a great resource when working with JointsWP.
Thanks again, Jeremy! I hope you are getting a lot of recognition and compensation in one form or another for your efforts. If I hop on the Joints bandwagon, I will certainly sing your praises.
Hey! Thanks for this great tutorial. It’s all about me) cause I’m using _underscores_ WP theme for quite a while. And I’ve been using bootstrap with it for a long time, but I’d really like to try foundation for some of my projects. One of the reasons is I like the way the menu is working and what features foundation menu has. In case of WP+bootstrap there is an easy way to fuel up native WP menu with bootstrap menu stuff the wp-bootstrap-navwalker.php doing all the magic.
So what about the foundation. Is there any simple way to integrate foundation menu with WP while using _undescrores_ theme? I found out there are foundation starter themes, but I’ve got so used to _underscores_ that I don’t want to leave it)
Thanks again!
[…] WP Tutorial: Foundation, Underscores and Sass, Oh My! (RachieVee: Rachel’s Blog).How to Add Facebook Style Autocomplete for WordPress Posts (WP Beginner). How to Put Your WordPress Website in Maintenance Mode (WP Daily Themes). How To Use WordPress Jetpack Offline (Hongkiat). How to Create Custom Menu Structures in WordPress (Elegant Themes). […]
I used to use LESS for this with Bootstrap grid + XL grid (1540px container). Now I’m using the same, but with SCSS and some components from foundation. All running so well surprisingly!