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.
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 firstname.lastname@example.org: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.