DEV3 Technologies home

DEV3 Saffronly – Recipe & Food Blog WordPress Theme for Elementor & WooCommerce

A warm editorial WordPress theme for recipe and food blogs: an overhead food slideshow with a floating recipe card, recipes with a servings scaler, tick-off ingredients, step photos, print view and Recipe schema, cook-time filters, collections and a cookbook shop.
by DEV3 TechnologiesVerified Author(0) 0 sales 0 viewsUpdated 07 Nov 2026

Launch Offer: up to 50% off

This item is 50% off: $24.50 instead of $49

Ends in
--
Days
--
Hrs
--
Min
--
Sec

DEV3 Saffronly is a WordPress theme for recipe blogs, home cooks, food writers and small food brands. It is warm and editorial: Gloock display headlines with Rethink Sans text, cream paper, paprika and saffron accents, herb-green details and round plate-shaped photos. Motion is light (reveals, staggered grids, a slow slideshow drift) and respects reduced motion. There is no 3D or WebGL in the theme at all.

Buy a licence to download it. There is no public live demo: watch the video tour at the top of this page, or step through the screenshots at desktop, tablet and phone sizes.

A recipe card readers actually use

  • Servings scaler: plus and minus buttons scale every numeric amount and show fractions the way cooks write them (½ ¼ ¾ ⅓ ⅔ ⅛).
  • Tick-off ingredients: tick what is already in the cupboard; the ticks and servings are remembered per recipe in the visitor's browser.
  • Method with step photos, notes and swaps, and a nutrition table with an editable disclaimer.
  • Print recipe: a print view that keeps only the card, with the page address at the bottom.
  • Jump to recipe in the hero, for readers who skip the story.
  • Server-rendered HTML, so the card works without JavaScript; keyboard and screen-reader friendly.

Recipe schema and filters

  • A schema.org Recipe node for every recipe: times in ISO 8601, yield, category, cuisine, diet keywords, ingredients, method as HowToStep items, nutrition and author. Rating data appears only when approved reader ratings exist.
  • A recipe index with filters for course, cuisine, diet and cook time (under 15, 30 or 60 minutes) on a plain GET form, so filtered pages can be linked and shared.

A photo hero that makes you hungry

  • The toolkit's Photo Hero widget: a full-screen overhead food slideshow with a slow drift, a headline with an accent word, two buttons and a floating recipe-of-the-week card.
  • Inner pages use the same widget at medium height; recipe, course and collection pages have their own warm heroes.

Collections, journal and shop

  • Collections: hand-picked, ordered lists of recipes for seasons and occasions, with their own photo and introduction.
  • A journal for posts that are not recipes, a cook profile card, a most-popular list, a newsletter sign-up and a photo grid.
  • WooCommerce styling for cookbooks and meal-plan printables as downloadable products, with a slide-out mini cart.

Built for editing

Every demo page is built in Elementor (the free version works) with the DEV3 Theme Toolkit widgets, and 30 block patterns cover the same sections for the block editor. Colours and fonts come from one token file and sync to the Customizer, theme.json and the Elementor kit. Fonts are self-hosted. The demo photos are free-licence stock photos listed in PHOTO-CREDITS.md; the blog, the cook, ratings and nutrition figures are fictional sample content.

#recipe#food-blog#cooking#recipe-schema#servings-scaler#photo-hero#elementor#woocommerce#wordpress-theme

How it's built

Architecture, stack, key decisions and the quality gates DEV3 Saffronly passed before release.

Our own WordPress theme for recipe blogs: an overhead food slideshow, a recipe card with a servings scaler, tick-off ingredients, step photos and print view, Recipe JSON-LD, cook-time filters and a cookbook shop, built on a no-3D theme core.

The problem it solves

A recipe blog is used with flour on your hands. Readers want to scale a recipe, tick off what they have, print it without the life story and trust that the page tells Google what a recipe is. Most recipe themes bolt that on with a plugin and a shortcode, which breaks when the plugin changes. Saffronly had to make the recipe card part of the theme: server-rendered, usable without JavaScript, accessible, printable and structured for search, while keeping the pages editable in Elementor and free of 3D or WebGL.

Architecture and approach

Saffronly is a classic PHP theme with theme.json on DEV3's shared theme core in flat mode. The DEV3 Theme Toolkit's menu type is relabelled Recipe with its own fields: times, servings, cuisine, diet tags, ingredients, method, notes and nutrition. The recipe card is rendered on the server; a small lazy script adds the servings scaler (which parses amounts such as 1 1/2 and shows fractions), ticking ingredients stored in the browser and the Print recipe button, with a print stylesheet that keeps only the card.

