In this guide, we’ll concentrate on adding Yoast SEO breadcrumbs to the WordPress CMS platform through the functions.php file of your child theme.
The current article is "6.10. Adding Yoast Breadcrumbs" of our Complete SEO Guide Box.
Previous Article: 6.9. Header/Footer Changes. Next Article: 6.11. Remove the Name Field
Contents
Who is this Guide For?
Firstly, let’s clarify who this article is aimed at. It’s tailored to cater to two types of WordPress users. One group consists of those not using the Astra WordPress theme and cannot specify Yoast SEO Breadcrumbs from their theme. The second includes Astra users struggling with Breadcrumbs errors in Google Search Console. Suppose you fall outside these categories, such as being an error-free Astra user or using another theme without issues. In that case, this content may not apply directly to your situation.
We already installed the Yoast SEO plugin in the Recommended WordPress Plugins article of our Complete SEO Guide Box. If you need a primer about configuring the breadcrumbs, navigate to our Yoast SEO Plugin Configuration Guide. Check the “Advanced: Breadcrumbs” section.
If you’re using Astra, you should first try enabling Yoast SEO Breadcrumbs with our Astra WordPress Theme Customization Guide. In the guide, navigate to the “Adding Breadcrumbs Navigation Bar” section. If it didn’t go well, try using the functions.php.
Currently, in your “functions.php” file, you should have only the “styles.css” enqueue function. This is, of course, if you follow our Complete SEO Guide Box from the beginning. If not, you should figure out where it is best to add the Yoast SEO Breadcrumbs function in your child theme’s “functions.php” file. At the end of the file, it should be fine.
This is the current code of “functions.php”:
<?php
// Embed the styles.css from the parent theme to the child theme and style.css of the child theme. Should be always on top of functions.php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
?>This is the function that we will add if we have the Astra theme:
// Yoast SEO Breadcrumbs that hook at the end of the header
// 20 is the queue priority number of the function in the function list of the "astra_header_after".
// Means it will be 20th to execute, so you can move it visually up or down inside the hook by changing the priority
add_action('astra_header_after', 'yoast_breadcrumbs_hook', 20);
function yoast_breadcrumbs_hook(){
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
}The hook “astra_header_after” is specific to the Astra Theme, meaning that adding Yoast SEO Breadcrumbs to WordPress will appear right after the Astra header.
If you’re not using the Astra theme, you will probably need to find the best hook for your specific theme or use “wp_head” WordPress default hook to place the Breadcrumbs inside <head>. Of course, you must test how it will look in your specific theme.
This is how the hook function will look with WordPress “wp_head”:
// Yoast SEO Breadcrumbs that hook at the end of the header.
// 20 is the queue priority number of the function.
// Means it will be 20th to execute, so you can move it visually up or down inside the hook by changing the priority
add_action('wp_head', 'yoast_breadcrumbs_hook', 20);
function yoast_breadcrumbs_hook(){
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
}This is just an example, so we’ll place the function with the Astra header hook after the “styles.css” enqueue function. Now the “functions.php” should look like:
<?php
// Embed the styles.css from the parent theme to the child theme and style.css of the child theme. Should be always on top of functions.php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
// Yoast SEO Breadcrumbs that hook at the end of the header.
// 20 is the queue priority number of the function in the function list of the "astra_header_after".
// Means it will be 20th to execute, so you can move it visually up or down inside the hook by changing the priority.
add_action('astra_header_after', 'yoast_breadcrumbs_hook', 20);
function yoast_breadcrumbs_hook(){
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
}
?>Read More
You can read more about Adding Yoast SEO Breadcrumbs to your WordPress Theme on the Yoast Website.
The current article is "6.10. Adding Yoast Breadcrumbs" of our Complete SEO Guide Box.
Previous Article: 6.9. Header/Footer Changes. Next Article: 6.11. Remove the Name Field
If you find any mistakes or have ideas for improvement, please follow the email on the Contact page.