CraftCMS Content Builder: Where WordPress finally came to die
Pixel & Tonic’s CraftCMS has fast become a favourite among developers, due to it’s polish, front-end agnosticism, powerful templating approach, and ease of use for content creators. For the last year, our team has been building websites primarily on Craft because of the creative flexibility it gives us as designers and developers, and the simplicity it offers our content creation team and clients after handovers. While building with WordPress was something we were used to, we needed a content management system that made no upfront assumptions about the kind of fields we needed, and we’d grown tired of wrangling themes and WordPress’ clunky codebase.
The Problem
While CraftCMS was a great solution to our design, development, and content management approach, but we found ourselves with a different kind of problem — replication. On one layer, if you build enough websites you know there are a set number of fields and components you’re likely to use again and again, from site to site. And on another layer, you know that these repeating fields and components get used in various ways on many different pages of your website. You need an easy way to replicate these limited ‘standard’ fields when initiating a new build, and an approach that allows you to use these fields and components in a flexible, customizable way on multiple pages with a minimal templating footprint. Enter the need for a content builder.
Our Content Builder
Taking inspiration from Cosmic and their excellent blog post on this very topic, we took to crafting a content builder of our own that took their approach to the next level. Our content builder is a single Neo field, with block types that consist of various ‘utility fields’ we created. These utility fields are simple types that can be applied to different components, matrix blocks, and field layouts.
Because we use Bootstrap as a framework, our content builder gives users the option to create rows, and columns, then elements/components like a simple blockquote or an image gallery. With more utility fields, we can add “settings” to each element/component that allows for even more customisation like adding padding, or a special CSS class.
Taking cues from Cosmic again, when adding content to columns, users are able to select components from three different categories — Text, Media, and Other. For what we consider to be a standard implementation of the content builder, there are about 8 elements/components, with options to add background colours or images to rows and columns that make for some pretty powerful out-of-the box layout options. Other components are added on as per the design and functional requirements of the website.
Our development and handover philosophy is one that tries to strike a balance of giving the content creator just enough control over their options for page layouts, without allowing them to break the design conventions and rules created for the site in the design phase. We believe a client should be able to add an image gallery to an About Us page after handing the site over to them if they need to — we use CSS to determine (read: control) what this will look like for their website.
The Markup and Template Structure
To make the content builder work in a way that’s as simple as possible, we use a series of Twig {% include %} tags and macros that result in a single page.html template file powering the majority of the pages on a site.
The container.html that houses the content builder (Neo) Twig loop ends up looking like this:
…etc using Twig cases for as many more of the elements/components as we have.
Where a macro from _macros.html looks like:
And then page.html looks as simple as this:
Plugins Required
Getting our setup up and running relies on a cocktail of pretty neat plugins by some solid CraftCMS developers. These include:
- Neo — to manage the structure of the builder (read this for powerful tutorial)
- Blueprint — helpful for mapping out and keeping track of component field structures
- Field Manager — duplicating, importing and exporting fields
The Setup Process
There are several ways we have packaged our “master” CraftCMS configuration for easy setup on a new installation, or pushing to a new environment, but getting the content builder up and running on an existing installation of the CMS is as simple as importing and exporting fields using the Field Manager plugin, and copying over our key templates.
Goodbye WordPress
While it’s not accurate to say that we have stopped developing with WordPress completely (we have not), it is accurate to say that as a first-choice CMS, our content builder has elevated CraftCMS that much more above it. The relative power one of our junior developers would have enjoyed with something like Visual Composer, is now present in Craft. Instead of wrangling a WordPress theme, or building one on top of WordPress’ bloat, we can develop lean, based on pretty much any design our team can come up with.
The result of the content builder and setup, is a replicable solution we can use to get a fresh installation up and running with a set of fields and components we can use right away to build pages out. This ends up significantly cutting down on the initial setup, and allows us flexibility where we don’t need to build out all of our major pages in static HTML first — we can go straight from design to development. We’ve already seen how this approach works for our internal teams, and for clients. And we’ve managed to implement a solution that delivers maximum value to both.
The content builder is the brainchild of myself (architecture), and Elvis Magagula (Neo, templating logic), for the wonderful devs and content creators at our agency, Clockwork Media.
