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?

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

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.

1. 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.

2. 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

3. 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 > 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 } ?>
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.

4. 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 > 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.

5. 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 > 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;
}

6. 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;
}

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 love things to do with WordPress, Digital Marketing. Blogging has been my Passion. In my free time, I enjoy watching Series and Movies.

15 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

Leave a Comment