Getting Started with Foundation for WP

The theme development process in Foundation for WP is more streamlined than many other and traditional WordPress themes.

This is advantageous as soon as you master the tools you have at your disposal. But it may seem confusing at first. In this article I’ll attempt to demystify the mystery behind the tools we use in FoundationPress, such as git, npm, Sass and Gulp. Sounds good? Ok, let’s go.

First things first.

Most people who have developed WordPress themes (or websites that use other technologies, for that matter) may have experienced that planning and good structure of assets in the project provides a tremendous gain in the long term.

I know it might be tempting to just hack on the style.css and functions.php to get started quickly as hell.

We’ve all been there. Quick solutions. Inhuman deadlines and tight budgets. But that does not mean the bad solutions are the best. With a decent starter-theme, you’ll be able to kickstart your projects with a set of tools that can help you create maintainable, fast, modern and responsive sites.

Ok. Since you’re still reading, we can jump into a quick explanation of what’s what.

git – version control

Git is a version control system. We use it to keep track of all changes in our project. You don’t have to use git in order to develop a WordPress theme with Foundation for WP. You don’t need to wear a seat belt when driving your car, either. But it’s certainly wise to use a seat belt if you crash.

Similarly, it’s always recommended to have your files under source control when developing. Then you will be able to roll back to where you were before things went to hell. So unless you’re Chuck Norris – use git (or a similar tool).

Here is a good writeup on how to get started with git.

npm – package manager

Node.js’ package system, npm, is the largest ecosystem of open source libraries in the world. It runs through the command line and manages dependencies for our website.

In order to use npm, you will need to have Node.js installed on your system. Grab it here.

When you have cloned (or downloaded) Foundation for WP, you will need to install it. In practice this means that the dependencies listed in package.json should be downloaded and put in the right place. To to that, all you have to do is open your terminal, browse to your foundationforwp folder and type npm install. Simple as that.

Sass – CSS with superpowers

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. When using sass, you have access to everything you’re used to with vanilla CSS, as well as functions, variables, mixins etc.

Everything you need to know on how to use Sass with Foundation, can be found here.

Gulp – the task runner

Why use a task runner, you might say? Well, that’s because it will save you a lot of work by automating repetetive tasks like minification, compilation, linting etc. In FoundationPress the gulpfile is set up for you. So you will not have to spend a lot of time configuring it, unless you feel like it.

The gulp tasks in FoundationPress can be run as npm scripts, in order to avoid having global dependencies.

The build, watch and package tasks

While you develop, you will naturally have an organized file structure with styles and scripts. The build task arrange it so that your working files are compiled and minified into one file for scripts and one file for styles.

Fewer http requests and smaller file sizes means that your website will be perceived as significantly faster.

To run a build, simply open your terminal and type npm run build.

While working on your project, type npm run watch.

When you are finished on your project and ready for deployment, type
npm run package. This will create a folder called packaged, which will contain a .zip file containing only those files that are required in production. Dev dependencies such as node_modules will not be needed to be uploaded on the server, as they are only useful during development.

Last but not least

Good luck! If you encounter any challenges along the way, do not be afraid to post an issue on the Foundation for WP repository at Github.