Latest NewsBlog Detail

Single Post

Add Breadcrumb in WordPress without Plugin

Add Breadcrumb in WordPress without Plugin

  • WordPress
  • no responses
  • 0 Views
  • 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 "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        the_category(' &bull; ');
        echo "</li><li>";
            if (is_single()) {
                
                echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";
                the_title();
               
            }
        echo "</li>";    
    } elseif (is_page()) {
       echo "<li>"; 
       echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
       echo the_title();
       echo "</li>"; 
    } elseif (is_search()) {
        echo "<li>"; 
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;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.

Tags
Sarker Allex
Sarker Allex

Co-Founder & Director at Prokash IT

Provesh is Co-Founder and Director at Proveshit. He is responsible for managing, growing open source technologies team and has spearheaded more than 250 projects in Salesforce CRM alone. He provides consulting and advisory to clients looking for services relating to CRM(Customer Relationship Management) and ECM(Enterprise Content Management). In the past, Pratyush has held consulting roles with various global technology leaders, such as Globallogic & HCL in Bangladesh. He holds an Engineering graduate degree from Bangladesh Institute of Technology, Roorkee.