You’ll learn a fantastic new approach to creating WordPress sites. It breaks many traditions, though. We don’t claim to have come up with using Elementor and Underscores, even though we never heard of anyone using the combo yet. Therefore I’ll teach it to you, maybe to change your point of view. In turn, you’ll benefit from a much less bloated, more performant WordPress site!
The usual WordPress site creation workflow
The default, common-sense approach looks something like this:
- Buy a premium WordPress theme on ThemeForest!
- Use the builder that comes with it!
- Stuff the site with plugins!
- Hack away!
- Complain that the site is slow!
- Fear the updates!
That’s all we ever knew and recommended to friends and acquaintances. Sure it drives traffic and sales to ThemeForest premium themes, but at what cost? Most sites nowadays scream “TEMPLATE!”. You can tell that the owner is OK with the default design, and didn’t dig very deep into setting things up. Could our approach be a game-changer?
What did we do to arrive at this solution?
We spent countless hours taming expensive WordPress themes to how we want them to behave. Even if a theme says it’s multi-purpose, ultimately it becomes its demise. They got so complicated that you design the whole site and not much remains from the original concept of the theme. Quite often, theme creators like to add a builder (among other plugins) to their already complex base code, to stay competitive in the market. With all the bonus plugins and fancy stock photos removed from their demo site, what remains? If you design everything yourself anyway, why buy that expensive theme?
We worked with different builders, most notably WPBakery Page Builder, formerly known as Visual Composer. Our experience was that some premium themes turn off the front-end, live editing. That deprives it of its real strength, leaving a fiddly backend experience. We created a site with a premium theme and Visual Composer combo, but we grew tired of the complexity. We decided to ditch it and find a better approach, which later turned out to be the pair of Elementor and Underscores.
What if a builder was so powerful, that it could take the role of the theme? You’d have a faster site, with only one product to learn. One of the best for this task is Elementor.
Our alternative approach with Elementor and Underscores
We noticed after digging deep into Elementor’s admin screens that it has the capabilities of a theme. You could create a layout and mark it as an archive. Create another for 404 pages, sidebars, etc. Oddly, it has everything that a theme is supposed to do. Therefore, it sounded promising and wanted to see how much it could accomplish on its own.
It didn’t take long until we’ve found an almost blank theme called Underscores. That theme is very far from what you’d think of something off ThemeForest. It’s blain blank, quite the minimum that WordPress needs to function. The idea was that anything colorful we see on the front-end is going to come from Elementor (as the theme has no styles). The combination of Elementor and Underscores was born!
What is the Underscores WordPress theme?
You might wonder what this is. When creating a theme (maybe for sale), a developer doesn’t want to start from scratch. These boilerplate themes include general code that is common among every theme there is. It’s like the fundamental skeleton structure. Sure, there are variations of how coders implement the general structure, but the core foundation is the same. We wanted a template that has just these essential lines, and nothing more.
Specific template tags hold a WP site together. Such as creating an area that is going to become the header or footer of an HTML document. Similarly, the page needs to know where the content, menu, sidebar, or the comments will be displayed. It’s straightforward.
If you were to install this theme, your front-end would look broken. Blue-purple links, no styles, black text on white background. The whole thing is under 100KB. For starters, it makes a speedy site. No bloat on the theme’s side. Just the way we like it.
It’s worth noting that Automattic (the people behind the WordPress project) created Underscores. Its open source nature ensures that the theme includes the knowledge of many developers and a relatively bug-free operation. It’s not updated all that often as it doesn’t need to be. Fortunately, it’s completely free, and you can change it any way you like. We customized it by adding our snippets to a child theme.
What is Elementor?
It’s the beautiful and modern builder that breathes life into our site. Elementor is developer friendly and extendable. This builder makes a very lovely workflow possible, mainly due to its live front-end building. All of this might sound like a marketing pitch, but we genuinely liked the instant feedback of every value change. We could scroll margin or padding values with the scroll wheel and see the element change in real-time. It saved us a lot of time when we created the layout.
Of course, since we are developers we needed to add a lot of custom code, PHP, CSS, and JS. But we didn’t need to create everything from scratch, only the parts that are unique to our site. These components are the difficulty indicators, our animated link underlines, and image lazy load, among many other tweaks.
Elementor and Underscores combined
Once we were down this path, it was immediately apparent that the result is something easy to change. Elementor had almost everything in its toolset to simulate a proper theme. Our very site is the proof that the Elementor and Underscores combo works, and we think that it turned out quite well. Instead of two bloats, we have just one bloat. 🙂 Why? Elementor’s size is still significant, and it is still capable of much more than we require. But at least, when we need something (a component), it’s probably in its library. It’s a small cost to pay compared to having your entire site coded by hand.
Difficulties with Elementor
It wouldn’t be an honest recommendation if we were silent about some problems. One thing that Elementor couldn’t do in the summer of 2018 is the post comments. I mean we inserted the comments block, but it expected its design to come from an underlying theme. Since we don’t actually have one, it appeared unstyled; therefore we had to write all the CSS for it.
No builder or software is perfect, so we ran into some bugs. The developers are good at fixing them if reported. No deal breakers here, but know that it’s almost never smooth sailing in the world of WordPress. It doesn’t matter what buzzwords are trying to sell you; you’ll run into problems sooner or later. Surely we are somewhat pessimistic, but it’s the truth.
Unfortunately, we do fear updates, as they tend to mess things up. As a best practice, we recommend keeping a copy of the site as staging and trying updates and layout changes there. Developers like to test new things to keep up with new technologies, but this is not always a good thing. Layouts might break, and if you don’t know how to fix them or don’t have a freelancer at hand, you’ll have a hard time. The same goes for themes, by the way, and it’s probably worse there. So don’t dismiss our approach based on this.
Conclusion
Might you not need a WordPress theme after all? The Elementor and Underscores combo is a cost-effective albeit alternative approach to the typical workflow. It’s straightforward to use and brings instant feedback and results on how your site will look even before you press save. It’s not without cons, but we believe it’s the new best way, at least for us. We are proud not to have used a premium theme on this site. It let us avoid a royal mess that they usually bring.
Using Elementor and Underscores together is the next best thing to coding the site yourself. The combination surely has more room to grow, but it’s already fine in its own right. Therefore, we recommend the solution even for beginners. Elementor still has built-in demo data so you don’t start from scratch. Furthermore, the instant live preview building experience is addictive and they’ll love the true “what you see is what you get” thing.
Update: Thank you all for recommending the Hello Theme, we’ll build the site for our next secret project using that. Once done, we’ll get back to talk about the experience and possible differences. We also look forward to seeing how the concept works with GeneratePress.
2020 September update: This article is also available in Spanish: Elementor y Underscores: ¿Es realmente necesario un tema? over at Caribdis.net, our translator’s website!
Comments are closed.