Looking for an easiest way to enable Yoast breadcrumbs in GeneratePress theme without adding an extra plugin?
Then here is the place to learn, “how to add breadcrumbs on GeneratePress?“.
In fact, this tutorial will also show you, how to activate Yoast SEO breadcrumbs and display on your website using GeneratePress hooks element.
Let’s get started…!
Why you need to Breadcrumbs enabled on your website?
Honestly, I don’t use it yet. But believe me, adding this feature on blog posts not only increase user experience but also help enhance how your website looks in SERPs (search engine result pages).
Unfortunately, GeneratePress is a simple Freemium (free vs premium) WordPress theme known for light-weight, fast speed and simplicity.
Thus, it doesn’t allow admin to turn on breadcrumbs directly but with the help of Yoast SEO and GeneratePress hooks, you can display on blog posts.
Requirements for adding Breadcrumbs on GeneratePress theme
Before enabling this function on your website, make sure you have below two plugins installed and activated on your WordPress site:
- Yoast SEO – This is all in one WordPress SEO plugin I use on my all WordPress blogs. The free version is much enough for the tutorial.
- GP Premium – This is a pro version plugin for GeneratePress theme. Because to enable this feature, you need to access GeneratePress hooks add on, and without GP Premium plugin (installation guide), it’s not possible. If you have it, that’s awesome. But if not, then get it from this link.
How to activate Yoast Breadcrumbs on GeneratePress theme?
There are 2 simple steps to enable this feature on your WordPress site. Let’s get started:
Step 1 – Enable breadcrumbs feature on Yoast SEO plugin
Login to WordPress admin then click on SEO >> Search Appearance >> Breadcrumbs >> Enable.
After clicking on the Enable button, you will see some option appears. All you need to configure “Taxonomy to show in breadcrumbs for content types” option and leave rest of all as defaults.
In Taxonomy, I prefer to select Category. However, you can pick Tags if you want. Once done selecting, hit the Save Changes button.
Step 2 – Create a new GeneratePress hooks add-on
The next step is to create a new hook element. Tap on Appearance >> Elements option.
Click on “Add New” and choose “Element Type” “Hook“.
Next, add hook title (this wouldn’t show in blog posts) and in the editor box, copy and paste the following PHP function provided by Yoast SEO.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
In the Settings section choose before_main_content as the Hook >> tick the Execute PHP box >> select 10 as the Priority.
In the Display Rules section, select Post >> All Posts to display breadcrumbs on your website articles.
Once you are done with everything mentioned above, hit the Publish button.
That’s it. Visit your website post to make sure breadcrumbs activated or not.
Additional Customization
This is possible, by default breadcrumbs may not fit your blog design. So all you have a copy and paste the below CSS code (Note – You are free to make changes in CSS code that accurate fit to your website look).
#breadcrumbs {
font-size: 0.8em;
margin-bottom: 25px;
padding-left: 25px;
}
You can add custom CSS codes in your GeneratePress theme through customizer or by installing Simple CSS plugin.
Bottom Lines – GeneratePress Breadcrumbs
No matter what niche you are blogging on, GeneratePress theme (review) enables everything you need on your website.
In this article, I have covered, how to add breadcrumbs on GeneratePress using Yoast SEO plugin. And here many more tutorials waiting for to explore GeneratePress features.
If you have any other questions related to this guide, please leave a comment, I’ll love to help as soon as possible.