Adding Breadcrumb navigation on WordPress

Adding Breadcrumb navigation on WordPress May 27, 2011

Posted by tournasdimitrios1 in Wordpress - 3.
trackback

Breadcrumb navigation is a visual representation of where you are in the site . A common format Home | Category | Article . This will emphasize quick navigation for visitors on a WordPress Blog . Fortunately for us Breadcrumb NavXT is a WordPress plugin compatible with WordPress versions 3.0 and up .

Just to mention WordPress.com (free version ) doesn’t support the ability to add plugins on your Blog , you have to pay for this service . In contrast , an WordPress installation on a Hosted server has the freedom to customize the application .

Enabling the Breadcrumb navigation is really simple :

Just install the plugin on your WordPress installation
- Manually : Download the zip file -> unzip -> Copy the folder to your server’s WordPress installation -> WordPress_Root_Dir\wp-content\plugins
- Automatically : Admin panel -> plugins ->Add new -> Upload -> navigate to the zip file
Activate the plugin : Admin panel -> plugins -> Select this plugin from the list and activate
Customize the plugin : Admin panel -> Settings -> Breadcrumb NavXT
Some WordPress Themes will display the Breadcrumb automatically , some other need an extra configuration . Open with your favorite text-editor the following file :Wordpress_Root->wp-content->Theme_Name_Folder -> header.php
and paste the following code

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

Comments»

1. MB - May 5, 2012

You can’t just enter this ANYWHERE in header.php
how about explaining that?

tournasdimitrios1 - May 5, 2012

@MB
Usually , header-template files have simple code structure . A basic knowledge of HTML and PHP language is adequate to achive this modification .
The following code-snippet is taken from WordPress Twentyeleven header-template file , it embeds the header-picture into the web-page .

####### Here goes the code for enabling the Breadcrumb navigation #####
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
####### And/or here goes the code for enabling the Breadcrumb navigation #####

We could just copy-paste the code before/after the header image to embed the breadcrumb navigation menu .

Tournas Dimitrios