How to Add Breadcrumbs in GeneratePress Theme?

In this tutorial, we are going to learn to add breadcrumbs in GeneratePress Theme. GeneratePress is a highly rated theme and bloggers are loving it due to its simplicity. It is built focusing the speed and performance.

Add Breadcrumbs in GeneratePress Theme

The free version of GeneratePress is installed over 2,00,000+ while writing this tutorial. In this WP Logout blog, I am using the premium version of GeneratePress that includes features like Elements, Site library, typography, sections with lots of features.

In this GeneratePress Breadcrumbs tutorial, we are going to learn

  • What is Breadcrumb?
  • How does Breadcrumb help in SEO?
  • How to easily add Breadcrumbs in GeneratePress using Yoast SEO and Rank Math plugin?
  • How to style Breadcrumb using CSS?
  • How to add Breadcrumb in Free GeneratePress Theme?

Adding Breadcrumbs in GeneratePress Theme

In this tutorial, I am using GeneratePress Premium Theme. so if you are using free GeneratePress from wordpress.org then you have to create a child theme and try to manually to implement the code using functions.php and style.css.

Learn on how to create a GP child theme

or, you can use the Code Snippets plugin to insert a breadcrumb code in the free Generatepress Theme.

For Yoast, Go to Code Snippets > Add New > Add a Title and Copy and Paste the following breadcrumb code. Also, use the CSS code from down below to style breadcrumb.

add_action( 'generate_before_entry_title', function() {
    if ( function_exists('yoast_breadcrumb') && !is_front_page() )  {
        yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
    }
} );

For this method, you need to enable Elements Module in Premium GeneratePress Theme Settings.

Appearance > GeneratePress > Modules > Elements > Activate

We are going to try two methods to implement breadcrumbs. The first method is using the Yoast SEO plugin. The second method is using Rank Math Plugin.

You can use one of the methods to implement on your website.

So, Let’s get started.

What is Breadcrumb?

Breadcrumb is a path placed at the top of the post that helps to navigate location on a website or webpage.

Breadcrumb in a webpage

The breadcrumbs term was named after the famous story of Hansel and Gretel who track the trail to get their home location using the pieces of bread.

How does Breadcrumb help in SEO?

Breadcrumb is an important part of SEO. It is a text that helps to navigate to the homepage from the pages you are visiting. Breadcrumb improves the dwell time and also helps to decrease the bounce rate of a website.

Breadcrumbs in Google SERPs

Among 200+ ranking factors, Google listed Breadcrumb as a ranking factor. Also, Google snippet our website breadcrumb in Search Engine Result Pages (SERPs).

Breadcrumb helps in internal linking structure as internal links are vital from Google’s perspective.

Also Try: Host Google Fonts Locally in WordPress

How to Add Breadcrumbs in GeneratePress using Yoast SEO plugin?

If you are using Yoast SEO plugin then that’s a great choice. I have been using the free version of Yoast SEO and I am pretty happy with it. I have personally used this method in my blog. so let’s learn to add breadcrumbs in the GPP theme using Yoast Plugin.

First of all, Enable Breadcrumb in Yoast Setting.

Go to Yoast SEO > Search Appearance > Breadcrumbs > Enable Breadcrumbs

Breadcrumbs Settings in Yoast SEO

Choose the Posts to show in Breadcrumbs as a category and leave others as it is as in the screenshot.

Yoast SEO Settings

Now it’s time to implement the code in GeneratePress Theme.

Adding a New Hook in GeneratePress
  • Go to Appearance > Elements > Add New Element > Choose Element Type as Hook
  • Name the Hook.
  • Use the Yoast SEO Breadcrumbs Code as below.
<?php if ( function_exists('yoast_breadcrumb') ) { ?>
	<div class="grid-container grid-parent">
		<div class="page-header">
			<?php yoast_breadcrumb('<p id="breadcrumbs">','</p>'); ?>
	
		</div>
	</div>
<?php } ?>

