Alecaddd | Designer Developer Dreamer

Web Design and Development, Digital Painting, Music and Life

  • Who
  • What
  • Uses
  • Blog
Posted in Updates

Embracing WordPress and Gutenberg: building a theme in 2019

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.

Home Page designed in Gravit Designer

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.

A pretty standard blog layout

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.

managing this content couldn’t be easier

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.

The 4 custom menu locations

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.

Clean code is clean

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.

Fewer Plugins === Happier Life

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!

Posted on February 6, 2019February 6, 2019
  • Twitter
  • Facebook
  • Reddit
  • Pinterest
Akira UX: Building an adaptable UI Header Bar
How to build Native Linux Apps in Vala and GTK

Recent Posts

  • Featured image of windows loval web development setupEasiest Windows Development Setup – WordPress, Laravel, NodeJS in 5 minutes May 15, 2022
  • We are the generation of forced nostalgia March 27, 2022
  • Working on Thunderbird. UX and UI challenges of an Open Source project. February 23, 2021
  • XP-Pen Artist 12 Pro Review and International Giveaway! January 14, 2020
  • How to build Native Linux Apps in Vala and GTK February 20, 2019

Podcast Episodes

  • Episode 44 – The Nerds are back! May 18, 2020
  • Episode 43 – This is awkward…getting settled into your new role May 12, 2019
  • Episode 42 – We need to talk about Gutenberg Development Workflow… February 24, 2019
  • Episode 41 – You’re not a real developer, unless… February 18, 2019

Categories

  • Reviews 8
  • Tutorials 12
  • Updates 18