Five Tips for Building a WordPress Theme with Underscores and Foundation

I recently finished work on a brand new custom WordPress theme for my hiking blog, UpwardTrajectory, completely overhauling the existing site. I used Automattic’s Underscores (_s) as a WordPress starter theme, knowing that it’s fairly unopinionated and can be easily customized. To start getting familiar with other popular grid systems, I decided to use Zurb Foundation for the site’s grid.

I learned a lot along the way, and I’m pretty happy with how the finished site turned out. I still have a bunch of other tweaks that I want to make, but it was time to set it live :).

Here are five tips for developing a WordPress theme from scratch using Underscores and Zurb Foundation.

1. Set Up your Project Foundation and Tools First

It’s good to decide on your environment and tools up front. I downloaded the Sass version of Underscores, installed Bower to serve as my package manager, and then installed Zurb Foundation using Bower. I then created a new Foundation project using Compass, following Zurb’s documentation.

I then set up Grunt for this project, which would compile my Sass into CSS as well as lint, concatinate, and minify Javascript files. My Grunt config file is available on Github.

Finally, I set up BrowserSync, my favorite Grunt plugin, so that any changes to PHP, Sass, or image files would trigger a page reload across any connected devices. I also love this plugin for testing across various browsers and devices.

2. Focus on the Markup

While it’s tempting sometimes to work on layout early on, I’ve found it very important when working with WordPress and Foundation to focus on the markup (HTML and PHP templates generating HTML) first. Concern yourself first with what the markup should look like for various parts of your site (header, sidebar, content section for a single blog post, footer, etc.), and then you can later worry about styling the individual components. Of course, when using a grid framework like Foundation, your markup will be influenced by the grid layout that you choose, but you can add any needed divs or other containers into your templates once the basic markup is done.

Taking the approach suggested in Morten Rand-Hendrikson’s WordPress: Building Themes from Scratch Using Underscores class (which I highly recommend), you may want to work on markup for the top of the site first (header.php) and then work your way down the page (with footer.php being last). That helps break down the work into more digestible pieces.

3. Learn From and Build on Others’ Work

Don’t forget that you don’t have to write all the code in your theme from scratch. Take advantage of the work done by others (and of course give back yourself :).

For Foundation, there is a very helpful gist that contains code to generate the navgation menu in a WordPress-compatible way. There are also WordPress themes on Github built using Foundation that were useful references for me when making decisions on markup and layout, including FoundationPress, FoundationWP, and Reverie.

For Underscores, I frequently used Morten Rand-Hendrikson’s Simone WordPress theme as a source of ideas. Sean Davis’s BuildWPYourself is also a great reference for how you can customize things in Underscores such as the file structure for template files in a way that makes the most sense to you.

4. Build with Site Performance in Mind from the Start

As with any site, it’s important to be thinking about page load and site performance from the beginning. Some easy wins are to configure a task runner like Grunt to concatenate and minify your Javascript files, reducing the amount of and size of HTTP requests, and to minify your CSS.

Consider using a responsive image solution like picturefill to serve smaller images to smaller screens. Your mobile users’ phone batteries will appreciate it, and the user experience will be better since the page load time will be minimized. Elegant Themes and Lynda.com have useful articles on this.

Foundation users can take advantage of its Interchange component to serve different HTML partials for specific media queries, making responsive images and more possible without much legwork.

It’s also important to optimize any images or SVGs included in your theme. Task runners like Grunt have plugins available to automate this for you, such as Imagemin and Svgmin.

Finally, users of Foundation and other frameworks should remember to disable unused components to reduce page load by reducing the amount of included Javascript and CSS. For Foundation, this is done by commenting out unneeded components in the app.scss file.

5. Ship and Iterate

It’s tempting to add in a ton of features and support for various post types in your WordPress theme up front before ever shipping it, but it’s often better (especially if you’re not building a theme that will be immediately put up for sale in a theme marketplace) to build your theme with support for a limited amount of features (such as support for aside post types instead of aside, gallery, and quote post types). Other features such as support for post thumbnails or custom backgrounds can be added later.

For anyone interested, my completed theme in its current state is on Github.