Brioche - Single Posts

In this article, we'll cover the single post layout in Brioche and how you can customize it.

Brioche includes several options for customizing your blog posts, including the post layout, featured images, title display, background color, and recipe snippets. Most of these settings can be customized in one place and will apply to all of your posts automatically.

Customizing the Post Header Hero

To get started, go to Appearance > Customize > Posts/Pages Layout > Single Post Layout.

One of the main features of Brioche's single post layout is the large header section at the top of each post, known as the Post Header Hero. In the Brioche demo, this section displays the post title over a faded featured image, along with additional post information and recipe links (when a post contains a recipe).

You can customize the background image, use a solid background color, or disable the hero entirely if you prefer a simpler post layout.

Using Your Featured Image as the Hero Background

By default, Brioche displays your post's featured image as the background of the Post Header Hero. This creates a large image header at the top of each post.

If you'd prefer to disable the background image:

  1. Go to Appearance > Customize > Posts/Pages Layout > Single Post Layout.
  2. Click on the Design tab.
  3. Locate Use Featured Image for Background? and toggle it off.
  4. Click Publish to save your changes.

Your Post Header Hero will still display, but without the featured image in the background.

Customizing the Hero Background Overlay

By default, Brioche applies a light overlay to the featured image in your Post Header Hero. This gives the image a softer, faded appearance and makes the post title and other text easier to read.

To customize the overlay, go to Appearance > Customize > Posts/Pages Layout > Single Post Layout > Design and locate the Background Overlay Color setting (note: the "Use Featured Image for Background?" setting must be enabled for this setting to be visible).

You can change the overlay color, adjust its opacity, or disable it entirely. You could also use a darker overlay color and change your post title and meta colors to white if you'd like a more dramatic appearance.

Changing the Hero Background Height

If you'd like your hero to be taller or shorter, you can adjust its height.

  1. Go to Appearance > Customize > Posts/Pages Layout > Single Post Layout.
  2. Find Container Min Height and enter your preferred height in pixels. The default is 350px.
Note: This setting controls the minimum height of the hero, not its exact fixed height. Depending on how much content is displayed inside the hero, it may be taller than the height you've specified.

Changing the Hero Background Color

If you'd prefer a solid background color for your Post Header Hero instead of an image, that's possible as well!

  1. In Single Post Layout, click on the Design tab.
  2. Disable Use Featured Image for Background? if it's currently enabled.
  3. Locate Post Title Background and select your preferred background color.
  4. Click Publish to save your changes.

You can also adjust the title font, colors, and other design settings under this Design tab.

Disabling the Post Header Hero

If you'd prefer a more traditional blog post title layout without the large hero section, you can disable it.

  1. Go to Appearance > Customize > Posts/Pages Layout > Single Post Layout.
  2. Find the Post Title Layout setting.
  3. Select In Content (instead of the default Above Content).
  4. Click Publish to save your changes.

Your post title will now display within the regular post content area instead of in a separate hero section.

Displaying a Featured Image

If you've disabled the Post Header Hero but would like to display a featured image (similar to our Millie theme), here's how to do that:

  1. Go to Appearance > Customize > Posts/Pages Layout > Single Post Layout.
  2. Scroll down and enable "Show Featured Image?"
  3. Additional settings will appear below where you can select your preferred image position: Above the Post Title, Behind the Post Title, or Below the Post Title. You can also choose your preferred image ratio.

Recipe Posts & Recipe Snippets

If you're publishing recipes, Brioche includes custom recipe snippet templates designed to work with WP Recipe Maker. Recipe snippets are small sections that display helpful recipe information and quick-action links near the beginning of a post, allowing visitors to jump straight to the recipe, share it, and more.

When the Post Header Hero is enabled, your selected recipe snippet will appear directly within the hero section. If you disable the hero, the snippet will display within your post content instead. Recipe snippets are optional and can be enabled or disabled in WP Recipe Maker's settings.

For instructions on installing WP Recipe Maker, selecting your Brioche recipe templates, and configuring automatic snippets, see our Brioche - Recipe Card setup tutorial.