A couple of weeks ago I officially launched the Periodic Table of WordPress Plugins. The website, plugintable.com, showcases the most popular plugins in a unique way. Its accompanied by a small e-commerce store where one can buy the whole thing as a poster. In my previous post I already hinted at how it works, but today I want to provide more details.
So, how did I build plugintable.com, and why did I not use WooCommerce?
The Backend
Let’s look at the main website first. Behind the scenes there is a PHP CLI script that powers it all. It uses Rarst’s WPOrg Client library to fetch the most popular plugins from WordPress.org. After that it makes names and descriptions more readable and does an initial sort.
Here’s also where I add the “element” symbols for every plugin. This requires a ton of manual overrides, because developers like adding tons of buzzwords to their plugin names (for SEO?). However, that decreases readability on a project like this. Plus, space on each “card” on the plugin table is limited, so sometimes I need to shorten the names.
The Frontend
On the frontend, I wanted to keep things simple as well. It is mostly static HTML, sprinkled with some PHP to loop over all the plugins and assembling their markup. The layout itself then uses CSS grid and custom properties to make styles as reusable as possible.
I added JavaScript only where necessary, for example to make the tooltips work when clicking on an individual plugin. The tooltip animations are actually the result of using the View Transitions API.
The responsive design probably took the most time to get right. Given the nature of the project, it really works best on a desktop screen. However, I still wanted to make it as good as possible on mobile. Due to limited space, I initially hide some information and make the tooltips fill the whole screen when opened. This actually requires a bit of a JS / CSS hack to prevent scrolling.
In general, I wanted to make the site as fast as possible, which meant cutting back on adding unnecessary features. All CSS is minified and inlined and the fonts are self-hosted and size-adjusted to prevent layout shifts.
A lot of these optimizations would have been easier with a JavaScript stack. A lot of the frontend tooling is written in JS after all. With a JS-powered site I also would not have any issues with excessive DOM size. Because then I would update the DOM on the fly and not construct everything beforehand in PHP. However, for such a simple site I did not want to build everything with a SSR-powered React framework or something. Keep it simple, stupid.
In the end I managed to get good performance grades regardless, which is what ultimately counts.
The Poster
Once I had the website itself more or less finalized, it was time to think about the poster version. Printing the Periodic Table of WordPress Plugins on a poster to hang it on my wall has been a dream of mine for a long time.
Since I am not a graphic designer and proficient with InDesign or similar, I tried to build upon what I already had: HTML & CSS. Using some print-specific styles such as tweaked font sizes and @page at-rules, I was able to build a poster version in no time. Now I just needed to print it!
It was clear to me from the beginning that I want to build this not only for myself, but also for others around to world. That’s why I began researching print-on-demand providers, where I can print this only when needed without having to turn my apartment into storage space for paper.
There are tons of them out there, all with different features, quality, and prices. In the end, I chose Printful. I liked their quality, the sizes and options (wooden frames!). Plus, they handle everything for me—from printing, taxes, shipping.
Printful itself is not a shopping platform, so I still needed an online store to get these out of the door. Luckily, they have tons of integrations.
The Store
The requirements for the store were quite simple:
- I have this poster that I want for myself and maybe a few others out there.
- It’s basically only 1 product, so it doesn’t need to be a complex solution.
- It’s a very time-sensitive offer given the WordPress 20th anniversary. So I need something quickly, but it’s not super long-living.
- I don’t want to spend a lot of money on it.
As a WordPress person, of course I looked into WooCommerce. However, it’s clearly not the right tool for the job. I didn’t have time to set up a new a new WordPress site with WooCommerce, find a reasonable theme, maybe buy some extensions, wrangle with payments, and deal with all the legal aspects of selling things online.
So what else is out there?
Initially, I stumbled upon Lemon Squeezy, which looked really cool. Their pricing is simple (0$/month + 5% per transaction) and the brand really appealing. The one big downside was that third-party integrations with providers like Printful is pretty far down on their roadmap, so that was a dealbreaker for me.
Shopify was also on my list to explore as I used their developer platform once in the past. It’s not cheap (typically 39$/month), but they also have a starter plan at $5/month and a Printful integration.
When I briefly tried it, I was able to get up and running very quickly. The amount of things you can and should customize is a bit overwhelming, but in the end I managed to put together something usable—shop.plugintable.com was born.
The Experience
As I said at the beginning, it has been only a few weeks since I launched plugintable.com. It’s too early to draw conclusions, but it definitely has been an interesting experience so far.
Once the dust settles, however, I plan on writing another review post with some stats about the whole project. Until then, why not buy a poster? 😉 Remember, all proceeds will be donated back to the community!
Leave a Reply