jump to navigation

Adding Breadcrumb navigation on WordPress May 27, 2011

Posted by Tournas Dimitrios in Wordpress - 3.

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>



1. MB - May 5, 2012

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

tournasdimitrios1 - May 5, 2012

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 .

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s