Why C9 Starter Theme?
1. C9 Starter provides theme support for WordPress Gutenberg
2. C9 Starter is a boilerplate for a modern development workflow.
Why modern development?
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 Starter Theme + Plugins?
If all you want is a theme with Gutenberg support, then you can install and use C9 Starter 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
- 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 are found under
Appearance > C9 Theme.
Upload a logo. Choose from an array of Google fonts to set as defaults for Heading, Subheading and Body.
Create social links based on url or username.
Optionally display search. Add custom copyright content.
Control Author name and (widgetable) sidebar visibility
Support for Google Analytics and Matomo (an opensource alternative) provided
Add custom CSS and JS
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.
What does a finished C9 Starter Theme + Gutenberg Blocks site look like? Look no further than the C9 Music theme! This site has a single page navigation menu, and a smooth scroll animation powered by Green Sock.
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.
If you want browsersync to work, change out the proxy setting in buildconfig.json to your local environment address, e.g., localhost:3000
npm run start
Developing with Git and the client directory
We designed C9 Starter 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 Starter 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 Starter 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 Starter 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-starter-child theme.
If these are not issues you have, you can ignore the client directory and just create a child theme.