The WordPress Theme

The WordPress Theme is a blank canvas theme for WordPress. It is designed as a clean slate for you to develop a customised WordPress theme.

This README.md also doubles up as a template for you to use on your project.

Please feel free to contribute to this project, just fork it and go nuts! Any bugs, issues, questions, suggestions, praise (sorry complaints department closed permanently), Email Me!

Recommended Coding Standards and Documentation

HTML5

SASS

###Folder Structure

wordpress-project/  
-- app/
-- node_modules/  

---- website-source/
------ fonts/
------ images/
------ js/
-------- vendor/
------- scss/
------- root-images/
------- theme-templates/

---- wordpress/
------ wp-content/
-------- themes/
---------- the-theme/

Important Folder

/gulpfile.js Configuration of Gulp tasks.

package.json
Configuration of node dependencies.

wordpress.txt
Experimental file for testing a WIP deploy script.
Details of the WordPress installation including: Version Number, Local Database Connection Details and Plugins. Use this file to determine the settings for your local installation. Updated WordPress or installed a plugin?? UPDATE THIS FILE TOO!

Build Tools & Preprocessors

SASS
An extension of CSS that adds power and elegance to the basic language. It allows to use variables, nested rules, mixins, inline imports, and more.

NPM

npm makes it easy for JavaScript developers to share and reuse code, and it makes it easy to update the code that you're sharing.

Gulp
Automates tasks such as minification, concatenation, compression, compilation, browser refreshing etc.

Recommended: WP-CLI
WP-CLI is a set of command-line tools for managing WordPress installations. You can update plugins, set up multisite installs and much more, without using a web browser.

Get Started


STOP!

Make sure that your machine has ALL of the Build Tools and Preprocessors set up BEFORE continuing further.

Create Working Folder and GIT Repository

Clone this GIT Repository. Don't know how?

Local Development Environment

Prepare a local development environment inside app/wordpress/, using your favourite local environment tool.

IMPORTANT: Only set up your Working Environment (Virtual Host, Folder Location, PHP Version) and Import Database. Install WordPress using WP-CLI and information in wordpress.txt in the next step.

MAMP/MAMP Pro - OSX
WampServer - Windows
Local by Flywheel -- Free

Download & Configure WordPress

Install WordPress using WP-CLI and the information on wordpress.txt

$ cd app/wordpress/
$ wp core download --version=x.xx
$ wp core config --dbname=database_name --dbuser=root --dbpass=password --dbhost=127.0.0.1

If for some reason configuring on the command line does not work, then configure using the WordPress GUI.

Run NPM Install

$ npm install

Run Gulp

Run the default npm dev task and start developing!

$ npm run dev

Important Notes


Only the contents of wordpress-project/ root (except node_modules/) and app/wordpress-theme-source/ are kept under version control. This is so that WordPress and compiled files are not commited to the repository.

If you wish to build the production version of the site run

$ npm run build

To build the production version and create a zip file in the /app directory run

$npm run zip

Changelog


v3.1 - Updated the gulp tasks, added js concat, added browsersync streaming for CSS.

v3.0 - Migrated to Gulp 4.0, removed redundant libs, added a zip task.

v2.0 - Migrated to Gulp instead of Grunt.

v1.1 - A few minor tweaks to README.md and removal of Bourbon Neat, in favour of using flexbox for layouts.

v1.0 - Nothing has changed yet! We are only just getting this party started!