Building a WordPress Theme with Foundation and Underscores

Every time I start a new project, it’s tempting to head over to a pre-built theme vendor and download a premade theme with a drag and drop interface. Come on, my mind says, the client will never know, it will save you so much time… Then I snap back to reality and remember that it’s actually easier to build a theme from scratch- and the final product is so much more satisfying. Also, without the extra bloat of unnecessary scripts, your site will be faster and more responsive- key factors in search engine rankings.

If you’ve never built a theme before, getting started can be daunting. That’s where Underscores and Foundation come into the mix. Underscores is an open source project that provides developers with a pre-built, bare bones WordPress theme that’s super lightweight and easy to skin. Foundation is a lightweight and super responsive front end framework that comes with a built in grid and some kick ass features that play incredibly well with WordPress.

To get started, head over to Underscores and download your starter theme. Give it a name and generate. You’ll end up with a zip full of files that give you a plain looking WordPress theme. You can work with this alone, but it’s better to add the features that Foundation offers to get a more fully-featured site. The first thing you should do after unzipping the downloaded file is add a folder ‘page-templates’ and another called ‘css’. This will allow you to create special templates and additional stylesheets.

page-templates

 

 

 

Now that you have your base theme, it’s time to download Foundation, we’ll be specifically working with Foundation 6. When you go to the download page, you’ll see a few options: Complete, Essential, Custom & SASS. For now, I would suggest grabbing the Complete version. Once you become familiar with the complete suite of assets that Foundation offers, you may want to choose the lighter Custom version.

Once you’ve unzipped the Foundation download, you’ll want to move the assets over to your theme folder. I prefer using the .min CSS file, but it’s up to you. Either way, put the CSS file into the CSS folder. Then move the Vendor folder and app.js into your JS file inside the theme.

After the files have been moved you’ll need to add a little code to get the whole thing to work. Open up the app.js file that you just transferred and replace the existing code with this

jQuery(document).ready(function($) {
$(document).foundation();
});

Now you’ll need to add a few lines in your functions.php file to make sure the files are being read by your theme. This should be placed inside the wp_enqueue_scripts function that’s already located in your functions.php file.

functions

 

 

 

 

 

 

 

 

 

 

 

// Foundation
wp_enqueue_script( 'what-input', get_template_directory_uri() . '/js/vendor/what-input.min.js', array('jquery'), '', true );

wp_enqueue_style( 'foundation-style', get_template_directory_uri() . '/css/foundation.min.css', array(), 'all' );

wp_enqueue_script( 'foundation-app', get_template_directory_uri() . '/js/app.js', array('jquery'), '', true );

wp_enqueue_script( 'foundation', get_template_directory_uri() . '/js/vendor/foundation.min.js', array('jquery'), '', true );

Once you’ve added these files successfully, upload the theme to your WordPress install and take a look. Make sure that the code isn’t throwing errors and that all of the files are being called. If everything looks good, then you’ll be ready to start building your theme.

Share on facebook
Share
Share on twitter
Tweet
Share on linkedin
Share
Share on pinterest
Pin

Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Other Stuff You Might Like

Looking for Hosting?

Stafford Creative uses and recommends Siteground for fast, reliable hosting for every project and budget.

*Stafford Creative may receive a small commission with each signup.