This is not a new topic. People have been trying to understand the separate but equally necessary roles of style and layout since well before the internet. The advent of the web simply made the notion of reusable parts more achievable than it ever had been before. The first real worldwide attempt at this, to my knowledge, was the introduction of CSS as a presentation counterpart to the declarative role of HTML. In a sense, HTML was meant to control the layout and content of the page, and CSS was to control the style. But the lines quickly blurred. CSS was given control over dimensional properties like margin, padding, border (for the new kids, before border-box sizing, borders took up space-and broke layouts), and of course floats. So it became up to the developer to exercise their own sensibilities about which pieces of code should contain which decisions. Then grid libraries (bootstrap) came out. This paradigm said “This stylesheet will handle layout. Your stylesheet can handle styling” and that model continues to work for a lot of us today. But its still code and at some point you really have to stop and think “Why am I doing all this work for the machine? Shouldn’t it be working for me instead?” and from that seed is born a page builder, or at least the hope of one.
Builder themes and plugins are almost as old as WordPress’ notion of themes and people have been trying to figure out how to make them work together for quite a while. Themes have a history of deciding the layouts for our websites and the premium theme market has made a lot of money selling us “new looks” for our existing or new sites. But quite often these themes disappoint. Either they don’t quite look as good with our content as they did on the shiny demo site, or there’s some very small change to the layout you’d like to make which ultimately leaves you spending more money changing it than you did buying the theme, or if you’re a more seasoned developer, you make the mistake of looking under the hood and discover that this shiny new design was written by a complete idiot who is off counting his money now. We’ve been held hostage by disappointing themes for a long time, but as the various page builder projects have matured, things are starting to look up. I won’t beat around the bush: I think Beaver Builder is a killer plugin and by far the most usable of all the page builders I’ve tried (and I’ve tried them all). But once you begin defining layouts on a page-by-page basis, it forces you to once again, consider the separation of style and layout, and this brings us to a question: What is the role of a theme when using a page builder?
What’s in a theme and what’s out?
I’d love to simply say “Themes do styles and builders do layout” but while I do think that’s the correct conclusion, its not quite that simple. Themes have a lot of responsibilities, some of which require layouts that a page builder plugin like Beaver Builder can’t currently satisfy. Take the blog template (index.php) for example. You can’t build a WordPress theme without this. Beaver Builder itself has a few great modules for displaying posts in interesting ways, but since its designed to display “page” layouts and the blog isn’t technically a page, you can’t actually use a builder layout to display it. If you’re using a standard page for your front page and a page for your posts page, you can, but you have to trick WordPress by not specifying the posts page field so that it will still use page.php to display the blog inside of index.php (I know, stay with me here). Themes also are responsible for other layouts besides posts and pages like authors, categories, tags, search, 404 page, etc…all things that a “page” builder isn’t capable of reaching (yet). So what is the practical role of a theme?
I’ve been writing themes for a long time but introducing a page builder into the mix, I think, lessens the responsibilities of a theme by just a little bit in a very positive way. Themes get to be just that: Themes. Bundles of styling concepts to make sites look excellent. This means typography and color choices. Also, interpretations of WordPress concepts like aligning images (yes, you still need the generated css classes in your theme) as well as galleries. Pretty soon oembeds will be on the list of things a theme will need an opinion about. Templates are where things change. Yes, you need a blog template, a default page template (even if its a big open one-column), author, taxonomy, single, etc… But you DON’T need custom page templates. DON’T make a front-page template either. Let the builder take over the individual layout needs of pages. This gives the end user much more flexibility in the long run. On the flip side, don’t expect the builder to handle styling. Make sure your default type and color styles, even spacing between elements are all happening naturally regardless of whether a page is using a builder layout or not. Here’s my list of how this all breaks down:
Themes are responsible for:
- Global Header / Footer Template Parts
- Blog(index), Page default, Single Post, Author, Taxonomy, Search, and 404 Template layouts. Keep these simple and reusable. Both this and the headers/footers are things that should really go to the builder list of things when that becomes possible.
- Offer typography styles – both default and variations
- Offer color styles – both default and variations
- Content element styles – anything that happens inside the editor.
- Image Sizes – BB doesn’t declare its own image sizes yet, so make sure you do!
- A cheatsheet for builder users of what optional styles, modules, etc… are available in the theme for use in the builder.
Page builders are responsible for:
- Providing a component type for making reusable chunks of content and including their dependencies (for the BB crowd, that’s Modules)
- Declaring the layout and content elements for each page
- NOT to interfere with the styling from the theme, and allow decorator classes and id’s to be applied to the right places.
So all of this to say its time for a new breed of theme: The Builder-Friendly theme. I believe there is a really nice sweet spot that happens when themes and layout plugins cooperate. If you’re a Beaver Builder fan, its about raising some hype with people about why BB-compatible themes are better than the vast majority of the premium themes out there (looking at you, theme forest) and if you’re a themer, its about making themes that are transparent with what’s in them. Here’s a thought: take all those layouts that you were going to have to write as custom page templates and include them as BB Layouts that can be imported. If you’re looking for info on how to make a theme BB-friendly, check out this gist for how I like to go about it: https://gist.github.com/brentjett/b6354a7b682a16735e92
Over time, I hope that the Beaver Builder team will offer more and more hooks for themes to offer nice handshakes to the builder. In the meantime, its starting to be fun to make websites again 🙂
Hey Brent. Great article! Thanks so much for taking the time to put your ideas in writing. We see folks—generally who are new to WordPress—struggle to grok how themes and content fit together. We may start referring them to this article.
Of course, we’re 100% on board with more theme’s adopting BB or going BB friendly!
Regarding hooks, just let us know what you need (this goes for anyone, too). As opposed to preemptively trying to add hooks, we wait for someone to ask. Then, if we can, we’re glad to implement them 🙂