Website Adviser is the very website you are looking at. And whilst it may seem strange to include it in a portfolio, I have some good reasons!
Website adviser is the first website I have built using ACF and Tailwind, so at the time of writing I have no other projects to display with this set of tech, and I am rather proud of it!
The site runs a very minimal set of plugins:
- Advanced Custom Fields
- Fluent Forms
- SEOPress
- LiteSpeed
That is all!
Everything else has been coded by hand, the blog feeds, the filtering and everything in between.
No page builders, just ACF blocks with a near perfect view on both back and front. I will be releasing a video on this later in a blog post to show you how it works.
Making the switch from GeneratePress to custom build
To be honest, there wasn’t much wrong with GeneratePress but like all builders, you are locked into a particular way of working. I watched some tutorials and found that learning things like hooks and trying to understand how things fit together just wasn’t for me.
I started with WordPress building classic themes so when page builders came along I discovered that the way I used to build sites changed dramatically. I found myself fighting against opinionated systems, using important tags all over the place just to squish a design into a builder.
Long story short, I was no longer developing, and I wasn’t happy about that!
Tailwind
When tailwind came around, I found it hard to grasp and there was no way on earth that I could imagine using it with WordPress, it didn’t make sense to use Tailwind with WordPress. It is better used when elements are contained. For example creating a block like a call to action then using it in different parts of a website. So I dismissed it for a long time, all the while messing about with page builders which of course Tailwind wasn’t suited to.
I actually built this site in the same design in Astro, that was a fun experience. As soon as Astro released an update a breaking change broke the build and I couldn’t find a way to recover it, I don’t have that skill yet!
Gutenberg and ACF
So I then went down a path of trying to figure out how to use Gutenberg blocks. I don’t know react yet, it’s not quite on my radar. So I tried to learn Pinegrow, which is basically a theme building software which you can use to build WordPress websites with Tailwind.
Long story short: Fail! I wasted over a month trying to build blocks with Pinegrow, I wasn’t happy and my boss wasn’t happy!
Then I discovered ACF blocks and it was like a lightbulb moment.. aha!
It all comes together. Tailwind CSS and ACF blocks get me 100% to my goal. No extra divs, super light code and only the fields you need to get the job done.
Because you are only building the blocks you need, it means that for client sites they only seen what they need to see, not a field of options that literally means "screw up your website now!"
Conclusion
The site is here on my portfolio because it’s my first using ACF and tailwind and I am rather proud of it. There are things that I need to fix, add some animations, adjust some fonts on mobile but it works. It loads quicker than I could have wanted and is a fantastic case study for what is possible with WordPress, Tailwind and ACF Blocks!
I have a few things to take care of before I reach that total 100% score on PSI, but I think you will agree for a first run its loading very quickly!
When I originally built this site in Astro, I had a perfect score. Here it is "ok" With around 87 on mobile and 99 on Desktop.
I have a few things to fix. I will probably go on and build my own custom JavaScript menu, that will remove the dependency on jQuery which smart menus is built on!
All geeky stuff but every little counts!