How To Add Breadcrumbs in GeneratePress Theme

If you are looking to provide a better user experience by enhancing your website’s navigation and being willing to see that navigational aid appears on Google search results. Then breadcrumbs are the answer you are looking for. In this article, we will be looking at how we can add breadcrumbs in GeneratePress theme.

how to add breadcrumbs in GeneratePress theme

GeneratePress is a lightweight multi-purpose WordPress theme with lots of customization options. It is specifically built keeping speed, flexibility, and modular approach, in mind. This makes it one of the most popular themes in the WordPress eco-space.

If you are interested in understanding all of its features in-depth, I’d suggest you read the GeneratePress review article on BloggingIdol.

Unlike its competitors, it focuses on speed and simplicity. Therefore, we see more than 400,000+ installs (at the time of writing) of the GeneratePress free theme. The company provides this amazing theme in two versions, GeneratePress free and premium.

If you want to see a head-to-head comparison between both versions, please check the GeneratePress free vs premium. I have tried to include everything a user might want to understand before making a decision.

Before we get into adding Breadcrumbs to your GeneratePress theme, let us understand what are breadcrumbs and how can they be beneficial to you?

What are Breadcrumbs?

Breadcrumbs are small graphical elements mostly seen on the top of a website, indicating where the user is on the site. They are also referred to as Breadcrumb Trail and help users in navigating the website much better. They help users to understand the structure of a website letting them easily return back to the homepage, after exploring other web pages of the site.

After enabling breadcrumbs from SEO plugins such as Yoast SEO and Rank Math, they will churn out JSON-LD data into the source code. Aiding to showcase a complete breadcrumb trail in the Google Search Rich Snippets.

Why Are Breadcrumbs So Important?

The main reason breadcrumbs are so important is that they directly impact the User Experience (UX). Letting the user quickly navigate the site without many complicated links and pathways.

Their nature is simple and hence, they are quickly understandable by the blink of an eye. For example, a SERP result of a product with breadcrumbs under the link lets the user easily find out which category the product is being displayed from, without even opening the link.

This is where SEO comes into the picture. This enhancement in UX and the simple nature of understanding the entire breadcrumb trail reduce a website’s bounce rate. As the user is less likely to leave the page once he/she has seen the entire breadcrumb trail from the SERP result itself. Aiding in better page ranking.

Additionally, they also help in giving out more information about the website, to Google Crawlers. As per Google’s viewpoint, breadcrumbs are seen as an enhancement tool, giving them a permanent place under the permalinks in SERPs.

Where Should You Use Breadcrumbs?

  1. You should use breadcrumb for websites that are complex and have large amounts of content.
  2. Websites having a strict linear structure with multiple categories need breadcrumbs.
  3. Blogging websites with content divided into categories, and sometimes even sub-categories.
  4. E-Commerce websites are best showcased using breadcrumbs. That even helps user while viewing the SERPs.

Note: Do not use breadcrumbs on websites with very little content or single-level sites with no logical hierarchy.

Let’s now understand how to enable and add breadcrumbs in GeneratePress theme. We will be covering Yoast SEO and Rank Math SEO plugins in this article. I will be showing the steps for adding breadcrumbs in both, GeneratePress free and premium theme

Add Breadcrumbs In GeneratePress Free Theme [Yoast SEO Plugin]

For adding Yoast SEO breadcrumbs in GeneratePress free theme, you will need Yoast SEO plugin and Code Snippets plugin. Install and activate the plugins.

Enable Yoast SEO Breadcrumbs

  1. Go to your WordPress Dashboard, hover on SEO, and click on Search Appearance.
  2. From here, click on the Breadcrumbs tab.
  3. Put a Separator between breadcrumbs.
  4. Under Anchor Text for the Homepage, type in Home.
  5. Under Prefix for Archive breadcrumbs, type in Archives For
  6. Prefix for Search Page breadcrumb should showcase “You Searched For”
  7. Breadcrumb for 404 page should show a message Error 404: Page Not Found.
  8. Drop down the Post Taxonomy and choose Category.
  9. Finally, select Enable breadcrumbs for your theme

Don’t forget to Save Changes before leaving the page.

That’s it, Yoast SEO breadcrumbs have been enabled for your site.

Add Yoast SEO Breadcrumbs To GeneratePress Theme

After enabling Yoast SEO breadcrumbs, now you will need to add it to your theme.

