Having built WordPress powered websites for as long as I have, there’s one thing that I can bet on: WordPress will change. Most of the changes over the years have been incremental and additive. Adopting these changes has generally been smooth, seamless, and not disrupted our development workflow in a drastic way. And as a general rule, the WordPress Community as a whole has embraced most of the changes.
That is, until WordPress 5.0 introduced a new ‘block’ based content editor: Gutenberg. While we at Spigot have embraced and truly enjoy the new Block Editor, it’s hasn’t yet been a universally accepted good in the WordPress Community. And while we’ve actively encouraged customers to embrace and learn the new editor, there are still a few holdouts who prefer the classic editor.
So I thought I’d explain how we currently are building WordPress powered websites in terms of the balance between our recent embrace of page builders and the direction that WordPress is taking with the new Block Editor.
Why does it matter how we build websites?
Let’s first discuss why it matters at all how we build our websites…
While many design agencies choose a prebuilt or off-the-shelf theme and use what ever page builder comes bundled, we build our sites from our own custom template. This makes them much lighter in terms of code bloat and unnecessary features. We care very much about performance and the long term viability of our customers websites. When we choose to embrace a new way of doing things, we do so very carefully – weighing how those systems will affect the maintainability, and avoid being locked into dead-end technologies.
Current Build Systems
I wrote recently about how we’ve come to embrace WordPress page builders into our development process. It’s allowed us to build expansive, rich layouts for our customers in a much more efficient manner. In the last few years we’ve built many sites that use Beaver Builder throughout the site, including pages, posts, custom post types, and more. Now that Gutenberg is becoming more powerful however, we’ve begun a bit of a shift. But let’s not get ahead of ourselves… let’s start at the base:
Base Theme
The heart of any WordPress based website is the theme. They come in a thousand flavors and many of them support Beaver Builder out of the box. We do it a bit different…
We begin every project with a starter theme I’ve been developing and improving for many years. At it’s base is a system called Hybrid Core – an integrated starter theme developed by Justin Tadlock and members of the Theme Hybrid community. It’s built around modern development technologies, and designed to be organized, clean, and efficient.
Out of the box, this theme is very minimal with styles, and is ready for us to efficiently create pixel perfect markup and styles of the project concept. We can take nearly any design concept and build it out with this starter theme.
What it doesn’t have
For any experienced WordPress user, using a site that we’ve built, you’ll notice something very different: Almost a complete lack of options. Rather than building in the ability for customers to globally change and tweak options, each site is custom built for that specific customer. So we don’t need to build in font choices or color pickers. We don’t build in header options or the ability to change the logo. That may sound like a limitation, but for us it’s a feature. Our sites don’t load the extra code, and the WordPress admin is clean and free of options panels. And in all the years we’ve been doing this way, never has a customer asked why these options are ‘missing’. They are free to edit the important content on the site without worrying about a million options.
Beaver Builder
Until Gutenberg becomes a full fledged website builder, we are continuing to use Beaver Builder to help us build out complex landing style pages. This generally includes the Home page, certain interior pages, and of course traditional ‘landing’ pages. We’ve used it to build custom product pages for WooCommerce, and custom layouts for custom post types. Anywhere we need rich, or complex layouts we’ll turn to Beaver Builder.
WordPress pages are set up to use either Beaver Builder or the standard WordPress editor – ‘standard’ being Gutenberg. We are starting to lean more towards Gutenberg in these areas as it gains more and more layout features.
Gutenberg
While we’re building in the option to use Beaver Builder on pages, we’ve begun to exclude it from WordPress posts. Since blog posts should be mostly focused on delivering a great article, we think the current feature set that Gutenberg provides is very sufficient. In terms of being forward compatible, sticking with core WordPress tools, as often as possible, will help ensure the longevity and portability of the content.
What about Headers and Footers?
Beaver Builder has an extension called Beaver Themer that allows a developer to build nearly every aspect of a WordPress site within the Beaver Builder framework. While this may seem convenient, it’s a tool we mostly avoid. Our headers, footers, archives, and more are built directly into the theme files using the WordPress templating system. This ensures, again, that we’re using systems that are a part of WordPress, rather than an extra system built on top. I’m convinced this is the best way to build a site that will be compatible with WordPress for a long time to come.
Wrapping it up
There’s a lot more I can explain about our build systems. It’s something I think about a lot. But to put it all into a digestible elevator pitch:
We build WordPress powered websites that use a page builder in a light weight manner. We believe in the future of Gutenberg and keeping WordPress as lean as possible. This is the best way we can serve our customers when developing a custom website.
If you have questions or comments, leave theme below. I’m always willing to hear counterpoints and adjust my approach if it makes sense and creates a better product.