Best Ways to Add Custom Breadcrumbs in Your WordPress Site
In this article, we going to see the best ways to add custom Breadcrumbs to your WordPress site. Breadcrumbs are very useful to show the existing page path to the users to understand where they are. These Breadcrumbs are playing one of the most important role in Search Engine Optimization (SEO) for your website. You can see the below screenshot how the breadcrumbs look like.
Breadcrumbs not only for User Experience (UI) it helps to boost your website in the search rankings. Google always sees your website in Structured Data format and this allows your website to increase your traffic.
Let us see a few ways to add the custom breadcrumbs in your WordPress theme. First, we see using the manual method because without plugin the website comes with good performance.
Display Breadcrumbs Using Functions Without Plugin
Without plugin is always best for your WordPress site, because it helps to increase your website speed. By using custom function here we going to display the breadcrumbs for all the posts and pages. Using the below code in Appearance » Theme Editor » functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
function the_breadcrumb() { if (!is_home()) { echo '<a href="'; echo get_option('home'); echo '">'; echo "Home"; echo "</a>"; if (is_category() || is_single()){ echo " » "; the_category (' » '); if (is_single()) { echo " » "; the_title(); } } elseif (is_page()) { echo " » "; echo the_title(); } elseif (is_search()) { echo " » "; echo '"<i>'; echo the_search_query(); echo '</i>"'; } } } |
To display the breadcrumbs use the below code in single.php, archive.php, & page.php template between the menu and content.
|
1 |
<?php the_breadcrumb(); ?> |
Example:
Once updated you can add custom style for the breadcrumbs which you like.
Breadcrumbs Using Yoast Plugin
If you already using Yoast plugin means it is simple to add the breadcrumbs in your WordPress website. Simply if you already installed the plugin just use the below code in your archive.php, post.php, page.php, or where ever with you like.
|
1 2 3 4 5 |
<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); } ?> |
Once you added the code enable your Yoast breadcrumbs in the plugin settings.
Instead of using function if you already using Yoast plugin, it helps.
Add Breadcrumbs Using WordPress Plugin
An alternative way to use breadcrumbs is by using the plugin. I recommend you below Breadcrumb NavXT plugin to use in your WordPress website. The below plugin is a top rated plugin and it is easy to use in your site.
By using this plugin you can either show the breadcrumbs use through Widget or using the below custom code in your single.php template.
|
1 2 3 4 5 6 |
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div> |
Conclusion:
I hope this article will help you to fulfil your WordPress breadcrumbs requirement. Here your comments are welcome and if you loved this article share it with your friends.
