How to add Breadcrumb Navigation to GeneratePress

If you’ve been here before, you know I love GeneratePress — but it’s not a perfect theme. In fact, GeneratePress is missing several features that are standard in other premium WordPress themes.

Despite being SEO-friendly, GeneratePress doesn’t include breadcrumb navigation right out of the box.

Fortunately, it’s quite easy (and free) to add Breadcrumbs to Generatepress by using the theme hooks to insert them exactly where you want.

Free vs. Premium: This tutorial will work for both the free & premium version of GeneratePress. However, only the pro version includes the beginner-friendly hooks module. Free users will have to manually add breadcrumbs with PHP snippets.

Step 1: Generate the breadcrumbs (plugin)

Since GeneratePress doesn’t have built-in breadcrumbs, we need to generate the breadcrumb HTML using a 3rd-party plugin. Then we’ll insert that breadcrumb into GeneratePress using a hook.

How to create breadcrumbs? If you use an SEO plugin on your site (Yoast, Rankmath) then you already have the ability to create breadcrumbs automatically. In fact, nearly every SEO plugin has breadcrumb functionality.

If you don’t have a compatible SEO plugin, you could use a standalone breadcrumbs plugin like NavXT which is both excellent and free.

Plugins that generate breadcrumbs automatically

These plugins can automatically create breadcrumbs for you. You can then insert them into your site using a php function or shortcode (supported by most of these plugins).

Breadcrumb plugins:

• Yoast SEO
• Rankmath
• All-in-one SEO
• Breadcrumbs NavXT

All you have to do is install one of these plugins on your site and proceed to the next step.

Step 2: Configure the breadcrumb settings

Each of the above plugins has their own breadcrumb settings. You can control things like the formatting, remove the ‘home’ link and change the separator icon between breadcrumb items.

You can even customize things like how breadcrumbs are formatted for custom post types and taxonomies.

Here are the breadcrumb setup instructions for each plugin:

• Yoast SEO: Yoast breadcrumb setup
• Rankmath: Rankmath breadcrumb settings
• AIO SEO: All-in-one SEO breadcrumb settings
• NavXT: NavXT breadcrumbs setup

Step 3: Insert breadcrumbs via Hook

The best way to add your breadcrumbs to GeneratePress is via theme hooks.

Instead of editing the template files directly (which requires a child theme), Hooks are a much more modular way to insert custom code. And it’s the way Tom Usborne (GeneratePress founder) recommends.

For reference, here are the hooks available for GeneratePress single post templates (via the visual hook guide)

Which hook to use

The exact hook location you choose is a personal preference and will vary based on where you want your breadcrumbs to be located.

For example, if you want them just above the page title, you’d use the generate_before_entry_title hook.

If you want the breadcrumbs above the main content container, you could use generate_before_main_content (contained) or generate_inside_container hook (full-width)

Just experiment and see what looks best to you.

The breadcrumb function & shortcode

The exact code to add to the hook depends on the plugin you’re using the generate your breadcrumbs. Most of these plugins have both a php function and shortcode option for outputting the breadcrumbs.

Here’s a chart:

Plugin	PHP Function	Shortcode
Yoast SEO	yoast_breadcrumb()
Rankmath	rank_math_the_breadcrumbs()
AIO SEO	aioseo_breadcrumbs()
NavXT	bcn_display()	none

For example code snippets for each plugin, see the next section

GeneratePress Premium: Using the Hooks element

If you’ve got GeneratePress Premium (which I love), it’s super easy to create a customize your breadcrumbs hook. We don’t even have to write a single line of PHP if your plugin has a breadcrumbs shortcode.

1. Go to Dashboard > Appearance > Elements
2. Click add new element
3. Choose Hook as the Element Type
4. Add a title for your hook (e.g. ‘Breadcrumbs’)
5. Add the HTML / PHP snippet (examples below)
6. Choose the hook location (e.g. generate_before_title)
7. Execute Shortcodes: Check this box if using a shortcode
8. Execute PHP: Check this box if your snippet contains php

Here are two example snippets for breadcrumbs using Rankmath. The first uses just HTML and a shortcode. The second uses PHP.

Snippet example: HTML + Shortcode

<div id="crumbs">[rank_math_breadcrumb]</div>Code language: HTML, XML (xml)

Snippet Examples: PHP

<div id="crumbs">
   <?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>
</div>Code language: HTML, XML (xml)

GeneratePress Free: PHP hook snippet

If you’re using the free version of GeneratePress, you won’t have access to the hooks module of GeneratePress Elements. So you’ll need to add the hook manually using PHP.

Where to add the code? Add this snippet to your functions.php file (in the theme folder) or using the code snippets plugin.

Make sure to modify this code to use the function or shortcode of your preferred breadcrumbs plugin.

• For other plugins: Simply replace the code inside the add_gp_breadcrumbs() function with the snippet provided by your plugin’s docs.
• To use a different hook: replace generate_before_title with the new hook name.

// add Yoast SEO breadcrumbs to the generate_before_title hook

// function to call from the hook
function add_gp_breadcrumbs() {

    if ( function_exists('yoast_breadcrumb') ) {
       yoast_breadcrumb( '<div class="grid-container grid-parent"><p id="breadcrumbs">','</p></div>' );
    }

// add the hook
add_action( 'generate_before_title', 'add_gp_breadcrumbs');
Code language: JavaScript (javascript)

Step 4: Style & Customization

The default breadcrumb styling will be incredibly basic. The link colors will be inherited from your them and there will be no additional CSS applied. You have to add it yourself.

Breadcrumb CSS

If you want to really level up your breadcrumbs, you can emulate some of these free CSS breadcrumb examples:

• Basic breadcrumb CSS (W3Schools)
• 20 CSS Breadcrumbs (freefrontend)
• 26 Breadcrumb Examples (bashooka)

Additional customization

Beyond just styling, you may want further control over when your breadcrumbs appear on your site.

For example, you might have some full-page layouts built with a page builder where breadcrumbs don’t make sense (or look right).

If you’re using GenatePress Premium, you can easily remove crumbs from these pages by manually adding them as ‘Exclusion Rules’ under Display Rules > Exclude for your breadcrumbs element.

If you’re not using Premium, you’ll have to handle the conditional hook using PHP which is much trickier and beyond the scope of this tutorial. The easier solution would be to simply hide the breadcrumbs on specific pages using inline-CSS.

For example, if your breadcrumbs are wrapped in a <div id=”crumbs”></div>

Then just add the following HTML snippet anywhere on the page (in Gutenberg, just use the HTML block).

<style>
    #crumbs { display: none; }
</style>Code language: HTML, XML (xml)

Important: Don’t include this rule in your sitewide stylesheet or it will hide your breadcrumbs everywhere. It needs to be manually added on a per-page basis.