C9 Client Boilerplate

 Overview

Use this client boilerplate to effectively manage multiple client projects with the C9 theme, leaving your clients to do whatever dark magic they like with the child theme.

The Developer’s Condition

So you have a base theme and you have people who want websites. You want to use the same base theme across client projects, for obvious reasons. But the client wants you to make all these fancy custom changes to the theme, but then they also want to personally mess with the CSS or who knows maybe some PHP; all edits of variable quality. Oh, and you just noticed a visual bug in the base theme, which now must be fixed across every site you have. Or did the client create the visual bug? Who knows?

At CovertNine, we wanted a system that would address the common complications associated with managing multiple clients on a similar codebase. More specifically, we wanted to

  1. Update the theme without overwriting any client stuff, by design
  2. Version all client-specific code
  3. Allow the client to mess with their code as much as they like, up to and including creating a child theme

The Solution

Our solution was to maintain one git repo for the parent theme (c9), alongside a gitignore‘d repo inside the c9 directory. That’s this repo. So, in WordPress, the directory stucture is wp-content/themes/c9/client. Both ‘c9’ and ‘client’ are git repos. We have added functions to the c9 theme that then check in the client directory for stuff before anywhere else. It’s kind of like a child theme in that way, but a child theme only you mess with.

That leaves the actual child theme for your client theme (that’s c9-child).

Installation

// from themes directory
git clone https://github.com/covertnine/c9.git
cd c9
git clone https://github.com/covertnine/client-boilerplate.git client

Now you can get regular updates on the base theme, and update your client code as much as you like.

Integration with C9 theme development

While the client directory has a few useful functions and adds client-specific stuff like assets and custom fields, a lot of the magic happens in the parent c9 theme.

The C9 build process integrates with the client boilerplate via the gulpfile.js, which watches the scss files in the client/client-assets directory, and drops everything in the client/dist folder. This way, you can even overwrite scss variables defined in the parent theme (via client/client-assets/_client_variables.scss).

From c9, just run npm run start and get going! You can get more details about the npm process here.

Example workflow

1. Clone C9 parent theme into your theme folder
// from wp-content/themes
git clone https://github.com/covertnine/c9.git
2. Clone C9 client boilerplate into just-created c9 directory, and call it “client”
cd c9
git clone https://github.com/covertnine/client-boilerplate.git client
3. Run npm
// from wp-content/themes/c9
npm install
npm run start
4. Do your development in the c9/client directory

Make all client-specific changes inside the client directory.

5. Create your own client project repo on github and set remote accordingly
// replace myaccount and client-project
git remote add origin https://github.com/<my-account>/<client-project>.git

// first commit!
git add .
git commit -m "first commit"
git push origin master
6. Optionally, maintain your own version of the c9 parent theme or merge in any new updates from us!

Don’t want to mess with any of this?

If these are not problems you face, and you just want to get rolling, feel free to ignore all this, and just use a regular child theme, which you can get the boilerplate for here.