Brioche - Recipe Diet Labels

The Brioche theme includes the Brioche Recipe Tools plugin, which makes it easy to create reusable dietary labels (such as Gluten Free, Vegan, Dairy Free... whatever you need!) for your recipes and blog posts. Your diet labels can be displayed automatically throughout the theme, along with an optional Diet Label Key to help visitors understand what each label means.

Install the Plugin

The Brioche Recipe Tools plugin is included with your Brioche theme and can be installed directly from your WordPress Dashboard. No need to download it separately!

After activating the Brioche theme, you'll see a notice at the top of your WordPress Dashboard prompting you to install the recommended plugins.
Click Begin installing plugins.
Select both plugins, choose Install from the Bulk Actions dropdown, and click Apply.
Once installed, select both plugins again, choose Activate, and click Apply.

After activation, you'll find Diet Labels under Posts > Diet Labels in your WordPress Dashboard. You're ready to start creating your labels!

Create Diet Labels

1. Go to Posts > Diet Labels.

2. From here, you can create as many diet labels as you'd like.

For each label, configure:

Name – The full label name (e.g. Gluten Free)
Abbreviation – The text displayed inside the circle (e.g. GF)
Background Color – The circle color
Text Color – The abbreviation color

After saving, your new label will be available throughout your website.

Choosing Icon Colors

Each diet label has two color settings:

Circle Color: The background color of the diet label circle
Text Color: The color of the text inside the circle

Both colors are set using hex color codes, which are six-character codes that always begin with a #. For example, #ACB5A4 is a soft sage green.

Enter the hex code for your desired color into each field. If you're matching your website's branding, you can usually copy the hex codes directly from your Global Palette or your brand style guide.

For the Text Color, we generally recommend using either:

White text: #FFFFFF
Black text: #000000, #222222, or #333333

Choose whichever provides the best contrast against your selected Circle Color.

Note: The Brioche demo displays diet labels in all one color (beige background with black text), but many food blogs like to add different colors for each label to differentiate. Totally up to you!

Assigning Diet Labels to a Post

1. Open any post in the Block Editor, or go to Posts > Quick Edit.

2. Locate the Diet Labels panel.

3. Place a checkmark by the labels you'd like to assign to the post, then update or publish your post. A post can have one, multiple, or no diet labels.

Diet Label Display Settings

The Brioche theme automatically displays Diet Labels in posts throughout your site, so there's no additional setup required! You can also customize where labels appear and how they look.

To adjust these settings, go to Appearance > Customize > Brioche Theme Settings and open the Diet Labels panel.

Display on Single Posts: Show or hide Diet Labels on individual recipe posts
Single Post Label Style: Choose between two styles for Diet Labels on single posts:

Use Default Label Colors: Display labels using their individually assigned colors
Use All White Labels: Display all labels with a white background for a more uniform look (this setting is enabled in the demo)

Display on Archive Pages: Show or hide Diet Labels on your blog page, category archives, search results, and custom taxonomy archives
Display in Kadence Posts Blocks: Show or hide Diet Labels in Kadence Posts blocks throughout your site

Hiding Diet Labels on Individual Posts Blocks

If you'd like to hide Diet Labels on a particular Kadence Posts block without disabling them sitewide, you can do that too!

Select the Kadence Posts block you'd like to modify.
In the block settings sidebar, open the the Advanced section.
Find the Additional CSS Classes field and enter no-diet-labels.
Save or update your page.

Diet Labels will no longer appear in that specific block, but will continue displaying everywhere else you've enabled them.

Diet Label Archive Pages

Diet Labels work similarly to WordPress categories. Each label has its own archive page that automatically displays all posts assigned to that label.

For example, if you create a Gluten Free diet label, WordPress will automatically generate a page that displays all of your gluten free recipes. Click here for an example in the demo. As you assign diet labels to your posts, their archive pages will automatically update to include the matching recipes.

Adding an Archive Description

You can add a description to each diet label, just like you would with a regular category. This description can be displayed at the top of the archive page to introduce the recipes in that collection.

To add or edit a description:

Go to Posts > Diet Labels.
Click Edit under the label you'd like to update.
Enter your text in the Description field.
Click Update to save your changes.

Customizing the Browse Menu

By default, Diet Label archive pages display a Browse menu that allows visitors to explore other diets.

You can customize the "Browse" text or disable the menu entirely in the WordPress Customizer.

Go to Appearance > Customize > Brioche Theme Settings > Archive Settings.
To change the menu heading, enter your preferred text in the Browse Menu Text field.
To hide the menu entirely, disable the Enable Browse Menu on Taxonomies setting.
Click Publish to save your changes.

Display a Diet Label Key

The Diet Label Key block displays a legend explaining what each diet label means. It's perfect for recipe index pages or anywhere else you'd like visitors to understand your dietary icons.

To add a Diet Label Key, edit any page or post, click the + button, and search for Diet Label Key.

Key Layouts

The Diet Label Key includes three layout options. View them in the demo here.

Inline: Displays a compact horizontal list, with a small diet circle followed by the label name.
Grid: Displays labels in a multi-column grid, making it a great choice for recipe indexes or pages containing many diet labels.
Stacked: Displays larger circles with the label underneath each icon. This layout works well when you'd like the Diet Label Key to stand out a bit more!

Label Settings

Displaying Specific Labels:

By default, the Diet Label Key displays every available diet label. To display only certain labels, disable Display All Labels, then select the labels you'd like to include. You can drag and drop them into any order.

Showing or Hiding Empty Labels:

By default, the Diet Label Key only displays labels currently assigned to at least one post.

To display every label, even if it hasn't been assigned to a post yet, disable Hide Empty Labels in the block settings.

Linking Labels:

Enable Link Labels to make each diet label link to its Diet Label archive page, allowing visitors to browse recipes matching that dietary preference.

Customizing the Layout & Appearance

The Diet Label Key block includes a variety of customization settings, including:

Inline, Grid, or Stacked layouts
Grid and stacked column settings
Circle size
Circle colors
Label text size and color
Spacing between circles and labels
Spacing between individual items

To edit these settings, just click on the Diet Label Key block and look to the settings panel on the right.

There are also several pre-designed Diet Label Key blocks available in the Brioche Block Collection! Just search Diet Label Key and they'll come right up.

Best Practices & FAQ

Abbreviations: Keep abbreviations short (typically one to two letters).
Label colors: Use either all one color, or use colors that are easy to distinguish from one another. The Brioche theme uses all one color to keep things minimal, but multiple different colors would be fun too!
Diet Label Key: Display your Diet Label Key on your homepage or recipe index to educate readers on your diet labels.

Frequently Asked Questions

Can I assign multiple diet labels to a post?

Yes! You can check as many labels as you'd like in the Diet Labels panel.

Can I change a diet label later?

Absolutely. Editing a diet label automatically updates it everywhere it's used. You can manage all labels at Posts > Diet Labels.

Can I reorder labels in the Diet Label Key?

Yes! In the Diet Label Key block settings, turn off Display All Labels, then drag and drop your selected labels into the order you'd like them displayed.

What happens if I switch themes?

Your Diet Labels and their assignments remain safely stored in WordPress. Automatic front-end display is only available in the Brioche theme, but rest assured your data will not be lost!