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:
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.
- Go to Dashboard > Appearance > Elements
- Click add new element
- Choose Hook as the Element Type
- Add a title for your hook (e.g. ‘Breadcrumbs’)
- Add the HTML / PHP snippet (examples below)
- Choose the hook location (e.g. generate_before_title)
- Execute Shortcodes: Check this box if using a shortcode
- 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.
Hey Matthew, great post!
Do you think you could revisit this and do a walk through on how a noob could add something like https://codepen.io/xhepigerta/pen/XKmZKN to GP Premium so it doesn’t mess with existing styles, and pulls the info about the breadcrumb dynamically?
Because the HTML markup is going to be different than the Codepen example, you’ll probably need to hire a freelancer to give you a similar appearance using a WordPress breadcrumbs.