Note: Use the below code, if you are using a static homepage. It helps to disable breadcrumbs on the homepage only.

<?php if ( function_exists('yoast_breadcrumb') && !is_front_page() ) : ?>
	<div class="grid-container grid-parent">
		<div class="page-header">
			<?php yoast_breadcrumb('<p id="breadcrumbs">','</p>'); ?>
	
		</div>
	</div>
<?php endif; ?>
Breadcrumbs in GeneratePress using Yoast SEO Plugin
Hook Settings in GeneratePress
Display Rules in GeneratePress Elements
  • Go to Hook Settings and choose Hook to be displayed before_content.
  • Check the Execute PHP.
  • And Go to Display Rules and choose Location to be displayed in All Singular.
  • Hit Publish Button.

How to Add Breadcrumbs in GeneratePress using Rank Math Plugin?

If you are using Rank Math plugin then you are getting most of Yoast premium features for free. There are plenty of settings you need to configure for the first time and I think you will love Rank Math SEO plugin in WordPress.

  • Go to Rank Math > General Settings > Breadcrumbs
  • Enable Breadcrumbs function.
  • Copy the Breadcrumbs code or shortcode provided by Rank Math.
Default options in breadcrumbs section
  • Go to Appearance > Elements > Add New Element > Choose Element Type as Hook
  • Name the Hook.
  • Use the Rank Math Breadcrumbs Code as below.
Adding a New Hook in GeneratePress
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>
Breadcrumbs in GeneratePress using Rank Math Plugin
Hook Settings in GeneratePress
Display Rules in GeneratePress Elements
  • Go to Hook Settings and choose Hook to be displayed before_content.
  • Check the Execute PHP.
  • And Go to Display Rules and choose Location to be displayed in All Singular.
  • Hit Publish Button.

How to Add Breadcrumbs in GeneratePress using All in One SEO pack plugin?

Here I am using free All in One SEO pack plugin to test the breadcrumbs and there isn’t any visible breadcrumb enabled by default in the plugin. For this, you need to install another plugin called Breadcrumb NavXT

  • Go to Plugins > Add New.
  • Search Breadcrumb NavXT plugin.
  • Install and Activate the plugin.

After installing the plugin, follow the method

  • Go to Appearance > Elements > Add New Element > Select Element Type as Hook
  • Give a Hook Title.
  • Copy and Paste the All in One SEO Breadcrumbs Code as below.
All in One SEO pack Breadcrumbs
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>
Hook Settings in GeneratePress
Display Rules in GeneratePress Elements
  • Go to Hook Settings and choose Hook to be displayed before_content.
  • Check the Execute PHP.
  • And Go to Display Rules and choose Location to be displayed in All Singular.
  • Hit Publish Button.

Furthermore, by default, the main title for breadcrumb is the site name that is written in Settings > General so we can change the Site Title name in breadcrumbs to Home by using the following code. For this, you need to install the Code Snippets Plugin.

  • Go to Plugins > Add New.
  • Search Code Snippets plugin.
  • Install and Activate the plugin.
  • Now go to Snippets > Add New.
  • Copy and Paste the following code
  • Hit Activate button.
add_filter('bcn_breadcrumb_title', 'my_breadcrumb_title_swapper', 3, 10);
function my_breadcrumb_title_swapper($title, $type, $id)
{
    if(in_array('home', $type))
    {
        $title = __('Home');
    }
    return $title;
}

How to Add Breadcrumbs in GeneratePress using Slim SEO plugin?

If you are using Slim SEO plugin in your WordPress site then you only have to copy the shortcode and insert the shortcode before the entry header.

  • Go to Appearance > Elements > Add New Element > Choose Element Type as Hook
  • Name the Hook.
  • Copy and paste the Slim SEO shortcode [slim_seo_breadcrumbs] as below.
