How To Add Breadcrumbs in GeneratePress Theme

If you are looking to provide a better user experience by enhancing your GeneratePress website’s navigation and further making that navigation appear on Google SERPs. Then GeneratePress breadcrumbs is the answer. In this article we will be looking at 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.

Unlike its competitors, it focuses on speed and simplicity. Therefore, we see more than 500,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 are interested in understanding all of its features in-depth, I’d suggest you read the GeneratePress review article on BloggingIdol.

In this article we will look into

  • Adding Yoast & Rank Math breadcrumbs in GeneratePress free theme and in GP Premium
  • Beautifying your breadcrumbs section
  • Optimizing breadcrumbs for best results

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

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

How breadcrumbs are used in website navigation?

Breadcrumbs are website elements that help users in navigating your site. They help visitors in keeping track of their current location on a site. This is generally known as a breadcrumb trail – displaying the current page to the user and its relation to the other pages visited before.

For example, if you visited a website that sells computers and quickly hit one of its main category ‘Dell Desktop Computers’, you continue browsing by going to a page about Dell Optiplex 720 Desktop Computer.

Then the SEO breadcrumb example would look like;

Home >> Dell Desktop Computers >> Dell Optiplex 720 Desktop Computer

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
yoast breadcrumbs generatepress

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 WordPress breadcrumb 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 of the Yoast SEO breadcrumbs code should look like the image above.

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 in, avoid changing them.

rank math breadcrumbs

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

Note:- Again, this is a GeneratePress free theme method of adding breadcrumbs to GeneratePress website.

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

Which Hook To Use In GeneratePress Premium Version?

Using hooks to use breadcrumb navigation in GeneratePress is one of the best and mist easiest way.

You just need to know which hook to use.

That can be easily found out using the GeneratePress visual hook guide.

generatepress visual hook guide for understanding which hook to use for breadcrumb navigation
The Official GeneratePress Visual Hooks Guide

You can use ‘genreate_before_main_content’ or ‘genarate_before_content’ hook.

In my case, the entire website layout is one single container. Therefore, I will be using ‘generate_before_content’ hook while showing you Yoast and Rank Math plugin steps.

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 GeneratePress Hooks
  4. We will use that hook to add breadcrumbs in GP Premium website
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 GeneratePress theme
hook display rules for Yoast SEO breadcrumbs in GP premium theme
Hook Display Rules for Yoast SEO Breadcrumbs in GeneratePress 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 the 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

FAQs- Breadcrumbs in GeneratePress Theme

What are breadcrumbs on websites & on the SERP?

Breadcrumb is a website and a SERP element, helping users quickly understand the location of the web page they are currently viewing. Acting as a user information or a clickable navigation tool.

Are breadcrumbs good for SEO?

Breadcrumbs not only help increase user experience on websites, but also showcase the entire breadcrumb trail on SERPs. Giving your visitors a gist of what else to expect from your website, if they were to click on your blog post.

How to add breadcrumbs in WordPress?

Firstly, install Yoast or Rank Math SEO plugin, and enable breadcrumbs. Then input the WordPress breadcrumb code in Code Snippets plugin. Code in article.

How to customize Breadcrumbs in WordPress?

To customize and design breadcrumbs in WordPress, you will need to apply CSS code to the WordPress theme. Code in article.

How do I enable breadcrumbs in GeneratePress?

Download Yoast SEO or Rank Math SEO plugin, go to their breadcrumb feature and enable breadcrumbs for your GeneratePress website.

How to implement Yoast SEO breadcrumbs in GeneratePress?

Install and activate Yoast SEO plugin on your GeneratePress website. Under Yoast SEO settings click on Search Appearance >> Breadcrumbs >> Enable breadcrumbs.

How to implement Rank Math SEO breadcrumbs in GeneratePress?

Install and activate Rank Math SEO plugin on your GeneratePress website. Under Rank Math SEO settings Breadcrumbs >> Enable breadcrumbs function.

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.

Other GeneratePress Customization Posts

Share and Enjoy !

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

2 thoughts on “How To Add Breadcrumbs in GeneratePress Theme”

Leave a Comment

Shares