close
Breadcrumbs are navigation links, used to display all the pages links leading from the homepage. Basically, it is placed at the top of the page and helps to backward navigation. In WordPress, breadcrumbs played an important role on the post page. Many WordPress plugins are available to adding breadcrumbs on your site. But we recommend you to use our simple code for display breadcrumb on your WordPress site.
You can easily display breadcrumb on WordPress site without any plugin. In this tutorial, we’ll show you how to create and display breadcrumb in WordPress.
We’ve created a custom function called get_breadcrumb() to generate the breadcrumb links. You only need to add the get_breadcrumb() function code in functions.php file of the current theme.
/**
* Generate breadcrumbs
* @author CodexWorld
* @authorURL www.codexworld.com
*/
function get_breadcrumb() {
echo '<a href="'.home_url().'" rel="nofollow">Home</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 " » Search Results for... ";
echo '"<em>';
echo the_search_query();
echo '</em>"';
}
}
Call the get_breadcrumb() function in single.php file and others files where you want to display the breadcrumbs on your WordPress site.
<div class="breadcrumb"><?php get_breadcrumb(); ?></div>
This CSS helps to style the breadcrumbs links.
.breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; } .breadcrumb a { color: #428bca; text-decoration: none; }
Once you add breadcrumb to your WordPress site, breadcrumbs would display like the below.
Do you want to get implementation help, or enhance the functionality of this script? Click here to Submit Service Request
Thanks, another request for how to include the parent category, please!
How can I turn this function into a shortcode to display on a front-end builder.
for anyone looking for a shortcode version:
add_shortcode( ‘your_shortcode_name’, ‘get_breadcrumb’ );
add this to your functions.php (or where you added the above code).
Thanks for the help.
I’m looking to have a (> back ) breadcrumb on posts that link to the post’s category page.
My page/post titles are incredibly long and tend to run over onto multiple lines.
Is there a way I could change the last part of the breadcrumb to the “slug”
Example:
HOME>SPORTS>BASEBALL>PAGE-SLUG-HERE
It was very useful to me. Thanks a lot.
Thanks a lot. it worked for me.
Incredible Solution. Thanks a lots for sharing..
Thanks, It’s woking
How to make Responsive this code?
this is very helpful .
Edited you function to display the sub categories with the parent category beforehand. Also your version seem to show all the catogories the post of the current query have. I mean, if you are in the archive.php file there are posts with several categories in the current quey, your breadcrumb will show all those categories, whereas my version will only show the queried object. Thank you so much for the code anyway, I’m tring to find a bread crumb that will show the actual route the user is taking…
PS. my code is probably horrible… sorry about that:
/**
* Generate breadcrumbs
* @author CodexWorld and github.com/molinerozadkiel
* @authorURL http://www.codexworld.com
*/
function get_breadcrumb() {
echo ”;
echo ‘Home‘;
if (is_category()) {
echo ” » “;
$category = get_queried_object();
$currentId = $category->term_id;
$currentNm = $category->name;
$categories = get_categories(array(‘parent’=>0));
foreach ( $categories as $category ) {
$cat = get_categories(array(‘parent’=>$category->term_id));
$parentId = $category->term_id;
$parentNm = $category->name;
if ($category->term_id == $currentId) {
?><a href=" “>term_id == $currentId) {
?><a href=" “><a href=" “><?php
}
}
}
}
} elseif (is_single()) {
echo " » ";
the_category(' • ');
echo " » ";
the_title();
} elseif (is_page()) {
echo " » ";
echo the_title();
} elseif (is_search()) {
echo " » Search Results for… ";
echo '"‘;
echo the_search_query();
echo ‘“‘;
}
echo ”;
}
Thanks a lot for your function, it has benn very helpful for me.
Amazing snippet guys! Thanks a lot for making it public.
Thank you very much
How do you show the parent for a page on this?
How to show parent category?
Thanks
How to show parent category?
Finally a great breadcrumb! Thank you so much! It works perfectly.
Is this method work for google search?
Thanks a lot it worked like magic.Nice tutorial