Documentation
Code Examples
This section provides code snippets to aid in completing some commonly encountered situations.
CSS Styling
Using either of the code samples for adding a breadcrumb trail to a blog will allow CSS styling by defining the style for the breadcrumbs CSS class. This is quite simple to achieve. For example, this blog uses the following code to style its breadcrumbs:
.breadcrumbs { font-size: 1.1em; color: #fff; margin: 30px 0 0 10px; position: relative; float: left; } This, in order of the attributes,
- Sets the font size to more or less 1.1 times the page’s base font size.
- Sets the color of the text to white (#fff is short for #ffffff).
- The margin for the div is set to 30px for the top, 10px for the left side, and 0px for both the bottom and right.
- The positioning is set to relative (the div is not absolutely set to a location on screen), this keeps Internet Explorer happy.
- The div is set to float (align) to the left side of the screen.
Sometimes it is advantageous to make the breadcrumb text smaller so that it does not overflow its allocated space in the theme. This can easily be done by specifying a smaller font-size using CSS.
Direct Class Access
Warning: Do not directly access the bcn_breadcrumb_trail class unless absolutely necessary. Higher level methods of access are insulated from changes in the bcn_breadcrumb_trail class between versions of the plugin. Directly accessing this class means you will have to keep up with these changes, if you don’t things will break.
Starting in Breadcrumb NavXT 3.0 the API changed for directly accessing the class. However, things are not too terribly different from before. For example to call the bcn_trail_class directly and have it display “Blog” on the main posts page, and to surround the current page’s breadcrumb with a span element:
if(class_exists('bcn_breadcrumb_trail')) { //Make new breadcrumb object $breadcrumb_trail = new bcn_breadcrumb_trail; //Setup our options //Set the home_title to Blog $breadcrumb_trail->opt['home_title'] = "Blog"; //Set the current item to be surrounded by a span element, start with the prefix $breadcrumb_trail->opt['current_item_prefix'] = '<span class="current">'; //Set the suffix to close the span tag $breadcrumb_trail->opt['current_item_suffix'] = '</span>'; //Fill the breadcrumb trail $breadcrumb_trail->fill(); //Display the trail $breadcrumb_trail->display(); } Remember that this needs to be within <?php and ?> for it to work.
Starting in Breadcrumb NavXT 3.0 the output does not have to be linked, great for the folks who want to use it in their HTML page title. This can be achieved using the following code (the code uses the default settings, but options can be set in a similar manner as above.)
if(class_exists('bcn_breadcrumb_trail')) { //Make new breadcrumb object $breadcrumb_trail = new bcn_breadcrumb_trail; //Setup options here if needed //Fill the breadcrumb trail $breadcrumb_trail->fill(); //Display the trail, but don't link the breadcrumbs $breadcrumb_trail->display(false, false); } In this last example, the power of the anchor templates will be demonstrated. Introduced in version 3.0, anchor templates allows complete customization of the anchors surrounding the breadcrumbs. For this example the current item anchor will have an added rel=”nofollow” while the page anchor will have a customized title.
if(class_exists('bcn_breadcrumb_trail')) { //Make new breadcrumb object $breadcrumb_trail = new bcn_breadcrumb_trail; //Setup our options //Customize our current item anchor with a rel="nofollow" $breadcrumb_trail->opt['current_item_anchor'] = '<a title="Refresh the current page." rel="nofollow" href="%link%">'; //Customize the home anchor $breadcrumb_trail->opt['post_page_anchor'] = '<a title="Visit the %title% page." href="%link%">'; //Fill the breadcrumb trail $breadcrumb_trail->fill(); //Display the trail $breadcrumb_trail->display(); } For anchor templates, two variables are available %title% and %link%. %title% will be replaced with the breadcrumb’s title, while %link% will be replaced with the URL to the page the breadcrumb is for.
Hi John,
Excellent plugin! I’m using it on a multisite installation, and am trying to figure out how I might add variables to the custom post type so that the name of the blog shows up in the trail:
Network home > Blog 2 > Category 1 > Post 1
Am I missing something, or maybe this doesn’t exist yet? Any help would be greatly appreciated!
-jennyb
Jenny,
Look at the “Home Title” setting under the “General” tab on the Breadcrumb NavXT settings page. You’ll have to manually enter the site’s name, but it will allow you to change from “Blog” to anything for the site home.
-John Havlik
Hi John,
Just left you the same message on another page because I was having trouble finding this one! So please just ignore!
Got it, however, it would be *awesome* if we could instead enter a variable, as this would alleviate the task of having to hand name each site. I would *love* that to be an automated task! Doesn’t seem like it should be difficult…? Ideas? You game?
Thanks!
-jennyb
Jenny,
There are plans for improved features/support for multi site setups in a future release (a network admin dashboard). I had originally said 4.0, however, there are other things I really need to get done for 4.0, so it is looking like it is going to get bumped. I’m not going to guarantee anything for 4.0, but it could be fairly easy to add a tag in for the site name in the settings (doing a settings revamp).
-John Havlik
Hi mtekk,
first of all, your plugin is awesome! now, i need to hide a category…for example:
home > parent cat > child cat > child child cat
i need to hide the first child category, or just disable the link at least. Can you help me?
There isn’t an easy way to do this. I strongly suggest you re-evaluate your site hierarchy and investigate the use of tags and custom taxonomies to supplement the category taxonomy in order to eliminate the need for a hidden category.
-John Havlik
Thanks for reply! sadly i can’t use tags as you told me because i already used for other things. Do you think is it possible at least deleting the link of the child category page?
I have a similar question. Can I have parent pages not link. So it is visable, but inactive. This is because the parent page just creates the menu, and has no content.
home > parent > child >
Hi mtekk,
Your plugin is so great, so easy to use.
But I can’t to do one thing and I wonder if that’s possible, if you could tell me.
For the page “Blog” which is showing the posts, when I select a category for the posts, the breadcrumb isn’t set.
I would like to have on this page : Home > Blog > category.
How could I do that ?
My homepage is a static page. It’s working everywhere perfectly.
Thanks a lot
i’ve resolved it with custom taxonomies! you were right! i didn’t know this wordpress feature, it’s awesome! thank again for support and the suggestion!
there is a good tutorial to use it, enjoy! Custom Taxonimies in wordpress 2.8
Hello,
Breadcrumb NavXT don’t work correctly with the plugin bbpress.
Bbpress have also a breadcrumb that can show :
Home › Forums › Title of one forum › Title of the topic
and Breadcrumb NavXT show only :
Home › Topics › Title of the topic
But that’s work correctly on the other ways :
Home › Forums
Home › Forums › Title of one forum
David,
This does not surprise me. The new bbPress plugin uses custom post types, which is cool. However, if I remember correctly, both “Topics” and “Forums” are custom post types. This is problematic with WordPress’ custom post types which are not really meant to be used in a linked-list fashion that bbPress uses them in (not saying this is wrong, just WordPress doesn’t really support it).
I haven’t had time to see what they are doing to generate their breadcrumb trail for the forums. But, I have a feeling that they have the luxury of knowing exactly how they are doing things and only worrying about themselves. I am very reluctant to add code to Breadcrumb NavXT to support a specific plugin. Not only can it add a ton of cruft, it also ties me to the release cycle of another plugin in addition to WordPress.
All of that said, it may be possible to setup some settings with what will be in 4.0/4.1 to get Breadcrumb NavXT to display as expected. But that still depends on how bbPress is doing things internally (which I need to check up on).
-John Havlik
we have install your Breadcrumb NavXT plug in and this is how it works!
home > page >1
that is it!
we want Home > page > Current page>
is that possible?
Oz,
Can you provide me with a link to an example site that has this issue?
-John Havlik
if your menu uses posts instead of pages e.g.
Home > Page > Post
you can try putting this in the post prefix text feild on the posts&pages tab
<a href="history.go(-1)" rel="nofollow">Back</a> >worked for me
Dear John, my crumbs pick up the path on one menu item but not another. Cannot figure what I am missing here, please could you give a pointer.
Full path (what we want)
http://manavodaya-uk.org.uk/courses/course-september-2011/
Home and page only (missing parent)
http://manavodaya-uk.org.uk/eight-steps-in-action/
Many thanks, Henry
Humble apologies, works a treat when page parent is set. Great xtension many thanks.
Hi,
love the plugin! one issue I’m trying to work thru though.
I’m using categories to structure my pages/posts.
So, I’m displaying the categories in the breadcrumb trail.
But I’m not actually using the category archive templates.
My breadcrumb trail looks like this (when your on a single post page):
Products > Microphones > 46A.E.
The problem is the two parent categories (Products, Microphones) link to the category archive templates (‘www.example.com/category/products/microphones/’) but I need it to link to the page (‘www.example.com/products/microphones’).
How do I fix this?
Is there a way call %link% and trim ‘/category’ from the beginning of it?
Thanks!
Brian,
The way to fix it is to use category archives. The other way to fix it is to figure out how to set the archive page as the parent of the post, and then select “pages” as the taxonomy for posts (this mapping is not a trivial task, and not for inexperienced programmers).
-John Havlik
Hi , this is really great plugin ! thanks for sharing it . I have one question – I like to use it as a “client section navigation”
So I need to always show whole client menu
If i have menu :
Client 1
-client1_child1
-client1_child2
-client1_child3
And Im on page “client1_child2″
I need to see
Home> client1 > client1_child1 > client1_child2 > client1_child3
always listed .
It is possible ?
Many thanks
Mike
Mike,
If you want to see Home > client 1 > client1_child1 > client1_child2 > client1_child3 then you must have client1_child3 be a child of client1_child2, which must be a child of client1_child1, which must be a child of client1. Remember, locational breadcrumb trails imply hierarchy, using them in any other manner is confusing to the user.
-John Havlik
John Thanks !
Sir,
How to add microdata / Rdfa or Rich Snippet to the breadcrumbs….
Thanks
Dakshim,
Look at the Schema.org page for Webpage microdata. They have an example for breadcrumbs. All you have to do is add the top of page declaration for following schema.org’s rule set and the itemprop for breadcrumbs on the div containing the breadcrumb trail.
Google’s RDFa/microdata breadcrumbs have been deprecated in favor of the simpler schema.org microdata format.
-John Havlik
Hi,
Thank you for a great plugin!
I have a question regarding using it with AJAX .
In one place in my site (under a certain category) I get posts using AJAX. In the method that returns the HTML, I call bcn_display(), but it only returns the root of the site, and not the whole path to the post.
What can I do in order to make the display function aware that its location is within a single post?
Thank you
Lea,
This is probably due to the way you are handling the AJAX request on the server side. If you are making your requests against the root page of the site, and are not setting the WordPress conditionals, Breadcrumb NavXT will think you are on the front page of the site. The way to fix this is to request the same URL as if you did not have AJAX for loading the page (a good thing to do in the event the user has JavaScript disabled). Then, make sure to hook in after the WordPress conditionals are set, but the page/headers hasn’t/haven’t been sent yet.
-John Havlik
Thank you very much!
Mtrekk,
Back in June there was this question but I couldn’t find an answer to it …
I can see how to remove the front page from the list but is there a way to remove the current page from the list if it is a top level element?
Thanks for a great plugin!
Daniel
Daniel,
You are talking about removing the current item from the breadcrumb trail? This question is covered in the Breadcrumb NavXT FAQ (the official response to all requests relating to items already in the FAQ).
-John Havlik
Hi,
Many thanks for providing wonderful plugin. I am novice and yet I could add it to the site. But I have one concern.
The breadcrumb is appearing three spaces below menu bar and just above the page heading. Would you please suggest the way. Another thing I liked in this site the way breadcrum is given colors red and black. Where do I have to make changes?
Thanks for your help.
ASR
Hi,
I got the code for changing the colors and padding to get breadcrums as I requested from one of the posts on this site. It resolved the issue.
Once again my thanks for your your work on this widget.
ASR
Hello John, awesome plugin. I’d like to run just a small setting or bug issue through you with Custom Post Types and the “Custom Rewrite Slug”. My Custom Post Type is “News”
I have a setup list this:
company.com/about/news/individual_news_title
where news is a custom archive page (archive-news.php)
I’ve set the “Custom Rewrite Slug” to “about/news”
“company.com/about/news/” shows the archive but the breadcrumb shows
“Home > news” while individual posts show correctly
“Home > About > News > The Custom Post Type New Title”
How to get Breadcrumb NavXT to correctly show the breadcrumb as in the slug? I mean “Home > About > News” for the archive page?
thanks in advance.
Dave,
Thanks for pointing this out. You probably want to give the SVN trunk version of Breadcrumb NavXT a try. I just made a change that fixed this on my testbed. The plan is to include this fix in Breadcrumb NavXT 4.0.
-John Havlik
Hi John, thanks for the suggestion. I guess I’ll live with the problem for now and wait ’till version 4.0 is out. I’ll just make a if / else statement on that particular page and output the breadcrumb manually. (If *this page* output a hand-coded breadcrumb).
Looking forward to version 4.0!
John,
Thanks for building what looks to be a great plug in. So far, however, I’m not able to have the breadcrumb reflect the proper path. Maybe I just haven’t set it up correctly.
Currently, the site url on which I would like the breadcrumb to reside exhibits: Home > PageTitle > Category > Category Name
My current setup gives me only this: Home > PageTitle
I’d like the breadcrumb to exhibit PageTitle > Category Name.
I know how to remove the home page from the display, but I can’t get the Category Name to display.
In regards to my intended use of the breadcrumb (a job board), I would prefer the Home page actually be an internal page which exhibits all of my category items (in my case a list of all available jobs). The Page Title link should filter out all data except the information relevant to a specific category (for example…a list of jobs under a specific category.)
So, I’m hoping the breadcrumb can look something like this:
You are currently browsing: All Jobs > Accounting/Finance
Thanks for any help you can provide.
Mark,
From what I can tell, you are using a page post type as an archive page and are have some extra code to pull in content. Breadcrumb NavXT will probably not work as you want it to in this type of a setup. It will figure out you are on a page post type, and just display the name for that page.
If you want the additional information, you need to change how that page is setup so it is an actual archive page type (maybe use a custom post type for the postings). Then there will be a few settings to adjust for Breadcrumb NavXT, but you should be able to do what you want then.
-John Havlik
I tried to use Breadcrumb NavXT, I opened link to current item, but I found that the link to current item is always to home page, how can I change it?
Tiger,
Prior to Breadcrumb NavXT 4.0, the current item link is just a blank anchor. This is meant to exploit the behavior of most web browsers, which will fill in the correct URL. In Breadcrumb NavXT 4.0, an actual URL will be generated.
-John Havlik
Hi John,
I have installed your plugin on my website http://www.native.ae and all is working fine, except on the Home page where the breadcrumb Home menu/text is showing above the “Integrated Security” section.
Please advise how to remove (or hide) it from the website’s hope page.
Thanks
Zed,
Use something along the lines of:
if(function_exists('bcn_display') && !is_front_page()){
bcn_display();
}
as your calling code. That should prevent the breadcrumb trail from appearing on the home/front page.
-John Havlik
thx for this great plugin. But I have troubles to design it. Tried your ccs example, but the plugin don’t use a css class. Maybe I didn’t unterstand something or doing something wrong? Maybe you can help me.
thx
I’d like to display the breadcrumb trail, and then below that the page title. This is what I currently have:
Crumb > Crumb > Title
—————————–
Page content…
This is what I’d like:
Crumb > Crumb > Page title
—————————–
Page Title
—————————–
Page content…
I’ve looked through the code, but don’t quite see how to accomplish this.
thanks for any help.
Tim
Tim,
If the breadcrumb trail is being produced properly, e.g. the Crumb > Crumb > Title, I’m not sure how the rest is related to the plugin. This is something I think you need to modify in your theme (possibly adding a call to
the_title();in an appropriate place within the loop).-John Havlik
Hi,
Thanks for a great plugin!
Just one thing I cannot get working.
I’d like to add a couple of words (unlinked) before Home, like:
This is a breadcrumb: Home > page > page
How do I do that?
Thank you
@mat, try this…
<div class="breadcrumbs">
Currently viewing:<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>
Hi there,
I have just installed Breadcrumb NavXT. And its working fantastic. Thanks for nice plugin. However, I have got a little problem. The breadcrumb links are placed exactly to the left of the window instead of the location where the Menu or body of the text starts form the left alignment. I think I am making you confused. If you visit this website http://www.beaconinstitute.co.uk – you can understand what I am trying to mean.
I have placed the Breadcrumb codes inside header.php.
Can you please help me out?
Many thanks
Muhammad,
You are going to need to style the .breacrumbs CSS class so that it is in line with the rest of the content.
-John Havlik