Using Builderius to create a Fully Custom Dynamic WordPress Website Without Having to Touch PHP
A few days ago I wrote an article called Creating a pixel-perfect conversion from Figma to WordPress; It was the first part in a series where I'm planning to recreate Figma designs in WordPress.
I wrote that first article to explore a page builder called "Oxygen Builder" from the perspective of a full-stack developer. This is because Oxygen is known as "the developer's page builder for WordPress".
In response to this article, I received a request asking if I could explore another builder called "Builderius" as it also targets developers looking to build on WordPress. Initially, I assumed that I could just include it in my experiment series and just use it to recreate a Figma design.
But the more I explored Builderius, the more I realized how such an article would not do it any justice. Whilst Builderius seems to support all the HTML and CSS features you would need to recreate any design, it goes a lot further than that.
Using it to simply create a landing page would be like using a cargo truck to move groceries. Its main focus seems to be on making life easier for those wanting to build complex, scalable and performant websites that are based on dynamic WordPress data.
Who do I think this is best for
I think this one is perfect if you're a Frontend or Fullstack developer and your client wants you to build them a WordPress website that dynamically pulls and shows data from the CMS.
You don't have to say no to the project or go ahead and become a traditional WordPress custom theme developer.
If you say yes to the project, you will be able to build the website with largely the same "mental models" you would use when building say a React site or app that pulls data from a headless CMS like Strapi. With the added benefit that it's all done in a visual editor instead of with just raw code.
I also think it's pretty good for ambitious WordPress power users and implementers who want to build dynamic websites or the equivalent of building their own WordPress theme (without code).
The main strength of Builderius might also be seen as "weakness" if you want to build simple static landing pages
Builderius puts a modular component-centered approach front and center. If you're a React developer, you will know what that means.
The idea is to create self-contained and encapsulated pieces of markup and styling, and then reuse them with changing data.
For example, you might have a "recipe component" which shows the cooking time, the image of the meal, and the ingredients. It can show differently based on what data you feed it, so you can reuse it for the different recipes on the website.
Another example might be the front page of a tech news website. It might show a grid listing a dozen blocks each advertising a news story. In a component-centric approach, each of those is just an instance of a news-summary component that dynamically pulls and displays the title, image and excerpt of a news story.
And then, if you look at building out your "single news story" page, that would be a set of components that display dynamic data related to the full news story. You might have a page-header component, a news-story component, a related-stories component, etc.
You can do the same with Builderius, and this is where it shines. If you've ever wanted to go beyond static pages and build your very own dynamic WordPress theme without becoming a WordPress developer, you can now do just that.
This comes at a cost though*: The workflow as it is now, prioritizes such use cases over those involving building simple static pages with static content.
And whilst the component-centric approach makes a ton of sense for building a website where things repeat, this isn't the case for simple static landing pages where there is almost no repetition in terms of markup.
If there is any repetition on a static landing page, what might repeat are CSS styles, where two things have the same drop-shadow and border-radius. And in cases like those, your main friend is the CSS class.
Yet, CSS classes aren't prioritized in the Builderius interface, in the way that they are prioritized in class-first builders.*
*See update in summary
In summary
Builderius makes building complex dynamic websites easier and faster and offers more powerful features than I've seen in other WordPress builders, for example, you can query with GraphQL. That's a bit mind-blowing in terms of added productivity, flexibility and power.
In turn, that same workflow feels off if you just want to build a pretty landing page using a class-first approach and static content. Whilst nothing is stopping you from building static marketing pages in Builderius, it just doesn't feel as intuitive.
The good news? It doesn't insist on controlling your entire site or managing all of your pages in their entirety. If you want, you can combine it with other solutions.
This focus on playing nice with others can be seen from their hooks feature, where if you wanted to, you can hook into parts of your existing theme. So it's up to you if you want an entire page to be handled by Builderius, or just parts of it.
So if you prefer combining things, you can. For example, you can build the overall website using Builderius, but get the marketing pages done with ready-made templates from your favorite theme, or even do pages with Gutenberg.
Update |
Apparently, there is a new UI coming to Builderius soon, with a focus on an updated workflow. What I just described might no longer be accurate once it releases. If they do make it just as intuitive for creating static pages, I think they will have a winner on their hands. If you happen to be reading this in the future and I've forgotten to update the article, the new UI might already be out by the time you're reading this. |
To learn more you can check out this tutorial series on YouTube: