Yoast SEO is one of the best SEO plugins for WordPress sites to optimize the content for Google. As part of improving navigation structure, Yoast offers a breadcrumb structure that helps users to quickly navigate to the top-level categories. The best part is that it offers to choose a primary category that you want to show in the breadcrumb structure when there are multiple categories assigned to a post. GeneratePress being a minimalist theme does not offer any quick way to integrate Yoast breadcrumb to the post content. If you are wondering how to integrate Yoast breadcrumb in GeneratePress theme, here is a step-by-step instruction for you.
Why to Add Yoast Breadcrumbs?
Google, Bing and other search engines show the breadcrumb structure in search engine results. This will help users to understand the relative position of the post they are reading compared to the entire website’s content. In addition, users can easily navigate to the high level categories assigned to the post using breadcrumb navigation structure. Therefore, it is a win-win situation to add breadcrumb in your site.
Many commercial themes offer breadcrumb structure as part of theme options. however, Yoast being a separate plugin offers an option to enable or disable breadcrumb structure for your site. unfortunately, even after enabling the setting in the plugin, you still need to add the following PHP code where you want to show the breadcrumb.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
Adding Yoast Breadcrumb in GeneratePress Theme
Generally, you need to add the above PGP code in header.php or single.php file of your theme depending upon the need. However, modifying theme’s file is not recommended as the changes will be deleted whenever you update the theme. The solution is to use separate plugins or use a child theme to retain the setup when you update your theme. GeneratePress offers a different solution to use WordPress hooks to insert the required code in the header section of your site. this does not need additional plugin and you can do this with the premium version of GeneratePress theme using Elements module.
Activating Elements Module in GeneratePress Premium
Make sure you have purchased GeneratePress theme and installed the GP Premium add-on plugin. This will enable additional modules for you to use along with the free GeneratePress theme. After that, go to “Appearance > GeneratePress” section and enable “Elements” module.
Creating a Hook in Header
After activating Elements, go to “Appearance > Elements” menu. Click on “Add New Element” button to create a new element.
On the next screen that appears, select “Hook” from the “Choose Element Type” dropdown and click “Create” button.
This will open an editor where you can insert the code and customize the settings.
Settings for Yoast Breadcrumb in GeneratePress Theme
As mentioned, the position of the breadcrumb is based on your need and we will show how to insert just above the post content as shown below.
To do so, first paste the Yoast breadcrumb code as mentioned above in the code editor. Before that, don’t forget to give a name for your element. You can give any name to the Element; in this example we will give the title as “Yoast Breadcrumb”. After pasting the code, it should look like below on the editor.
Related: How to show last modified date in GeneratePress theme?
Settings for Breadcrumb Hook
Next step is to choose the position for your hook element. GeneratePress offers many pre-defined hook positions and you can choose one among from them.
- For showing the breadcrumb just above the post title, select “generate_before_entry_title” as your “Hook” from the dropdown under “Settings” tab.
- Uncheck “Execute Shortcodes” box as this is not a shortcode.
- Select “Execute PHP” box as the code is a PHP code.
- Finally, select the priority as 10 if there are no other elements using the same hook position. Otherwise, you have to change the lowest priority in terms of 10 so that this code will be executed at first.
Choosing Display Rules
Since breadcrumbs are required to show only in posts, you have to setup the rules accordingly under “Display Rules” section.
- Select “Posts” and “All Posts” option under “Display Rules” section against “Location” option.
- You can ignore “Exclude” and “Users” options as they are not relevant for inserting breadcrumb in GeneratePress theme.
Publish Breadcrumb
If you want to add any notes, go to “Internal Notes” section and enter the note in the text box. This is just for your reference and not used for displaying breadcrumb structure in the frontend. Finally, click “Update” button to publish your changes.
Styling Yoast Breadcrumb in GeneratePress Theme
Now, the breadcrumb will look without any box or border around the text. If you want to add some decoration, add the following CSS under “Appearance > Customize > Additional CSS” section.
#breadcrumbs {
box-shadow: 1px 1px #d5d4d4;
background: #eeeded;
border: 1px solid #eeeded;
border-radius: 5px;padding: 0 5px 0 10px;
font-size: 16px;
}
Publish your change and it will look like below in the customizer. This will add a shadow box with border around the breadcrumb structure as shown above.
Now the breadcrumb will look elegant and will appear even you update the theme or GP Premium plugin. You can adjust the CSS to change the style of the breadcrumb as per your need.