Getting a Little Granular Here…

This blog post is for folks who want to know a little bit more about the technologies that I use to build websites. Mostly when I start talking about website technology people start to glass over in their eyes but I figure that there might be people out there who might want to learn more about what I use to build websites.

How I Got Here

Before we can dig into what I use, it’s worth tracing how I got to the tools that I use. Website design started for me as an answer to a problem: I need to build a website. I was self-publishing a couple of novels and knew that I needed a website for folks to learn more about those books and me. This was 2010, I was working at Borders, and on the racks was a magazine about WordPress. Looking into the magazine, I saw that this was something that I, being a techy guy, could handle. Once I built my website, someone in my family said, “Hey, I need a website too. Can you build one for me?” Sure.

The rest they say is history.

WordPress has always been the platform that I’ve built websites on. Beyond the sheer fact that it powers 43% of all websites (as of Jan 2023), it’s a platform that is constantly evolving. Just like the platform, how I use it now vs how I started back then has evolved also.

What Exactly is WordPress?

WordPress is a Content Management System (or a CMS for you folks that like your alphabet soup). A CMS is a platform that allows you to publish content on the Internet, have multiple people be able to create and access that content, and structure it in a way that makes sense to the authors. Think of it as software for making websites. WordPress comes with almost all of the tools built in to be able to get a website up and running, create content for it, and manage that content. Starting off as a blogging platform (you remember blogs, right?), it’s become a tool that you can create any kind of website. With a massive ecosystem of plugins and tools that work with WordPress, there’s not a whole lot you can’t do with it.

My WordPress History

As I said, I started building websites with WordPress back in 2010. WordPress, back then, was very much a blogging platform with the text editor for pages and posts being a place where you could write out text but nothing more. You needed to find a theme for your website that had the functionality built into the theme to create a homepage or other custom pages. That functionality mostly was accomplished in the form of widgets, shortcodes, or subpages to make content show up on the custom pages.

As my PHP skills grew, I began developing custom page templates and using plugins like Advanced Custom Fields to provide meta fields so that content could be changed on pages. Of course, the code base was always changing so a custom theme that I created could easily break after six months and I would be scrambling to find a solution. I also worked with page builders like Layers and Elementor (who, interestingly, bought Layers) and frameworks like Genesis (I built a lot of websites with Genesis).

The Press in WordPress

In late 2018, WordPress changed everything when they rolled out the first version of Gutenberg, their new block-based text editor. Over the next couple of years, the editor would grow, more blocks from WordPress and other third-party vendors would appear, and the weakest part of WordPress, the text editor, would become its strongest part. What I didn’t realize at the time was that the block was structured like a React component.

Throughout 2019, it was hard to tell if changing to Gutenberg was a good thing. But as more developers added really awesome block plugins like Advanced Gutenberg, Kadence Blocks, Stackable, and others, this text editor system became robust enough to not just dip your feet but dive right in. I began changing the content to block-based in all the websites that I had already built and it became my foundation for future ones. With these blocks, I was able to build custom pages that looked great and didn’t need any extra coding to show.

Headless WordPress

About the same time that I was fully embracing Gutenberg, I started hearing about this thing called “Headless WordPress”. I remember the first time I heard about it was at a WordPress meetup where a developer was talking about a platform that he’d built for his company that allowed analysts to create content in WordPress that would show up on an intranet website that was WordPress. How the hell did they do that, I’d thought. I’d later learn that it was the REST API that WordPress had recently added that made all of this start to happen.

Headless WordPress is using WordPress to create content but not to show it. In other words, you take advantage of all the strengths of WordPress in content creation, user management, custom post types, and the plugin ecosystem to allow users to create content. That’s the back-end. For the front-end (what the user sees), a developer uses another technology like React, Vue.js, Svelte, and Angular (all front-end JavaScript frameworks) to build the website. Then they might pull the data via the REST API or GraphQL and integrate it into the website.

This way you get the best of both worlds: a robust content-creation system on the back-end and a lightning-fast, mobile-first framework for the front-end.

A Hybrid Approach

In 2021, I found an article about using Gatsby (a React-based platform) to build Headless WordPress websites. To say that I was excited about this idea was kind of an understatement. I felt that this allowed me to build a website from scratch but still keep WordPress a part of it. I followed the instructions and built my first couple of test websites using React and WordPress. The website you’re reading this post on was my first production-ready website using this hybrid approach. Since then, I’ve built a couple more. You can see them by going to this tag on my website: react

With two different ways to build a website at my fingertips, I don’t build every website the same. It really depends on what the client is trying to do. That’s a decision that I come to as I meet with my clients and build an understanding of their goals and sources for content.

For some websites, it still makes sense to build them the traditional WordPress way. I currently use GeneratePress as my theme platform and build WordPress websites with a combination of GenerateBlocks, Kadence Blocks, and other tools like CPT UI, Gravity Forms, Advanced Custom Fields, and more.

For other websites, this hybrid approach works better. If the website might involve web application elements like a client area or if there are multiple APIs that I can tap into to source information, I will build the website as a hybrid.

I am currently exploring other frameworks beyond Gatsby like Vue.js, Nuxt, and I’m eyeing this one that WP Engine created called Faust.js. I want to have a repertoire of front-end frameworks that I can choose from.

In the end, my skills as a web developer have evolved as web technology has. This has provided a great combination of tools for my clients but also kept me engaged and excited about building websites as I was way back in 2010 when I picked up a magazine about WordPress. Will have to see what the next 13 years bring…

What’s Next

I’m working on some one-shot blog posts over the next couple of weeks. I plan to write about ADA compliance and how that relates to website design. Also, I’m going to dig into hiring a web developer to build your website vs building it yourself.

If any of this intrigues you and you want to hear more about how this connects to your business, you can drop me a line through my contact form or you can set up a time to talk to me: https://cwtwebsites.zohobookings.com/#/customer/4321453000000026017