Building a wordpress theme with FoundationPress starter theme

By under WordPress

As you know WordPress is the most used platform in the world, around 74.6 Million websites are running on WordPress, not only blogs, WordPress is used by all sorts of websites, and to make every website unique WordPress offers flexible theme system so you can customize and make your website unique.

Building theme without a starter theme is too much boilerplate code, luckily there is FoundationPress starter theme, which has everything a developer can ask. It’s based on Foundation 6, the most advanced responsive (mobile-first) framework in the world. It uses Sass and Gulp and has all best practices built in to get you going without wasting time.

Sass is a CSS pre-processor that allows you to write styles more effectively and tidy.

Prerequisites

Before starting you need Git and Node.JS (v4 or higher) should be installed on your machine.

Grab FoundationPress

It’s good to keep a WordPress installed on localhost, I have my local website running at http://localhost/wordpress. Now follow below steps to grab from FoundationPress git repo.

  1. cd into your local websites theme directory cd ~/Sites/wordpress/wp-content/themes
  2. git clone https://github.com/olefredrik/FoundationPress.git my-theme
  3. now it will be cloned into my-theme folder, now cd my-theme
  4. Now run npm install or yarn install (if you have yarn installed, I prefer it, it’s faster than npm)

Settings

After everything installed you should customize some settings.

  1. Open the style.css and change the name of theme and you should update the screenshot.png
  2. Now open gulpfile.js and change the URL to your local websites url, which in my case is http://localhost/wordpress, your might be different just use that. this will give you browser sync, so if you make any change in scss or php files, the browser will automatically refresh.
  3. Login into wp-admin and choose your theme as the active one.

Test Data for WordPress

I always use WP Test data to develop and test themes, head over to http://wptest.io/ and populate your database with dummy data.

Start Building

You are set for your theme development, now run 

npm run watch

This will start the gulp task runner and launch your website in the browser, ideally, I keep this running, BrowserSync will refresh the page on any change in files.

All the assets for themes are inside assets folder, everything is very neatly organized. To make any change in style open the scss folder and make changes in files since we are running npm run watch we will see changes right away in the browser.

Packaging theme for production

Great! Now you are done with development and your theme is ready to deploy on your live website.

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, rename this zip file to whatever name you want for your theme and upload it.

There you have it, its fantastic workflow to get in, working with scss is a little hard at first but when you get hold of it there is no turning back. Theme development with FoundationPress is very fun, let me know in comments your thoughts and share what beautiful theme you created with this, see you in next one.