Since GeneratePress free users do not have a module called Elements, you will need to have the Code Snippets plugin installed and activated.

  1. Go to your WordPress dashboard, hover your mouse on Snippets, and click on Add New.
  2. Give a name to the Snippet and add the following code
  3. Hit Save Changes & Activate before leaving the Snippets page.
add_action( 'generate_before_entry_title', function() {
    if ( function_exists('yoast_breadcrumb') && !is_front_page() )  {
        yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
    }
} );
add  Yoast SEO breadcrumbs in GeneratePress free theme
Notice the 3-level breadcrumb trail with current location as Bold

The final result should look like this.

Now let us look at how to add Rank Math breadcrumbs in GeneratePress free theme.

Also Read:

Add Breadcrumbs In GeneratePress Free Theme [Rank Math SEO Plugin]

For adding Rank Math SEO breadcrumbs in GeneratePress free theme, you need to install and activate Rank Math SEO plugin and Code Snippets plugin.

Enable Rank Math SEO Breadcrumbs

  1. Go to your WordPress dashboard, hover your mouse on Rank Math, and click on General Settings.
  2. Click on the second tab called Breadcrumbs.
  3. Toggle the switch to Enable Breadcrumbs function.
  4. Apply a Separator Character.
  5. Toggle the switch of Show Homepage Link.
  6. Hit Save Changes.

Note: Other information will be already filled, avoid changing them.

Copy the code provided by Rank Math, to input in Code Snippets.

Add Rank Math SEO Breadcrumbs To GeneratePress Theme

  1. Get to your WordPress dashboard, look for Snippets, and click on Add New.
  2. Give it a Name and add the following code
  3. Hit Save Changes & Activate before leaving the Snippet.
add_action( 'generate_before_entry_title', function() 
		   {
if (function_exists('rank_math_the_breadcrumbs')) 
{
rank_math_the_breadcrumbs(); 
}
		   } );

Note: add action() function is not present and I have added, to provide my breadcrumbs a proper location (above the content).

This is how the final result should look like. The above image is from one of the blog posts from an E-Commerce website.

Now, let us look at how to add breadcrumbs in GeneratePress premium theme.

Note: While adding Breadcrumbs, the only difference between GeneratePress free vs premium is that GP premium offers a module called Elements. Elements let you craft and create amazing Blocks, Headers, Hooks, and Layouts, and helps in GeneratePress theme customization.

On BloggingIdol, I’m using GeneratePress premium theme and I am extremely satisfied with all the modules, customization options, flexibility, and performance that this theme delivers. In fact, the breadcrumbs you see on this site are created exactly how I am going to show you below.

Also Read:

Add Breadcrumbs In GeneratePress Premium Theme [Yoast SEO Plugin]

To add Yoast SEO breadcrumbs in GeneratePress premium theme, you will need Yoast SEO plugin and GP Premium plugin. Install and activate the plugins.

You will also need to Activate the Elements Module.

Enable Yoast SEO Breadcrumbs

To do this, follow the same steps as seen under adding Yoast SEO breadcrumbs in GeneratePress free theme (earlier in this article).

Activate Elements Module

  1. Go to your WordPress dashboard, hover your mouse on Appearance, and click on GeneratePress.
  2. Locate the Elements Module and click on Activate.
  3. This will easily let you create a Hook for adding Breadcrumbs.
activate Elements module in GeneratePress premium theme
Elements module is already activated on my site. You will need to activate it

Add Yoast SEO Breadcrumbs To GeneratePress Theme via Hook

For this we will need to first create a Hook in GeneratePress and then add the breadcrumbs code into it.

  1. Go to WordPress dashboard, look for Appearance, and click on Elements.
  2. Click on Add New Element.
  3. You will see a drop down, select Hook, and press Create.
  4. Give you Hook a proper name.
  5. Add the Code
  6. Select the Hook option drop-down “generate_before_content”
  7. Check mark Execute PHP option, as the code involves PHP.
  8. Leave the Priority to 10
  9. Under Display Rules, select Location as All Singular
  10. Hit Publish
choosing Element type as Hook in GeneratePress premium theme
Creating Hook in GP Premium theme
adding Yoast SEO breadcrumbs code in GeneratePress hook
Yoast SEO Breadcrumbs PHP code
<?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 } ?>

If you have a static homepage, then use the following code.

<?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; ?>
hook settings for Yoast SEO breadcrumbs in GP premium theme
Hook Settings for Yoast SEO Breadcrumbs in Generatpress theme
hook display rules for Yoast SEO breadcrumbs in GP premium theme
Hook Display Rules for Yoast SEO Breadcrumbs in Generatpress theme

The final result should look like the one shown in the image below.

Yoast SEO breadcrumbs in GP premium theme
Yoast SEO breadcrumbs added in GeneratePress premium theme

Note: I will be revealing the CSS code to beautify the breadcrumb trail, later in this article.

Add Breadcrumbs In GeneratePress Premium Theme [Rank Math SEO Plugin]

You will need to have Rank Math SEO plugin and GP Premium plugin.

Activate the Elements Module

  1. From your WordPress dashboard, hover your mouse on Appearance, and click on GeneratePress.
  2. Look for Elements Module
  3. Activate it

Enable Rank Math SEO Breadcrumbs

  1. From WordPress, hover your mouse on Rank Math, click on General Settings.
  2. Click on Breadcrumbs tab
  3. Enable Breadcrumbs function switch
  4. Give a Separator Character
  5. Switch on the Show Homepage Link
  6. Click on Save Changes
enabling Rank Math SEO breadcrumbs in GeneratePress premium theme

Create A Hook & Add Rank Math SEO Breadcrumbs To GeneratePress Theme

  1. On WordPress dashboard, go to Appearance, and click on Elements
  2. Click Add New Element
  3. From the drop down, select Hook and click on Create
  4. Give a Name to your Hook (e.g. Rank Math SEO Breadcrumbs)
  5. Add Rank Math SEO Breadcrumbs Code
  6. Under Hook Settings, select Hook option “generate_before_content”
  7. Select Execute PHP
  8. Let the Priority stay at 10
  9. From Display Rules, select Location as All Singular
  10. Click on the Publish Button
adding new hook in GP Premium
Adding a New Hook to GeneratePress premium theme
adding rank math SEO breadcrumbs code to GeneratePress hooks
Adding Rank Math SEO Breadcrumbs code
hook settings for Rank Math SEO breadcrumbs in Generatepress premium theme
Hook Settings for Rank Math SEO Breadcrumbs in Generatpress theme
hook display rules for Rank Math SEO breadcrumbs in GeneratePress premium theme
Hook Display Rules for Rank Math SEO Breadcrumbs in Generatpress theme

Use the following Rank Math SEO breadcrumbs code;

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

The final result should look like the one shown in the image below

Rank Math SEO breadcrumbs on a GeneratePress premium website

That’s it, see how simple all of this is.

Let me now give the CSS codes to beautify the breadcrumbs trail section.

Breadcrumbs Trail CSS For Yoast SEO Plugin Users

The code to beautify Yoast SEO breadcrumbs trail is mentioned below

#breadcrumbs {
    padding: 10px 10px 10px 35px;
    margin-left: -30px;
    background: #fafafa;
    color: #5f5f5f;
	 border-left: 3px solid #0693E3;
    font-size: 16px;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}
CSS applied to Yoast SEO breadcrumb trail
After applying CSS – customize Yoast breadcrumbs

Breadcrumbs Trail CSS For Rank Math SEO Plugin Users

The code to beautify Rank Math SEO breadcrumbs trail is mentioned below

.rank-math-breadcrumb p {
    padding: 10px 10px 10px 35px;
    margin-left: -30px;
    background: #fafafa;
    color: #5f5f5f;
	border-left: 3px solid #005f69;
    font-size: 16px;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}
CSS applied to Rank Math SEO breadcrumb trail
After applying CSS to Rank Math SEO breadcrumb trail

The CSS code really gives a different look to your breadcrumb trail and makes the portion look very neat.

How To Optimize Breadcrumbs For Best Results?

  1. Keep in mind that your breadcrumbs should be enabled and located on the top of your web page
  2. Add breadcrumb schema markup. Plugins like Yoast SEO and Rank Math will do that automatically for you
  3. Never have your breadcrumb overwhelm the primary navigation of your website
  4. Be careful not to repeat your navigation bar in the breadcrumbs trail
  5. Be sure to have mobile friendly breadcrumbs as well
  6. Keep the aesthetics simple and neat. For the viewer’s perspective they are just a navigational aid

Conclusion

Breadcrumbs are like icing on the cake. They not only improve your website’s User Experience (UX), but also help in SEO.

Implementing breadcrumbs is a simple task that makes your site stand out and shout loud on the search engine results page. They won’t directly guarantee you a significant boost but will go long way in improving your SEO.

Further Reading:

Ankur Purecha

I am in love with WordPress, building websites, doing SEO, and all that kind of stuff. I generally write about WordPress, Blogging, and SEO on BloggingIdol

Leave a Comment