While my old website design was still quite decent, it really struggled with flexibility. The more moving parts I tried to include, like a better call-to-action design for my products, a new design for tutorials, or just some performance improvements – almost all of this was kind of hacky due to the theme I was using at that time.
Table of Contents
Going All-In on Full-Site-Editing
It was also not block-based, which was kind of a problem if you have watched the last years of WordPress development and its focus on full-site editing. I decided to go all-in, used the FrostWP theme as a starting point, converted all of my pages, blog articles, tutorials, and more to blocks, and started learning the ins and outs of full site editing.
The first roadblock for me was learning all things full-site editing. What does that even mean? How does it work? I barely worked with React and Block Development besides a few little side projects, I made more for fun than profit.
Then I stumbled upon the course from Fränk Klein called Building Block Themes. I bought the course and started watching it during our three weeks vacation in mid-summer this year. It really dives deep into the topic, and it’s impressive how far you can go without even knowing how to code.
Instead of just watching the course, I used my own website as a practical project and converted it step by step to Full-Site-Editing. Once I learned about repeatable blocks, I added them. Once I learned about patterns, I added them, and so on.
Requirements for the new website
Despite not being flexible enough for my use case, I also had a huge list of things I wanted to improve for the next iteration of my website.
This was one of the most important things on my list. I completely rewrote the entire documentation for all of my products. I introduced overview pages and a categorization (plugins and topics) to better structure and manage new documentation articles on my website.
I also worked with Gina, who helps me in all things Content Marketing (Writing tutorials, spellchecking and copy improvements, and so much more).
Another thing I always wanted to implement was a dedicated changelog area on my website. As I now have a couple of pro-only products, the changelog from w.org wasn’t sufficient anymore. Now I have a clean overview page for each product that shows all changes in chronological order – great!
I really wanted to improve the landing pages for my products. I spend quite a lot of time here improving the copy, the overall structure, and more. I also took the time to create a little showcase video for each product and researched some popular customers to showcase them on the website.
I have used Gravity Forms for years, and I still recommend them. However, due to the complexity of my support form, it was no longer an option to use it for my website.
I needed a few things that were just too hard to implement with Gravity Forms, so I built my own little form to handle all of my edge cases. I wouldn’t recommend doing this on your own website, but for me, it was the right decision.
While this form looks quite simple, there is quite a lot going on here:
- conditional display for fields
- Algolia search integration
- integration Freemius license check
- Integration with Helpscout to automatically tag new submissions
And all of that has be done on the client side, as this website runs completely static and not as a usual WordPress website.
My old website was quite performant. I knew I wanted at least the same performance, if not better, with the relaunch. To my surprise, there wasn’t too much work involved in getting a decent result as Full Site Editing, and Gutenberg is generally quite performant already. Not bad!
Despite being a static website, the only plugin involved here was PerfMatters, which I highly recommend.
This process took more time than I initially thought, but that was mostly because I had never worked with Full-Site-Editing before, and there was quite a lot of content restructuring and SEO stuff that needed my attention to make sure all redirects were working, the URL structure is optimized, and the page speed is decent.