WordPress Underscores with the Foundation framework

Go to http://underscores.me/, put in your theme name, click generate, and download the WordPress Underscores starter theme.

Unzip the Underscores theme you downloaded and go into the unzipped folder. There should be one more folder with the same theme name inside. This is your project folder and can be moved to a local WordPress install or put right on your web server.

Download the latest version of the Foundation front-end framework (complete), unzip it and place the whole Foundation folder into the underscores theme folder. http://foundation.zurb.com/develop/download.html

Add Foundation CSS and JavaScript files by enqueuing them in your theme’s functions.php file in the theme_name_scripts(). You will also need to create a custom.css file and enqueue it.

Also, add a custom menu in the functions file while you’re in there.

Create a foundation.js file and add this code:

Add a foundation specific row and columns for the files below, remove the sidebars, and add the Foundation off canvas menu for mobile devices.
404.php
archive.php
footer.php
header.php
index.php
page.php
search.php
single.php

Here is an example of the index.php code:

Create a home.php and copy the contents of your index.php file into it so we can have a custom homepage. Remove the generic h1 from header.php and put it in home.php. We don’t need duplicate h1s throughout the whole website.

Change the homepage content loop to use h2s. We only want one h1 on the homepage.

The code from this project is here: https://github.com/justinfriebel/wordpress-dealership-theme

It’s getting older every day, so if you want the newest version of foundation you’ll have to redo certain parts from above. I’ve currently updated the theme to use Foundation 5.5.0. Also, underscores places the theme name all over the code, so you might want to find and replace those parts too.

  • Solid write-up dude, did you forget the download link?

    jahahehe

    • Hey Matt,

      The code for this project is here: https://github.com/justinfriebel/wordpress-dealership-theme

      It’s a few months old, so if you want the newest version of foundation you’ll have to redo certain parts from above. Also, underscores places the theme name all over, so you might want to find and replace those parts too.

      I figured the instructions would be best if you wanted the newest versions of everything :).

  • Mark Randall

    Hello Matt

    I just read through your post here. I’ve been using underscores for a while now and was considering starting to use foundation along with it. Could you possibly be more specific about what parts would have to be redone?

    Thanks you very much

    Mark

    • At the very least you’d have to delete and upload the new foundation folder. Then you’d have to update the functions.php file with the new foundation paths.

      I’m not sure if any of the class names changed for rows, columns, or grids, but I’d assume they don’t change those too often. See where you end up after these changes.

    • I updated it yesterday to Foundation 5.5.0

      https://github.com/justinfriebel/wordpress-dealership-theme

  • Violacase

    Hi Matt,

    The reason I use Underscores as theme prototype is because I want to have a minimal yet robust start so I have full control over the site’s behaviour. For that same reason I want a clean basic frontend system.
    ‘Complete’ Foundation is bloated with stuff I don’t want to use.
    All I need to start is basically just the grid system and perhaps the mobile menu. Maybe you can explore a bit what parts of Foundation are essential for your setup of the dealership theme?

    • I’m not sure what you mean by explore?

      The complete Foundation package is there, so all you’d need to do is update the functions.php file to en-queue less for your needs. We’ve used it for a couple websites now and it seems to load pretty quick. Although it’s using the full foundation files, the theme itself isn’t over using the foundation features.

      • Violacase

        English is not my mother’s tongue. With ‘explore’ I meant ‘explain’. In the beginning I was in love with Foundation. Later I ran in all kinds of trouble. The framework does some nasty things with its javascript. With e.g. images and Masonry you have to tweak a lot to get it working. I hate that: no full control. So I stopped using Foundation. Although a new version (5.5) just came out today. Perhaps I’ll have a second look.

  • Dumb question from WordPress newbie, but why did you decide to combine them?

    • Underscores is one of the best starter themes you can use for WordPress. Underscores only comes with some lite CSS, so adding Foundation gives access to advanced grid layouts and mobile menus with ease.

      • Yeah I have been reading about lack of responsiveness in Underscores and was trying to decide between it and Foundation which is how I found this post. Second dumb question is why not just use Foundation? Why both?

        • Terence Devine

          I wouldn’t say there is a lack of responsiveness in Underscores exactly – theres more a lack of styles in general.

          Underscores is a starter theme for WordPress, with built in PHP functionality – where as Foundations is a style library for base, cross browser simplicity, grids, menus, etc. The two have little to do with each other.. Underscores is for WordPress, Foundation is for HTML/CSS styles

          • Thank you. That helps. I’m wanting to use Masonry to do most of the layout so might be able to get away with underscores only. Justin I like it for the same reasons. Minimalist and Automattic.

        • Just as Terence said, you need Underscores for the HTML and PHP. You could always use something like http://jointswp.com/. I just liked the minimal nature of Underscores and that it was started by Automatic, the team behind WordPress itself.