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 🙂
Video blogging is a new thing for me but it’s been a lot time coming. We’ve talked forever at work about showing our clients how to create and curate content online and develop a sustainable content marketing plan, but knowing that its kind of a “but what have you done?” kind of situation, its been a slow crawl to actually beginning it. After a few recent equipment purchases I’ve finally decided it’s time to make a go of it and try to wrap my head around the vastness that is YouTube. I confess I’ve begun watching a few star youtubers who will remain nameless although you know exactly who they are and if you don’t, you should really spend a weekend binging on youtube (hint: binge). For the record, Yes I have been watching Miranda Sings and yes, part of my soul died the moment I saw her but I’m convinced I won’t miss it. Anyway all this to say that I have officially started working on some videos of my own. I managed to pop out two today actually which will certainly not be a regular happening.
The first video is a screencast about my recent (but deeply serious) relationship with a WordPress plugin called Beaver Builder (go get yourself a copy). While the video turned out to be way too long and I swear I’ll never publish a screencast that long again, I feel like it was a good primer on what they layout tool is capable of. The second video was really an exercise in curation. Mark had sent me a Lifehack article a few weeks ago called 20 Things Only Highly Creative People Would Understand and it really was very good and also a little jarring. I took a few of the points out of it and made a talking head video discussing the points that hit me most.
All in all, not a bad Saturday’s work and I feel like this could be the start of something, assuming I’m able to keep coming up with video topics. I’ve still got so much to learn but I am getting more comfortable simply being in front of the camera without completely loathing myself. It’s also inspired me to start what I’m calling “The Youtube Diet” which is really just paleo with the added incentive of having to see yourself on camera every day (shame works!). Anyway, I hope this is the beginning of something great. Check out my YouTube channel and if you’re feeling generous, Like a video or perhaps even become my first subscriber! My self-esteem will be infinitely grateful. If you have any ideas for videos you’d like to see me create whether they be about creative tools and how to use them, or just life in general, feel free to comment below or tweet at me! Enjoy.
So the month of April for me can be summed up in one word; Bentley. This is my new 11 week old beagle puppy. He came home a little over a week ago and has occupied every waking moment of mine since, as well as some of the sleeping ones. He’s quite a handful but I can see he’s learning and I really can’t get over how insanely cute he is. Like any puppy, he’s a chew monster. There’s really nothing safe from those tiny sharp teeth, certainly not my fingers. He is picking up some commands like sit and lay down pretty quickly though. Now if he could just quit pottying in the house. Needless to say there will be many more pictures of this guy coming in the future. Enjoy.
Yea so its not a salon….its a blow bar (I know, I’m not mature enough to handle this). Apparently that’s a thing, a blow bar. Anyway, this is Rachel getting her hair “blown” the morning before her wedding. I really liked shooting in here because A) it gave me some flash bouncing practice which I always can use, and B) there were mirrors everywhere which got that great square print of Marilyn into just about every shot. She kind of presides over everything like the patron saint of blow drying. Appropriate. All in all, a surprisingly nice scene to shoot in. Lots of reflective surfaces, trendy wall paper, and people milling around to make for some very active shots. A perfect candidate for B&W treatment. Hope you like it too.
Its hard to pass up a good sunset and you really can’t ask for a better backdrop for a kiss, except maybe for one without the cars. I’m loving several things about this image. The sunset is hitting all the colors that we want. The pinks are there, the blues are there, and the horizon is on fire. The other thing is how loose and relaxed Nick & Rachel are here. Its that open, free, elated feeling that happens when the sun starts to go down on a good day and the breeze carries off your troubles. The classic kick back of her leg makes it cute and playful. Hitting all the notes we’re after, this shot is definitely one of my favorites for this wedding, and that’s really saying something.
This I love for several reasons. Firstly, I love this girl. Can’t say it enough, I love this girl. Secondly, I love this because I shot this with my iPhone 4s. I was actually in this particular wedding so I didn’t always have my D7000 handy. I love this cause it shows what I’ve been saying forever; Every camera that has ever been made will do the best it can for you if you’ll just give it light, and we have gorgeous light here. Lastly I love this because it absolutely vibrates with emotion. She is in the same room with her to-be husband but she can’t look at him. Nevertheless her excitement is gushing right out of her face. She is glowing. Brides, take a tip from my girl Andrea here: When its your wedding day, don’t be scared to let all that flood of emotion out in your pictures. Smile big. Open those eyes. Your pictures will thank you for it. Just don’t mess up your makeup 🙂