Slim SEO Shortcodes
Slim SEO Hook Settings
  • Go to Hook Settings and choose Hook to be displayed generate_before_entry_title.
  • Check the Execute Shortcodes.
  • And Go to Display Rules and choose Location to be displayed in All Singular.
  • Hit Publish Button.
Display Rules in GeneratePress Elements

Also Read: Slim SEO Review & Guide

How to style Breadcrumb using CSS?

So the final step of this tutorial is to style the breadcrumb. You can tweak the code according to your needs.

If you are using Yoast SEO method then

  • Go to Appearance > Customize > Additional CSS
  • Copy and Paste the following code.
#breadcrumbs {
    padding: 10px 10px 10px 35px;
    margin-left: -30px;
    background: #fafafa;
    color: #5f5f5f;
    font-size: 14px;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}

If you are using Rank Math Plugin method then use the following CSS code.

  • Go to Appearance > Customize > Additional CSS
  • Copy and Paste the following code.
.rank-math-breadcrumb p {
    padding: 10px 10px 10px 35px;
    margin-left: -30px;
    background: #fafafa;
    color: #5f5f5f;
    font-size: 14px;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}

If you are using All in One SEO Pack plugin the use the following CSS code to style breadcrumbs

  • Go to Appearance > Customize > Additional CSS
  • Copy and Paste the following code.
.breadcrumbs {
    padding: 10px 10px 10px 35px;
    background: #fafafa;
    color: #5f5f5f;
    font-size: 14px;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}

if you are using Slim SEO then use the following code to style the breadcrumbs

  • Go to Appearance > Customize > Additional CSS
  • Copy and Paste the following code.
.breadcrumbs {
    padding: 10px 10px 10px 35px;
    margin-bottom: 15px;
    background: #fafafa;
    color: #5f5f5f;
    font-size: 14px;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px;
}

Conclusion

so, Which SEO plugin are you using on your website?

If you are not using Yoast SEO or Rank Math plugin then you may find a similar method to add breadcrumb in the theme.

And, I think you liked these methods to add breadcrumbs in GeneratePress Theme.

If you love this then don’t forget to comment and share this blog post.

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, Blogging. I mostly publish tutorials on GeneratePress and GenerateBlocks.

21 thoughts on “How to Add Breadcrumbs in GeneratePress Theme?”

  1. Hi Suraj, if we already have All in One SEO pack installed (with Schema enabled), can we use use the Rank Math plugin method to display breadcrumbs? All In One SEO pack does not offer breadcrumb navigation, but they have touched upon the subject here – semperplugins.com/documentation/adding-schema-org-markup-for-rich-snippets/

    I wish to for users to see Home -> Category -> Post Title above the post title and even in the Google search listing (URL -> Category -> Page Link). Would be grateful if you could guide me to get there.

    Reply
    • Hi Shrawan, I suggest to use only one SEO Plugin. so use either All in One SEO Pack or Rank Math. To enable Breadcrumbs by using Rank Math, I have already written a tutorial but I haven’t tried with All in One SEO Pack. so for this, you need to install Breadcrumb NavXT plugin to enable breadcrumbs in your site. Give it a try and also update us.
      Thank You

      Reply
        • Hi Suraj, you have such a lovely resource here on WPLogout for Generatepress users, thank you for taking my question.

          I’d like to know what i need to do for my Google search listing to change from Site -> URL to Site -> Category -> Title?

          Would just using your code get Google to update this for me?

          Reply
          • I think the above code should work for your requirement. I haven’t tested the All in One SEO Pack plugin on the live site, so implement and test it, please.
            Thank You

  2. Hey Suraj,
    Thanks for the tutorial, it helped but the problem is I am able to see the Home breadcrumb in my custom page, which I am using as static home page. How to disable on that page and let it be enabled for all other posts.

    Reply
  3. Thank you. Your tutorial is very helpful for everyone using generatepress theme and WordPress. Am using Rank Math and have follow your instruction to install breadcrumbs. Keep adding more tutorial. Thanks, ones again.

    Reply

Leave a Comment