I replaced WordPress with Kirby

For a couple of months now my photo blog has been running on Kirby.

Kirby is a file based CMS, that I always wanted to try, but never had gotten around to. Its concept really resonated with me, whenever I read about it or started to play around with it.

I will share some observations I made during the implementation of my first real life project using Kirby, in which I re-built my photo blog, which was previously running on a completely custom built WordPress theme.

FWIW, at Haptiq, we create websites and online shops almost exclusively using WordPress. We rely on some plugins, but usually write custom code/plugins with custom functionality for our clients. Very rarely do we use existing themes, but create them starting from scratch, using our internal starter theme. This is obviously shaping my view on Kirby.

Let’s dive in:

Templating

I love that Kirby is very unopinionated about the way templates are built. When using their “Plainkit” there is no default theme or styling. There is literally just the page title in the single default.php template file:

<h1><?= $page->title() ?></h1>

This also means that there isn’t any CSS or JS enqueued by default. This feels incredibly refreshing to me, as I spend more and more time optimizing (as in dequeuing) stylesheets and scripts, that I don’t want or need in my WordPress projects or disabling functionality that our clients don’t want or need, eg. oEmbeds, Emojis or RSS feeds, just to name a few. (This has also gotten much worse with the introduction of Gutenberg.)

On the other hand that also means that you have to build everything yourself. From the markup to most of the logic and even routing. In my case, I needed to add a tag archive and an RSS feed. Both were fairly easy to set up, but I was still surprised having to built it myself – again, coming from WordPress, where this stuff is already taken care of.

This is how I defined my custom ‘collection’ route, using a virtual page:

'routes' => [
    [
    'pattern' => 'collection/(:any)',
    'action'  => function($collection) {
        return new Page([
            'slug' => 'collection',
            'template' => 'collection',
            'content' => [
                'collection' => $collection,
            ]
        ]);
    }
],

The rest is handled in my “collection” template file.

I am sure there are Kirby plugins out there, which can easily add most of that functionality, but I intentionally wanted to build it myself to learn more about how Kirby works.

It might be more work compared to WordPress, but I just love, that I have complete control over the code that is put out.

Working with Photographs

I love how Kirby handles images. Where WordPress generates thumbnails (various, smaller sizes of an image) during upload, which – depending on what you are doing – can take forever, and on bad hosting even crash the uploader, Kirby generates image sizes asynchronously. It is also incredibly easy to generate smaller files (or source sets for that matter) right from a template, where the image is displayed. For example, this is how the srcset value looks for my images:

<img srcset="<?= $image->srcset([2000,1000,640,500]) ?>" ... />

Pretty straight forward.

Another great feature, when creating a photography based website, is reading exif information directly from the image files. No more fetching from the database, like I am used to from WordPress, as Kirby makes it so very easy. Here is an example for getting the camera model:

$image->exif()->camera()->model();

File Based

Speaking of database – or the lack thereof: Kirby is completely file based. All of the content is stored in folders and plain text files. That makes it very human readable and also very clean – especially when it comes to images (or media in general). In WordPress you basically just dump everything into the media library with no possibility to sort or group files (at least not without a plugin). In Kirby a page folder also contains the images, that belong to that page. (Though there are ways to add files that are available globally.)

What I like most about Kirby’s file based approach is, that you can just look at the folder structure and browse through its contents on the file system, which already gets you a very good idea how the website is laid out, content-wise.

The Ecosystem

Quite obviously the whole ecosystem is not comparable. WordPress has become a behemoth and is the most used content management system on the planet, with thousands of themes and plugins and pretty much any problem is only a Google/Stackoverflow search away.

However it was quite easy to get going with Kirby. Its documentation is very good, there is the support forum and there are also a couple of great screencasts that will get you started.

The Rebuilding Process

It took me about a day to re-build my photo blog using Kirby.

I am sure there is lots to improve, but for only a couple of hours with no prior experience, I am quite happy with what I built. And it looks practically identical to the WordPress site it replaced and has exactly the same features – which was the goal. (I improved some of the UI elements, relying even less on JavaScript now.)

I also re-wrote the stylesheet in plain CSS (no pre/post processing) and uploaded everything to the server using Transmit. Deployment like a cave man, but it feels great. 😊

I also took some time to build an exporter, which saved my WordPress posts as static files into the nice orderly structure, that exactly fits how I configured Kirby to handle my posts. If you are interested, you can find the WordPress to Kirby exporter on Github. (Please note that it is very basic, just what I needed. It should be fairly easy to extend it for more complex exports, though.)

I love that I can have the complete website (with content) in version control, and I love even more that I can just use my text editor to write a post.

Conclusion

With everything I have done so far, I feel that Kirby is a very powerful tool, and I have only scratched the surface. (I haven’t even mentioned the highly customizable “panel”, which is Kirby’s version of wp-admin.)

While we will not stop using WordPress for our client work, I could definitely see myself using Kirby for more projects in the future.

Check out my photo blog, running on Kirby.