Add Yoast SEO breadcrumbs using GeneratePress Elements

In this quick tutorial, we are going to add the Yoast SEO breadcrumbs block to a global page header using GeneratePress Elements feature.

Currently, I'm working two client projects using WordPress. For years, I've been a big fan of GeneratePress and GenerateBlocks and building almost all WordPress projects using the premium versions of the theme and blocks. Of course no project would be complete without a powerful SEO plugin and as many of you, I'm a big fan of Yoast SEO.

The Yoast SEO breadcrumbs block

For complex sites with a nested page structure it makes sense to use breadcrumbs to improve the user experience and ensure the visitor isn't getting lost on your site.

For ages the Yoast SEO plugin has offered a simple PHP snippet to be dropped in your theme in order to display a breadcrumb navigation:

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

Since the dawn of the block editor for WordPress, the SEO plugin offers a block to display breadcrumbs anywhere. Combined with the GeneratePress Elements feature, this allows us to create a header element without a single line of code.

GeneratePress global header with breadcrumbs

If you are using the premium version of GeneratePress, you have access to the powerful Elements feature. It allows you to create re-usable elements like page headers or footers and define display rules for them.

Make sure Elements is activated

In your WordPress admin, navigate to Appearance > GeneratePress and make sure the Elements module is activated:

Create a "Block" element

Once set go to Appearance > Elements in your WordPress dashboard. Create a new element and select "Block" as the type. You will be greeted with the block editor interface and some additional meta boxes below. Check out the following screenshot and the steps below to create a page hero header including breadcrumbs:

Now let's go through the steps:

1. Element type: Select "Page Hero" as the element type or learn more about the types.
2. Hook name: Use the after_header hook or any other hook you would like to place the element.
3. Disable the title if you use dynamic data to display the title in the element.
4. Add the Yoast SEO breadcrumbs block to your page hero content. I used the GenerateBlock Container block to center the breadcrumbs and give it some space.
5. Define the display rules according to your needs. I choose "Entire Site" and then defined to exclude it on the Front Page and on any singular posts.

And that's it for the quick tutorial.