Building a Fast, Free WordPress Restaurant Theme — Lessons Learned

Restaurant websites look simple on the surface — a menu, some photos, a reservation button — but they come with a surprisingly tricky set of constraints: heavy image galleries, mobile-first ordering flows, and owners who need to update content themselves without touching code.

I recently built Dinecraft, a free WordPress theme aimed at restaurants, and wanted to share a few technical decisions that made the biggest difference — plus a couple of mistakes I’d avoid next time.

1. Menus are content, not just markup

Most restaurant theme demos hardcode the menu into the template. That looks great in a screenshot but breaks the moment a real owner needs to swap out a seasonal dish.

Instead, I structured menu items as a custom post type with taxonomies for category (starters, mains, desserts) and dietary tags (vegan, gluten-free). This meant:

Owners can add/edit dishes from the standard WP admin, no page builder needed
Menu items are filterable on the front end with a small vanilla JS filter (no jQuery dependency)
The same content structure can be queried for a “today’s specials” widget later
php

register_post_type('menu_item', [
    'public' => true,
    'has_archive' => true,
    'supports' => ['title', 'editor', 'thumbnail'],
    'taxonomies' => ['menu_category', 'dietary_tag'],
]);

Enter fullscreen mode Exit fullscreen mode

1. Image weight was the biggest performance lever

Restaurant sites live and die by food photography, which means large images are non-negotiable — but they’re also the easiest way to tank your Core Web Vitals.

What actually moved the needle:

Serving WebP with a JPEG fallback via
Lazy-loading everything below the fold with native loading=”lazy”
Capping hero images at 1920px and letting srcset handle the rest

This alone took the homepage from a ~4.2s LCP down to under 1.8s on a throttled 4G test.

1. Reservation forms shouldn’t require a plugin bloat

A lot of restaurant themes bundle a heavy booking plugin by default. I wanted Dinecraft to work with popular reservation plugins (OpenTable embeds, Calendly, etc.) without requiring one, so the base theme ships with a lightweight contact-form fallback and clearly marked template hooks for anyone who wants to drop in their own booking widget.

php
do_action('dinecraft_before_reservation_form');

Enter fullscreen mode Exit fullscreen mode

This kept the core theme lighter and gave more flexibility than baking in a single vendor’s plugin.

1. Mobile-first, not mobile-adapted

About 70% of restaurant site traffic is mobile — usually someone standing outside deciding whether to walk in. I built the layout mobile-first in CSS rather than adapting a desktop layout down, which avoided the usual pitfalls of oversized tap targets and hidden nav items on small screens.

What I’d do differently
I underestimated how many owners would want a dark mode toggle for evening ambiance branding — adding that after the fact meant retrofitting CSS variables I should have set up from day one.
I’d build the menu filter with IntersectionObserver from the start instead of a scroll-based check I later had to replace.
Try it / feedback welcome

The theme is free and open for anyone to use or fork: Dinecraft — Free Restaurant WordPress Theme.

If you’ve built something similar, I’d love to hear how you handled menu content structuring or image optimization — always curious how other devs solved the same problems differently.