How to Add Yoast Breadcrumb in GeneratePress Theme?

GeneratePress is one of the popular lightweight themes for WordPress site. However, it misses many basic features to reduce the size of CSS and JavaScript. If you are using Yoast SEO plugin on GeneratePress then here is how to add the breadcrumb feature.

Related: How to add Yoast breadcrumbs in other themes?

Why to Add Breadcrumb?

Nowadays, ranking in Google is nothing but mastering the use of different types of rich snippets (schema) on your site. Earlier days reviews are the major rich snippet option. Nowadays, you have multiple options like FAQ, How-to and breadcrumb. Fortunately, WordPress has numerous options for adding structured data. Yoast breadcrumb is the easy way you can add breadcrumb or navigation links. You will find the breadcrumb included in Google search results like below:

The best practice is to add the breadcrumb before the start of main content. This will help users to understand where exactly they are on the website. However, you can also insert breadcrumb at the bottom of the page.

In addition, Google Search Console will show you the valid breadcrumb data for each of your page to validate the schema.

Enabling Breadcrumb in Yoast SEO Plugin

After installing and activating Yoast SEO plugin go to “SEO > Search Appearance” section. Click on “Breadcrumbs” tab section and select “Enabled” option.

You can choose to show “Blog” index page in the breadcrumb and choose to bold the page title.

Make sure you have selected “Category” option for “Posts” under “Taxonomy to show in breadcrumbs for content types”. This will help you to showcase the primary category you choose in the post editor in your breadcrumb structure.

Unfortunately, this is not enough to show the navigational links on your site. You have to insert a piece of PHP code in the blog post template (single.php file) to display the breadcrumb. Below is the Yoast SEO breadcrumb PHP code, you can copy and insert in your GeneratePress site.

<!-- BEGIN Yoast Breadcrumb -->
<?php if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
<!-- END Yoast Breadcrumb -->

Inserting Yoast Breadcrumb in GeneratePress Theme

If you are using GP premium then there is an easy way to insert PHP codes using Elements. If you are using free version, you have to either use additional plugin or insert the code in single.php file of your child or parent theme.

Inserting with Elements for GP Premium

First, ensure that you have GP premium plugin is installed and activated.

• Go to “Appearance > GeneratePress” and activate “Elements”. Remember, “Disable Elements” is a different option. Therefore, check and make sure you have activated “Elements” option.

• Navigate to “Appearance > Elements” section and click on “Add New” button.

• Click the dropdown and choose the element type as “Hook”.

• Type the name of your element as “Yoast Breadcrumb” or anything similar.
• Paste the Yoast Breadcrumb code copied in the previous step in the text box.

• Click on “Settings” tab and then click the dropdown against “Hook”. You will see large number of hook positions available and select “before_content” option. This will add the breadcrumb before the post title as shown in the below picture.

• You can refer the list of hook positions in this visual chart and select the hook required for your site.
• Choose “Execute PHP” checkbox and leave the priority as blank. If you have multiple hooks for the same “before_content” position then enter 10 or 20 to decide the priority for the execution. If you have only one hook for “before_content” then leave this field as blank.

• Under “Display Rules” tab, you can choose where you want to showcase the breadcrumb.
• Click on the dropdown and select “Posts”, it will automatically select “All Posts” option for the next box.

• Click on “Publish” button to make the PHP code run on your site. You can see the breadcrumb showing before the post title on all your blog posts.

We recommend you to choose only blog posts for inserting breadcrumb, however, you can also showcase for product, custom post types and archives. Use location, exclusion and user rules to control the pages you want to showcase the breadcrumb.

Related: How to setup WooCommerce store in WordPress?

Inserting in Single.php File for Free Version

If you do not have GP premium, then there are two options. You can insert the PHP code in single.php file of either the parent theme or the child theme. We explain here with directly adding to parent’s theme file. Checkout this article on how to create child and add code.

• Go to “Appearance > Theme Editor”.
• On GeneratePress, single.php file uses content-single.php file to pull the content. So, you have to insert the Yoast Breadcrumb code inside content-single.php file.
• On the “Theme Files” sidebar, locate content-single.php file.
• Paste the breadcrumb code before <header class=”entry-header”> line. As you can see, generate_before_content hook actually goes here.
• Click on the “Update File” button to save your changes.

Styling the Breadcrumb

As you can see in the above breadcrumb screenshot, it is shown inside a lightgrey shadow box. You have to use custom CSS to change the display of your breadcrumb. This is an optional step required for both free and premium theme versions.

• Go to “Appearance > Customize” section.
• Paste the below CSS code under “Additional CSS” section.
• Click on the “Publish” button.

#breadcrumbs {
box-shadow: 1px 1px #d5d4d4;
background: #eeeded;
border: 1px solid #eeeded;
border-radius: 5px;
padding: 0 5px 0 10px;
font-size: 14px;
}

Adjust the padding, border color, border radius and background as per your need.