How To Add Yoast Breadcrumbs To The GeneratePress Theme

Need to enable breadcrumbs in the GeneratePress theme?

This tutorial is for you if you use the GeneratePress theme (the premium version) and the Yoast SEO plugin.

GeneratePress is hands down the best WordPress theme I’ve ever come across. I’ll review it at some point, as it’s that good!

Anyways, the one thing GeneratePress needs to show is breadcrumbs, in particular, Yoast SEO ones.

So how do you add Yoast SEO breadcrumbs to the GeneratePress theme?

1. head to the back end of your website to > appearance > elements.

Once you’re in the Elements section, click add new.

2. From the Element, type choose a hook

We will choose a hook from the Element next to the theme to display our breadcrumbs.

3. Give the Element a title, in this case, breadcrumbs (or whatever you like)

Once you have done that, we need to add some code to the box under the title, so we need to use the above.

4. Once you’ve entered the code, we need to change the settings

Choose the hook location to display the breadcrumbs via the dropdown select box.

5. Lastly, still in the hook element, we need to set the display rule

I don’t personally want breadcrumbs shown on my homepage; we can stop that from happening. I’ve chosen to show on single posts/pages and not on the homepage.

6. We’re done with the hook element; next up, we need to activate breadcrumbs.

OK, so we’ve done the hard part (which wasn’t hard at all!). Now we need to activate the breadcrumbs in the Yoast SEO plugin, which is easy. So head over to Yoast SEO in the sidebar > Search Appearance > Breadcrumbs. 

Save your settings, refresh a page on your blog, and you are good to go!

That’s it; that’s all there is to it. You now should have breadcrumbs on your site!

Please see below for the code snippet used in the hook element. Please feel free to cut and paste.

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

That’s how you add breadcrumbs to the generatePress theme

No additional plugins are needed, and no complex coding, etc. Nice and simple; massive thanks to the people at GeneratePress for helping others by offering this code.

It’s for my reference and hopefully useful to you as well

As I mentioned earlier, I’ve added this to another site I run to remind me how to do it when working with the GeneratePress theme in the future. I can refer back to it if I forget how to do it. Hopefully, it will help you as well.

If you’d like more tips and tutorials, please stay tuned to my tips & tuts section here.

If you’d like to learn more about the individual behind GeneratePress, I interviewed him; look at the interview here. If you’d like to know how to change the post/page width in GeneratePress, I’ve also written a mini tutorial.