Brioche - Recipe Diet Labels

The Brioche theme includes the 17th Avenue Diet Labels plugin, making 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.

Creating Diet Labels

1. Navigate 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.

Displaying Diet Labels

The Brioche theme automatically displays diet labels in the appropriate locations throughout the theme, so no additional setup is required.

You can also manually display a post's assigned diet labels anywhere using the following shortcode:

[recipekit_diet_labels]

This shortcode displays only the labels assigned to the current post.

Displaying a Diet Label Key

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

Default (Inline)

[recipekit_diet_key]

Displays a compact horizontal list with a small diet circle followed by the label name.

Stacked Layout

[recipekit_diet_key layout="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.

Grid Layout

[recipekit_diet_key layout="grid"]

Displays labels in a simple two-column grid, making it a great choice for recipe indexes or pages containing many diet labels.

Displaying Specific Labels

By default, the Diet Label Key displays every available diet label.

To display only certain labels, use the labels attribute and enter the label slugs in the order you'd like them displayed.

Example:

[recipekit_diet_key labels="gluten-free,vegan,dairy-free"]

This shortcode will display only those three labels, in the order provided.

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, use:

[recipekit_diet_key hide_empty="false"]

Combining Shortcode Options

You can combine multiple shortcode attributes together.

For example:

[recipekit_diet_key layout="stacked" labels="gluten-free,vegan,dairy-free"]

Or:

[recipekit_diet_key layout="grid" hide_empty="false"]

Best Practices & FAQ

  • Keep abbreviations short (typically one to two letters)
  • Use colors that are easy to distinguish from one another
  • Display your Diet Label Key on recipe archives or recipe index pages rather than on individual recipes
  • Add headings using the Block Editor instead of the shortcode for greater design flexibility
  • If you're displaying many labels, consider using the Grid layout for improved readability

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. Use the labels attribute and list the label slugs in your preferred order.

Example:

[recipekit_diet_key labels="vegan,gluten-free,dairy-free"]

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 compatible 17th Avenue themes, but your data will not be lost!