WordPress Project Boilerplate

I’ve created a WordPress project boiler-plate to kick start WordPress development projects.

Bootstrap WordPress boilerplate includes:

  • Bootstrap theme Bootstrap 3.3.5
  • Jasny Bootstrap 3.1.3
  • Bootstrap Responsive Toolkit 2.3.0
  • Font awesome 4.3.0
  • My Favorite SCSS File structure
  • Gulp file with tasks for
    • Transpiling + Combining SCSS
    • Transpiling Coffee Script
    • Compressing Images
    • Compressing + Combining JS
  • Behat front-end testing kick-start (via composer)
  • Striped down ‘bare-bones’ template with bootsrap
  • Basic robots.txt
  • Default .gitignore
  • Universal Analytics Code (Async with client ID placeholder
  • Convenience script to start selenium server from the project root
  • Other cool things to come
I endeavor will keep this list up-to-date as the boilerplate evolves.

Setup

WordPress

  • Clone the project from Git
  • Create a MySql Database and VHOST
  • Navigate to the VHOST and install WordPress as normal using the WP Installer
  • If it hasn’t already, set bootstrap theme as default theme in the WordPress admin interface

Gulp

There is a package.json file which will take care of installing the required node modules.
  • If you haven’t already, install node package manager
  • Navigate to the project root in terminal and run “npm install”
  • If the install is successful, Gulp is ready to go e.g. gulp sass from the root.
  • Default gulp tasks are:
    • Gulp sass – Combines, transpiles and compresses the scss files in themes/bootstrap/scss into stylesheets/theme.css
    • Gulp scripts – Combines and compresses the JS files in themes/bootstrap/javascript into main.js
    • Gulp coffee – Transpiles coffees in themes/bootstrap/javascript into themes/bootstrap/jaascript
    • Gulp images – Optimises images in themes/bootstrap/images_src into themes/bootstrap/images (recommended for static template images)

Behat

Behat is a front-end testing framework which runs automated tests (defined as ‘features’) on your website. Separate blog about this to come!

Homestead

I recommend homestead for use to serve this project. Separate post about setting this up to come.
folders:
  - map: ~/Sites/ // Your site location
  - to: /home/vagrant/Code

sites:
  - map: www.wordpress-site.app // Your site name
  - to: /home/vagrant/Code/yoursite // Your site name
  - map: www.wordpress-site2.app // Your site name
  - to: /home/vagrant/Code/yoursite2 // Your site name

hhvm: true
  • Run ~/.composer/vendor/bin/homestead up
  • Provision more sites by adding to the sites above and running vagrant provision Or vagrant global-status followed by vagrant provision {ID OF VM}
  • SSH into the VM can be achieved with using ssh homestead after adding the following to your ~/.ssh/config file
Host homestead
HostName 127.0.0.1
IdentityFile ~/.ssh/id_rsa
User vagrant
Port 2222