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.
[Tweet “Integrate #Foundation into #WordPress without command line!”]
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. 🙂
[Tweet “Enjoy #Foundation with all it’s Sassy goodness in #WordPress. Here’s how!”]
Leave a Reply