dothiscookingthing.de – Relaunch of the cooking blog for my wife

[Markus Thomas]

Hi everyone,

a while back, I introduced the food blog I built for my wife here on the forums (original post).

As the site has grown continuously over the years, it was time for a comprehensive relaunch: a fresh responsive look, streamlined editorial workflows, and a modern technical architecture under the hood – 100% bespoke, without any page builder compromises. The new version is now live at dothiscookingthing.de.

Here is a quick look behind the scenes and the tech stack we used:

1. Backend & CMS Architecture

On the backend side, ProcessWire shines as the flexible, tailor-made CMF we all love:

• Custom Page Classes (usePageClasses = true😞

  Instead of packing business logic into template files, we use dedicated Custom Page Classes (e.g. RecipeItemPage, TagPage, etc.). This keeps the codebase modular and maintainable – perfect for generating structured data automatically (Schema.org JSON-LD for recipes, including prep/cook times and nutrition facts).

• Functions API (useFunctionsAPI = true😞

  Keeps the template and component code concise, readable, and clean.

• Custom Content Architecture with Repeater Matrix:

  The homepage and other content pages utilize Repeater Matrix to manage sections flexibly while adhering to a strict, structured layout. Every block (hero banners, dynamic feeds for popular or hidden-gem recipes, ingredient showcases, action teasers, etc.) has its own dedicated PHP render template, meticulously aligned with our typography and design system.

2. Frontend, Interactivity & User Experience

For the frontend, our primary focus was on blazing-fast performance, accessibility, and thoughtful micro-interactions:

• Tailwind CSS v4:

  Built with the new Tailwind v4 CLI, using custom design tokens via @theme (bold typography with Jost for headlines and Inter for ingredients and body copy).

• Reactive Features with Alpine.js:

  • Dynamic Serving Calculator: Visitors can scale ingredient quantities up or down depending on the desired number of servings directly on recipe pages.

  • Bookmark / Favorites Feature: Users can save recipes for later. Clicking the bookmark trigger sets off a subtle animation on the bookmarks icon in the main navigation, giving immediate visual feedback.

  • Custom Dialog & Toast Containers: No native browser alert/confirm dialogues; everything uses unobtrusive, custom UI notifications styled to match the site.

• HTMX for Asynchronous Interactions:

  Used selectively where dynamic updates make sense without loading a heavy JavaScript framework – for instance, driving the live search.

• Locomotive Scroll:

  Provides a smooth, contemporary scrolling experience across the entire site.

• PWA & Offline Support:

  A lightweight service worker handles caching and ensures dependable performance, especially on mobile devices right in the kitchen.

3. Editorial Experience

Making day-to-day content creation seamless for my wife was a top priority:

• Clean, structured separation of ingredients, preparation steps, nutritional values, and metadata in ProcessWire fields.

• Deep cross-linking: Alongside traditional categories and tags, we built an ingredients glossary (Zutaten-Lexikon) that automatically connects related recipes.

• A customized admin theme tailored to keep adding and editing recipes fast, clean, and intuitive.

Conclusion & Feedback

ProcessWire has once again proven how future-proof and adaptable it is: Content structures that evolved over years were seamlessly migrated into modern classes and templates without having to rebuild everything from scratch.

Feel free to check it out: dothiscookingthing.de

We’d love to hear your thoughts, feedback, or any questions about the technical implementation!

[Peter Knight]

schnitzel with creamy mushroom sauce 🤤 

But seriously, very nice work.

I like:
-  how you can approach it from either a recipe or ingredient path
- The portions widget which updates the ingredients is really nice touch
- all the info I need is cleanly laid out

 

[ottogal]

Really outstanding cooking site!

One tiny irritation I found with the Locomotive Scroll: Visiting e.g. the page /zutaten/ananas/ , when you start to scroll down, the aside elements would not scroll with the article first. In case of a long article, the asides don't scroll unless you approach the end of the article.
To a user trying to read the aside content first, it seams not scrollable.