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.
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.
- cd into your local websites theme directory
git clone https://github.com/olefredrik/FoundationPress.git my-theme
- now it will be cloned into
my-themefolder, now cd
- Now run
yarn install(if you have yarn installed, I prefer it, it’s faster than npm)
After everything installed you should customize some settings.
- Open the
style.cssand change the name of theme and you should update the
- Now open
gulpfile.jsand 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.
- 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.
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.