Single Post

Add Breadcrumb in WordPress without Plugin
- WordPress
- no responses
- Jun 22, 2019
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_prokashit() to generate the breadcrumb links. You only need to add the get_breadcrumb_prokashit() function code in functions.php file of the current theme.
function get_breadcrumb_prokashit() { 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>"; }
Styling Breadcrumbs – You can style according to your theme look:
This CSS helps to style the breadcrumbs links.
<div class="breadcrumb"><?php get_breadcrumb_prokashit(); ?></div>
Styling Breadcrumbs – You can style according to your theme look:
This CSS helps to style the breadcrumbs links.
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.