DEPRECATED: WP Starter Theme with Sass + Webpack

Note: this theme is now deprecated due to the changes in WordPress since v5.0. Feel free to fork and update for your own usage but I will no longer be updating this repo.

This theme is a starter theme for WordPress that utilises modern development workflows and tools, like SASS, Webpack, Babel, Browsersync and a CSS framework (Foundation 6 for Sites, optional).

Install via WordPress (not yet published on WordPress Themes)

1. In your admin panel, go to Appearance -> Themes and click the Add New button
2. Type in WP Starter Theme with Sass + Webpack in the search form and press the Enter key on your keyboard
3. Click on the Activate button to use your new theme right away

Install via Github

1. In Terminal/CMD, from the WordPress Themes folder /wp-content/themes/, run git clone https://github.com/dominicfallows/WP-Starter-Theme-Sass-Webpack.git
2. In your admin panel, go to Appearance -> Themes click Activate on the WP Starter Theme with Sass + Webpack theme

Developing with the theme

1. Make sure you have Node + NPM and Yarn Package Manager installed globally
2. Open the src folder of the theme in your terminal/console
3. Run yarn install
4. Update the $dev_hostname value in header.php to your local development hostname
5. Run yarn start - to start the Webpack development scripts
6. Edit files in src and WP PHP files in the theme, the browser will reload (with browser-sync) as you make changes

Production build of the theme

yarn start from above creates uncompressed (un-minified) development versions of the CSS and JS files. Before pushing your files to a production environment you should create production ready versions. To do this:

1. Run yarn build
2. Comment out the wp_enqueue_script and wp_enqueue_style function lines under the Development styles and scripts comment in functions/enqueue.php
3. Un-comment the wp_enqueue_script and wp_enqueue_style function lines under the Production styles and scripts lines in functions/enqueue.php
4. You can further compress the production assets by commenting out the un-required Foundation components in src/scss/app.scss and un-required Font-Awesome (or the whole library) in src/scss/vendor/font-awesome/scss/font-awesome.scss

CSS Framework

This starter theme uses Foundation 6 for Sites. You can easily swap this for a framework of your choice, to do this update the following:

1. // Import Foundation lines in src/js/app.js
2. // Foundation line in src/scss/app.scss

License

MIT

Copyright

WP Starter Theme with Sass + Webpack, Copyright 2017 Dominic Fallows, Distributed under the terms of the MIT license