C9 Theme Overview

 Minimalist + Bootstrap 4.3

WordPress’s new visual editor, Gutenberg, has changed things for WordPress users and developers. The editor is now far more powerful, and the requirements for a base theme have changed. We developed the C9 Theme specifically to work with our own Gutenberg plugin, C9 Blocks, which turns the Gutenberg editor from an enhanced blogging tool into a full-fledged page builder.

Why C9 Theme?

1. C9 provides theme support for WordPress Gutenberg
2. C9 is a boilerplate for a modern development workflow.

Though any one part is optional, C9 has a healthy development toolset. We use a number of NPM-based tools, including: Gulp for task running; WebPack for Javascript module bundling; Babel for all the fancy new Javascripts; ESLint and Prettier for linting; and Sass.

Why modern development?

Gutenberg is built on React, which means a lot more Javascript-centric development going forward for WordPress. You can avoid this tooling altogether, or you can automate your entire process, write Gutenberg integrations, use Sass variables, etc.

In addition to NPM, we built C9 theme with an implicit Git workflow for managing client builds, more on that below.

How to install the C9 Theme + Plugins?

Installation

If all you want is a theme with Gutenberg support, then you can install and use C9 like any other WordPress Theme from under Appearance Themes in the WordPress admin. Upload the zip file, and activate your theme, which should then prompt you to install our recommended plugins.

If you’re a developer and want to get it from source, see below.

Supporting plugins we highly recommend

When you first activate C9, a number of plugins will be suggested for download:

  • C9 Blocks
  • C9 Admin
  • The SEO Framework
  • Autoptimize
  • Regenerate Thumbnails
  • WP Retina 2x

Once you’ve activated the C9 Blocks plugin, you should be redirected to our quick start guide to give you a quick crash course on how our blocks, section templates, and page templates work.

Settings:

Settings are found under Appearance > C9 Theme.

Branding

Upload a logo. Choose from an array of Google fonts to set as defaults for Heading, Subheading and Body.

Social

Create social links based on url or username.

Footer

Optionally display search. Add custom copyright content.

Posts

Control Author name and (widgetable) sidebar visibility

SEO

Support for Google Analytics and Matomo (an opensource alternative) provided

Advanced

Add custom CSS and JS

For developers

If you just want to develop the regular old way, you can build a child theme with the child theme boilerplate here:

And get developing. If you want to use a more modern workflow, see below.

npm

Overview:

Gulp watches assets/scripts and assets/styles, bundling (Webpack) and minifying JS and Sass into assets/dist. As a task-runner, Gulp can do a ton of stuff: optimize images, manipulate files, run browsersync, etc. Gulp also watches the client directory, but more on that below.

Installation:

npm install

Configuration:

buildconfig.json
gulp.js
webpack.config.js

If you want browsersync to work, change out the proxy setting in buildconfig.json to your local environment address, e.g., localhost:3000

Run:

npm run start

Developing with Git and the client directory

We designed C9 to allow for creating client projects, while maintaining the parent theme in source control, but still letting where your client will have the option to create a child theme that they can do their own theme development on.

In summary, we track the C9 parent theme with git, but include the client directory in the top-level .gitignore. Then we maintain the client directory in a separate repo. So, github has one repo for the C9 parent theme, and then a separate repo per client project. Again, this allows us to ability to version all of our code and update the C9 theme across all installations, while allowing complete customization via the client directory, while allowing the client maximum freedom to make their own changes, via the C9-child theme.

If these are not issues you have, you can ignore the client directory and just create a child theme.

Happy coding!