Build modern, performant Wordpress themes

Sep 2015

There’s a few basic things that are extremely important to me when building the front-end of my Wordpress themes:

  • The CSS should be structured to be built mobile-first.
  • Useful Sass mixins should be written to improve readability and the ease in which the project can be maintained.
  • Sass should NOT slow down your workflow by taking ages to compile.
  • The browser should reload on file change instantly.

I decided to collate Wordpress Buddy, a basic template theme which manifests this design philosophy, can be cloned in seconds and uses a modern tech-stack for efficiency and speed.

Wordpress Buddy uses Gulp for javascript task running (to minify and auto-prefix CSS, uglify JS etc), BrowserSync for auto-reload and uses some of my favourite Sass mixins.

Ensuring you have a local Wordpress install at the ready, simply clone the repo into the themes directory:

# clone the project, then run the default gulp command
$ git clone git@github.com:James-Oldfield/wordpress-buddy.git
$ gulp

This default gulp task fires up the BrowserSync server via proxy. Wordpress-Buddy watches your PHP files for changes and BrowserSync refreshes the page on all connected devices. It also compiles Sass using NodeSass too, which is lightning fast.

I find it’s a great way to start my themes with best practices and my favourite paradigms.

As always, this is open source, so please do contribute if you care to.