Add Breadcrumb in WordPress without Plugin
In WordPress, breadcrumbs played an important role on the post page and also it’s help user to go back to previous page or home page. It make clear to user from where he/she come’s from, and where he/she right now. Breadcrumbs are navigational links, normally showing at the top of posts and pages. It is used to display all the pages, category and parent page links leading from the homepage. There are a number of WordPress plugins are available for adding breadcrumbs on your site, But i personally recommended you it’s not a wise choice to use any plugin for a simple task, which you can done by a simple code snippets.
Here is the code for ADD or display breadcrumb on your WordPress site without Plugin.
We’ve created a function called get_breadcrumb_w3reign() to generate the breadcrumb links. You only need to add the get_breadcrumb_w3reign() function code in functions.php file of the current theme.
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 26 27 28 29 30 |
function get_breadcrumb_w3reign() { echo '<ol>'; echo '<li><a href="'.home_url().'">Home</a></li>'; if (is_category() || is_single()) { echo "<li>"; echo " » "; the_category(' • '); echo "</li><li>"; if (is_single()) { echo " » "; the_title(); } echo "</li>"; } elseif (is_page()) { echo "<li>"; echo " » "; echo the_title(); echo "</li>"; } elseif (is_search()) { echo "<li>"; echo " » Search Results for... "; echo '"<em>'; echo the_search_query(); echo '</em>"'; echo "</li>"; } echo "</ol>"; } |
Now Display Breadcrumbs in single.php file:
Call the get_breadcrumb_w3reign() function in your theme single.php file and others files where you want to display the breadcrumbs on your WordPress site.
1 |
<div class="breadcrumb"><?php get_breadcrumb_w3reign(); ?></div> |
Styling Breadcrumbs – You can style according to your theme look:
This CSS helps to style the breadcrumbs links.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.breadcrumb { padding: 5px 10px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; } .breadcrumb ol{list-style-type:none; padding: 0; margin: 0;} .breadcrumb ol li{display:inline-block; list-style-type:none;} .breadcrumb a { color: #428bca; text-decoration: none; } |
Once you add breadcrumb to your WordPress site, breadcrumbs would display. Please share your suggestion and comment below if you found other solution.
[paypal-donation]
Thanks a million that code worked brilliantly. Your code is very efficient! Is it possible to display parent pages as well?
Hi, can you explain why is there a ‘nofollow’ here?
echo 'Home';
Hi Ash,
First of all thanks for the good catch, I have done some research on it and read some article regarding the same. After that i have Updated the above code snippets now. The Breadcrumb node should be follow.
It depends what your goal is and what the breadcrumbs represent. I would say that for most wordpress sites nofollow on breadcrumbs is probably a nonissue.
Nofollow is also important because page rank flows evenly between links on the page. So if you have three links that are really important to you and then a hundred comments with random websites in them, you don’t want page rank getting split 103 ways.
Now your question. If the breadcrumb items are important for search engines then have them followed. If you don’t care about your breadcrumbs getting indexed then nofollow them. In personal opinion after some research, Breadcrumb node should be follow to index.