Breadcrumbs are a navigational aid that not only help users understand the structure of a website but also provide an SEO advantage by linking back to previous pages. A well-implemented breadcrumb trail can encourage users to explore more of your website and decrease bounce rates, while also giving search engines more context about your site’s structure. In this guide, we will create a WordPress shortcode to generate SEO-friendly breadcrumb navigation.
Why Breadcrumbs Matter
In the context of SEO, breadcrumbs have a dual purpose: improving user experience and enhancing web presence. They provide a clear path for users to follow back to the root of their current location and offer search engines another way to understand the site structure.
Creating the Breadcrumb Shortcode
To avoid editing the functions.php
file directly and potentially risking site stability, we recommend using a Code Snippets plugin to insert your custom PHP code into WordPress.
Step 1: Install a Code Snippets Plugin
First, install a plugin that allows you to safely add custom PHP code. A popular choice is “Code Snippets.”
Step 2: Define the Breadcrumb Function
Once the plugin is installed, create a new snippet with the following code:
function seo_breadcrumbs_shortcode() {
// Check if any SEO plugin like Yoast is active and breadcrumbs are enabled
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} else {
// Otherwise, generate a simple breadcrumb based on the WordPress hierarchy
$delimiter = '»';
$home = 'Home'; // text for the 'Home' link
$before = '<span class="current">'; // tag before the current crumb
$after = '</span>'; // tag after the current crumb
if ( !is_home() && !is_front_page() || is_paged() ) {
echo '<div id="crumbs">';
global $post;
$homeLink = get_bloginfo('url');
echo '<a href="' . $homeLink . '">' . $home . '</a> ' . $delimiter . ' ';
// Add additional breadcrumb logic here for other content types
if ( get_query_var('paged') ) {
// Paginated archives and search results
echo ' (' . __('Page') . ' ' . get_query_var('paged') . ')';
}
echo '</div>';
}
}
}
add_shortcode('seo_breadcrumbs', 'seo_breadcrumbs_shortcode');
Step 3: Use the Shortcode
You can now use the shortcode [seo_breadcrumbs]
in your pages or template files to display the breadcrumbs.
Step 4: Styling the Breadcrumbs
Add CSS styles to make your breadcrumbs match your site’s design. Add these styles to your theme’s stylesheet:
#breadcrumbs {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
#breadcrumbs a {
color: #0275d8;
text-decoration: none;
}
#breadcrumbs .current {
color: #6c757d;
text-decoration: none;
pointer-events: none;
cursor: default;
}
#breadcrumbs .delimiter {
margin: 0 5px;
}
Conclusion
Adding SEO-friendly breadcrumbs to your WordPress site is an effective way to improve user navigation and boost your site’s SEO structure. With this simple shortcode, you can incorporate breadcrumbs seamlessly into your site. Remember to adjust the breadcrumb generation logic according to your specific site structure or integrate with your preferred SEO plugin if necessary.