How to Add Breadcrumbs in GeneratePress Theme?

In this Step-By-Step 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.

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.

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.

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

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

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

• 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 } ?>

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

• Go to Appearance > Elements > Choose Element Type as Hook
• Name the Hook.
• Use the Rank Math Breadcrumbs Code as below.

<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>

• 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 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;
}

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.