Why C9 Starter Theme?

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. The theme is also free and open source thanks to the GPL license.

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.

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.

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.

If you’re a developer and want to get it from source, see below. You can also download C9 Starter from WordPress.org

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

• C9 Blocks
• C9 Blocks Animation – Only available with C9 Early Access List
• C9 Admin Dashboard
• The SEO Framework
• Autoptimize – for minifying and combining CSS/JS
• Cloudflare – CDN
• Matomo – Privacy-focused analytics
• Insert Headers and Footers – For adding tracking code
• Regenerate Thumbnails – Helps re-build featured images and image thumbnails for grids

Settings are found under Appearance > Customize.

Upload your custom logo and favicon/icon for the site from here. SVG logos work best so your logo is crisp at all screen resolutions. Use C9 Admin Dashboard plugin to add SVG support to WordPress

Choose from an array of Google fonts to set as defaults for Heading, Subheading and Body. Enable fade in for Google font loading so there’s no flash of unstyled fonts.

C9 Starter only has a color for the background of the site, but C9 Togo and C9 Music both make use of additional color settings for navigations, link colors, and drop downs in the header.

Enable or disable the search icon in the main navigation for a modal-based search. Other C9 themes have additional header settings for showing/hiding the WooCommerce shopping cart icon.

Control Author name and (widgetable) sidebar visibility on pages–be sure you are on a single post page or archive page to see the sidebar settings change.

Create social links based on url or username.

Optionally display search. Add custom copyright content.

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.

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.

npm install

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 or https://c9.covertnine.com if you use Local from the fine people over at Flywheel.

npm run start

or to use browser sync

gulp watch-bs

gulp watch

gulp compress

Will compile build files, zip them up, and push required theme files into a directory in the theme root called /bundled/theme-name.zip following the requirements for WordPress.org submissions to remove all development specific files like configuration files, sass files, and .ds_store files.

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-starter 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-starter 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-starter-child theme.

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

Downloading more (or less) fonts from Google for the customizer from the C9 Starter theme. (Thanks To Bruno aka @varstahl for his contribution!)

While modifying the theme to fit your needs, you might want to store the web fonts locally, or load even more fonts from Google, while keeping the C9 customization options intact. To do this you can use the c9_google_fonts filter to alter the list of fonts do be downloaded to your liking.

// $fonts is a PHP array with 0 or more fonts to be downloaded
function alter_google_fonts_list( $fonts ) {
    // Add a font
    $fonts[] = "Open Sans";

    // Remove a font
    $pos = array_search("Abel", $fonts);
    if (FALSE !== $pos)
        unset($fonts[$pos]);

    // Return the (possibly) altered font list
    return $fonts;
}
add_filter('c9_google_fonts', 'alter_google_fonts_list');

To ease your debugging, you can enable the console.log within /assets/scripts/typography-script.js, to see which fonts are actually being downloaded.