Adding Breadcrumb Navigation To The WordPress Blog

After replacing the default header and footer of your blog you end up with the nice blog, it is possible to navigate using widgets and to get back to the main blog page by clicking the link in your main navigational menu, but the whole thing doesn’t feel complete.

Adding breadcrumb navigation is one way to solve this – it can be placed wherever you like so that your visitors always know where they are and can easily navigate to where they want to be.

To accomplish this task quickly I used Breadcrumb NavXT plugin – there are others, may be better ones, but this one had nice reviews and it does the job. Just go to Plugins > Add New, search for Breadcrumb NavXT and click install.

Again there are few things to tweak, especially if you installed the blog as part of your website:

1. If there is something else on your website aside from the blog – go to settings and change Home Title from “Home” to “Blog”, otherwise your visitors will get the impression that the link leads to the homepage of your whole site, not the blog.
2. Now we need to make the plugin work, here is the code suggested by the plugin developer:

   <div class="breadcrumbs">
       <?php if(function_exists('bcn_display'))
       {
           bcn_display();
       }?>
   </div>
   

   Basically it calls a function that renders the breadcrumb navigation – nice and simple. Now open your header.php and insert this code right at the bottom of the file after the opening main div, so that it will be shown at the top of your content area (or you can put it wherever you want). Upload the file to the server and click around some of the blog pages – congrats, it works!

3. Now open your fixer CSS (the one that loads last) and put some rules for .breadcrumbs element, something like that:

   .breadcrumbs {
       margin: 0 34% 9px 7.6%;
       width: 58.4%;
       font-size: 10px;
       text-transform: uppercase;
   }

   In the end your breadcrumb navigation should blend in with the rest of the elements.

4. So, everything seems to be perfect, one thing looks kinda ugly though – when you hit the main page, you’ll see an unlinked home title (probably the word “Blog”) – it looks lonely and creepy, so we don’t want it there. Unfortunately there seem to be no way to disable main page breadcrumbs in settings, but it’s easy to hack the plugin into behaving the right way.
   And while we are here, we’ll solve another problem – suggested code checks if the function exists before calling it (who knows where we put this snippet), but what if function doesn’t exist? There will be an empty div.breadcrumbs left, which is not cool, especially in our case – we already styled the .breadcrumbs div by adding margins, so what we want is breadcrumbs on all pages except for the blog homepage, here we want it to disappear completely. Here’s how we do it:

   <?php
       if(
       (!is_front_page())
       && (function_exists('bcn_display'))
       )
       {
   ?>
   <div class="breadcrumbs"><?php	bcn_display(); ?></div>
   <?php
       }// end if
   ?>
   

   What we do here: we use WordPress function is_front_page(), that returns true if we are at the homepage, to disable the breadcrumbs together with the case if no bcn_display function exists. We also put the whole div inside this if statement so that if the snippet is called from the homepage or no bcn_display function exists there will be no trace of breadcrumbs whatsoever – again nice and simple.