Finally, after more than 5 years, I was able to build a new WordPress theme for my website! I’m pretty proud of it and the final result is exactly what I was striving for, so here’s a quick overview of the entire building process and how I decided to stop hacking WordPress, trying to tweak it to make it behave the way I wanted, and instead embrace its development approach, and indirectly improve my life.
Let’s start with the Design
As you may or may not know, I’m a designer other than a developer, and I wanted to show it first and foremost as soon as a user accesses my website. Designing a custom theme with a compelling home page was my main objective.
I knew I was going to have a blog section, and that all the internal pages would have followed the same standard “content + right sidebar” configuration of a common blog layout, that’s why the front page had to stand out from the rest. Based on the design I made, I was planning to build it using Elementor or Oxygen Builder.
Avoid the Theme Builder rabbit hole
Almost immediately, I started stumbling upon small issues and road blocks with those page builders. Don’t get me wrong, both Elementor and Oxygen Builder are outstanding tools, but they’re not as flexible as I wanted them to be, and I didn’t really want to spend most of my development time, tweaking away custom components or building custom snippets to get the results I wanted. Also, since the rest of the site was going to have a regular “two columns” layout, dealing with the technical debt of a page builder plugin wasn’t really worth it.
Another issue I was having, was the fact that Gutenberg didn’t play very well with the custom configuration I was creating, and that’s when I reached the point where I was forced to make a decision that was going to substantially impact my website architecture. Embracing Gutenberg (the WordPress Block Editor) or completely reject it for years to come.
Embracing WordPress and doing everything natively
So, now that I decided not to tweak WordPress in any way, how the hell would I approach the building of this page? The left side was pretty easy as I simply printed the content of the Front Page. The font variation was done with regular CSS, and the content is now fully manageable from a standard page in the administration area.
It was time to deal with the tricky and unusual part, the right area with those four blocks, custom colors, built-in menus, and background images.
The Walker Nav Class to the rescue
I always considered the Walker Nav Class of WordPress a powerful addition that is too often forgotten by developers. Since all those blocky sections were going to be populated by simple links pointing to actual pages, I wanted to handle the ordering and titles with the built-in menu section of WordPress. I created 4 dedicated menus and attached those to a custom Walker Nav Class to render those links the way I wanted.
After creating those custom menu locations and the dedicated Walker Nav Class, the only thing left was to create a partial PHP file to require inside the dedicated front-page.php template. The code of that “partial” was really easy, mostly thanks to TailwindCSS and its flexibility, I was able to generate those 4 blocks in few minutes and pull the background images from my assets folder.
A super light and future proof theme
The result of this approach is, without much surprise, a super light theme and a future proof WordPress installation I don’t have to worry about for many years to come.
I ended up using only 7 plugins in total, which none of them interferes or drastically changes the default behavior of WordPress, or any of its core component.
Having fewer plugins, not trying to go against the logic or behavior of WordPress, and forcing yourself to use the tools and resources available from this CMS, will give you in return a fast and light website, guaranteeing total compatibility with future updates and bug fixes.
My previous theme was built more than 5 years ago, and it was working flawlessly still today, even with Gutenberg. Can we safely say that the time of bloated WordPress website with 20+ plugins is coming to an end?
How can you build it yourself?
To build my website, I used the AWPS starter theme I coded which you can download for free on GitHub.
You can also follow my WordPress Tutorials on How to Build a Premium Theme from scratch and the dedicated and in-depth tutorial on How to Create a Mega Menu and learn everything about the Walker Nav Class. Or, if you feel more adventurous and you’re craving advanced PHP, you can take a look at the Plugin Series.
Happy Coding!