I recently watch a presentation on WordPress.tv given at WordCamp Orange County 2014 on the topic of creating your own theme using Underscores and Foundation. After I had finished the video, I tried out this technique of theme building myself, and I was so impressed that I felt I had to share it. This is an incredibly easy way to do theme development, and in almost no time you can make a functional theme. All credit for the process go to Steve Zehngut who gave the presentation. If you want to learn more about him you can check out his Twitter or check out his company, Zeek Interactive. I mainly wanted to do a blog post on this topic so I have everything written down in one place that’s easy to reference (and copy paste!) and so I could share what I learned with all of you!
Please check out Steve’s WordCamp presentation either before or after reading this. He goes over even more than I do in this post, and it’ll make everything hear easier to understand! You can also find the code to his theme from the presentation on his GitHub. This is super helpful if you just want to look at code and go from there.
Without any more delay, lets get start! To start off my own explanation, let’s take a look at the tools we are going to need to use to get everything up and running.
Getting Started
For my local development environment I really like using Vagrant. I think it’s really easy to use, very customizable, and has extensive documentation – so that’s what I used to get this all working. You can use whatever environment/sandbox you want, but if you haven’t already decided on what to use for your local development I would recommend Vagrant. If you want to know how to setup Vagrant with WordPress, you can check out my Vagrant Development Environment tutorial. If you want, you can also check out Desktop Server which is what Steve recommends in his presentation. I’ve personally never used it, but he really seems to like it so it is probably a good thing to try out.
Once you have your local development environment all setup it its time take a look at Underscores. Underscores is a starter theme for WordPress that will give you all the bare bones you need. You simply fill out the theme name, theme slug, author, author URI, and a description of the theme and then Underscores will produce the theme files for you. You can then upload these files to your wp-content/themes folder on your WordPress development environment and get to work. Note (it also warns you about this on the Underscores site) that the theme produced by Underscores should be used as a parent theme, not as a child theme.
Once you have copied the theme to your wp-content/themes folder you will be ready to move on to Foundation.
The next tool we will be using the is the Foundation framework. The Foundation framework is a front-end web development framework that is super easy to use, looks really great, and has extensive documentation. During my time at the University of Alberta, I made a website for one of my profs (non computing science) so he could take surveys without having to use a third party site like Survey Monkey. It was extremely easy to use and I’ve been a big fan of it ever since.
Getting Foundation setup is a pretty simply process. First, go the main Foundation page and click on the “Download Foundation #” button (it was Foundation 5 at the time of writing this). On the next page be sure to click the “Download Everything” option. This will give you a zip with the version number in the folder. Once you unzip this folder, rename it “foundation” and upload the entire folder into your theme folder.
The last thing we have to do to get everything working is to enqueue the scripts. You can do this by replacing the scripts function with the following code to your functions.php file (please note that your function will be named differently than mine):
You may have also noted that I added a custom.css to my theme. This is based on what Steve did in his presentation. I thought it was a really good idea to keep it seperate from the base Underscores style.css file, but you don’t have to do this if you don’t want to. If you want, you can just add/modify the style.css file.
Using Foundation
As Steve mentions in his presentation, have the Foundation Docs open is a really good idea during when working on your theme. I found that the page on the Grid is especially useful and will show you how to quickly make your layouts. Below is the code from my own page.php file. This should give you a good idea/first look at how to get started using Foundation:
The first thing to note is the <div class=”row”><!– Foundation Row –> line. This line creates a foundation row, which we can then fill with columns. This also creates a 960 width layout, so as soon as you use it you will start to see things line up really nicely. Inside the row, you place your columns, which are generated with the <div class=”large-9 medium-8 columns”> and <div class=”large-3 medium-4 columns”>. These lines produces a column layout where the main content is 9/12 of the page and the main content is 3/12 on a large screen (ie. a computer screen). If you were on a medium screen (ie. iPad sized) then the layout changes. In this case the main content would be 8/12 and the sidebar would be 4/12. You can see these layouts described by the class tags in the HTML. Luckily Foundation is very easy to read, so you can almost tell instinctively what these tags do. Everything in Foundation is 12 width by default, but this can be modified (if you want) by changing the core files.
My example goes over both the large and medium class tags, but there is also small. This is used for a small screen (ie. iPhone sized). In my example, I didn’t include them because I want the website to place the columns one on top of the other. Foundation assumes that it is supposed to stack them if small is not specified. You could call small-12 if you really wanted to show everything, but Foundation doesn’t make you include this. If they were split on an iPhone, there would simply be not enough room for the content.
This example is meant to just be a very small snippet of the things you can do with Foundation. In order to get your theme really working, you will need to add in Foundation calls to header.php, footer.php, and the template pages (page.php, index.php, single.php, etc…). You will also have to brush up on your CSS skills and add some colour to the theme. In his presentation, Steve goes even more things you can do with Foundation including block grids and data equalizers. If you want to know more about how to work with Foundation and its these extra features, please check out the Foundation Docs.
Conclusion
As you can see (hopefully!), using Underscores and Foundation together makes theme development extremely easy. Creating a layout takes around 5 minutes once you know what to add. If you haven’t already, I highly recommend that you check out Steve Zehngut’s WordCamp presentation on WordPress.tv. This whole tutorial is based on what I learned there, I just wanted to share it and write it all down.
As always thank you for reading and please share it around as much as you can (and be sure to give credit to Steve if you share it)! Please feel free to put any suggestions or ideas for future tutorials in the comments section below.