The Recipe schema.org node is built through the toolkit's JSON-LD filter, with ISO 8601 times, HowToStep instructions and nutrition; aggregateRating is added only from approved reader ratings. The recipe index filters on course, cuisine, diet and a cook-time range with a normal GET form and pre_get_posts. The hero is the toolkit's Photo Hero with a floating recipe card; the demo uses free-licence photos with a credits file.

Quality gates and results

Saffronly ships with a one-click demo: 3 Elementor pages, 18 recipes in 5 courses, 4 collections, 6 journal posts, 3 downloadable cookbooks and 30 block patterns.

It passes PHP lint, WordPress coding standards (0 errors, 0 warnings), Theme Check with no required issues, the WooCommerce checkout flow, an Elementor editor test and its no-3D gate; the always-loaded JavaScript is about 12 KB gzipped.

Tech stack

Area Technologies
Frontend DEV3 Motion, Photo Hero, Lenis, Elementor widgets, Block patterns
Platform WordPress 6.0+, PHP 7.4+, WooCommerce, Contact Form 7, DEV3 Theme Toolkit
Search Recipe schema.org JSON-LD, HowToStep, Open Graph

Inside the build

Photo hero slideshow: a full-screen overhead food slideshow with a slow drift, a headline with an accent word, two buttons and a floating recipe-of-the-week card. Photo hero slideshow — a full-screen overhead food slideshow with a slow drift, a headline with an accent word, two buttons and a floating recipe-of-the-week card.

Cook-time chips: Under 15, 30 or 60 minutes link straight to the filtered recipe index, so a hungry visitor finds dinner in one tap. Cook-time chips — Under 15, 30 or 60 minutes link straight to the filtered recipe index, so a hungry visitor finds dinner in one tap.

Guides & articles

Practical guides and engineering write-ups for DEV3 Saffronly.

A recipe blog WordPress theme: servings scaler and Recipe schema with Saffronly

Last updated
A recipe blog WordPress theme: servings scaler and Recipe schema with Saffronly: DEV3 Saffronly

A recipe blog is used in a kitchen: phone propped against the flour, hands busy, a pan getting hot. The page has to scale a recipe, let you tick off what you already have, print without the life story and tell Google what a recipe is. DEV3 Saffronly is a WordPress theme built around exactly that, with every page editable in Elementor.

The Saffronly home page: a full-screen overhead food slideshow with the headline

Video tour of the Saffronly demo: the food slideshow, the recipe card, filters, collections and the cookbook shop

Who Saffronly is for

  • Recipe bloggers and home cooks who want a calm, warm design that puts the food first.
  • Food writers and small food brands that publish recipes and sell cookbooks or printables.
  • Agencies and freelancers building a food site the client will keep editing.

A recipe card that does the work

The card is plain server-rendered HTML, so it works without JavaScript. With JavaScript it adds a servings scaler that scales every numeric amount and shows fractions the way cooks write them (½ ¼ ¾), ingredients you can tick off (remembered in the visitor's own browser) and a Print recipe button that prints only the card.

A Saffronly recipe card with times, a servings scaler, tick-off ingredients and a numbered method

Each recipe stores its times, servings, cuisine, diet tags, ingredients, method with optional step photos, notes and nutrition as fields, so every recipe page is laid out the same way and stays easy to write.

The method section with numbered steps and a step photo

Found by readers and by search

The theme prints a schema.org Recipe node for every recipe: times in ISO 8601, yield, category, cuisine, diet keywords, ingredients, method as step items, nutrition and author. Rating data appears only when approved reader ratings exist, never from a number you typed on the card.

Dinner in the time you have

The recipe index filters by course, cuisine, diet and cook time (under 15, 30 or 60 minutes). It is a plain GET form, so a filtered page such as /recipes/?time=30 can be linked from a button, a newsletter or a pin.

The recipes archive filtered to 30 minutes or less

Collections, a journal and a cookbook shop

Collections are hand-picked, ordered lists of recipes for a season or an occasion. A separate journal holds the posts that are not recipes, and WooCommerce styling covers cookbooks and meal-plan printables with a slide-out cart.

A collection page with its recipes

Set it up in an afternoon

  1. Install the theme and the DEV3 Theme Toolkit, then import the demo from Appearance → DEV3 Demo.
  2. Replace the photos and edit the hero slides in the Photo Hero widget.
  3. Delete the demo recipes, add your own and set your cook name under Appearance → Customize → Saffronly: kitchen details.

Saffronly in the Elementor editor with the Photo Hero widget selected

Get Saffronly on the DEV3 Marketplace with a regular or extended licence.

Frequently asked questions

The complete source code (version 1.0.0) as a download from your account, with the setup and usage guides shown on this page. You can modify the code to suit your product.

Buying guides: 3D and motion WordPress themes for Elementor and WooCommerce

Questions about this product (6)

Answers from the DEV3 team and the community.

Ask a question
View all 6 questions

More from this author

View all

Related in CMS Extensions

View all