Code Examples

This section provides code snippets to aid in completing some commonly encountered situations.

CSS Styling

Breadcrumb NavXT does not ship with provided styling. Any CSS styling should be placed in your theme’s style.css file. 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:

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.

Since direct class access is no longer officially supported, examples of directly accessing the bcn_breadcrumb_trail class are no longer provided within the documentation.


440 thoughts on “Documentation

  1. Hi John,

    Thanks for this good plugin. Now I have one below query.

    On my news details page currently news slug is displaying into url. Now I want to display this slug into breadcrumb by using this plugin. I have used some bcn_display function but it is not displaying.

    Can you please help me and let me know which func/code I can apply on news details template so news slug will display into breadcrumb.

    I am waiting for your reply.


  2. Hi there,

    I’m using your plugin within our companies intranet and there are some problems with categories und sub-categories.


    The breadcrumbs for an article in sub-sub-cat_A3_2 are displaying correctely BUT the breadcrumbs for an article of sub-sub-cat_A2_1 not (same category structure). In this case there is only sub-cat_A2 displaying, the rest is missing after opening the article…

    Can somebody help me?

    • Hi Nick,

      Is the post an explicit member of more than just the “sub-sub-cat_A2_1” category (e.g. an explicit member of “sub-cat_A2” and an explicit member of “sub-sub-cat_A2_1”)? If that is the case, I recommend changing the post to be only an explicit member of “sub-sub-cat_A2_1” (it will be an implicit member of the parent categories of “sub-sub-cat_A2_1”). You may also try the master branch of Breadcrumb NavXT on GitHub, its term selection behavior has changed slightly that may fix this for you.

      -John Havlik

      • Yes, the article was a member of more than just the sub-sub-category. I changed it so the article is explicit member of tha last category in the row and it works great! Good to know (explicit vs. implicit)

        THX A LOT! :)

  3. Hello,

    So far I love this plugin. I have one question st this time. Currently on our site, that is in development, all posts are classified under the category news. From the news page visitors can select blogs to read. For example when someone clicks a blog the breadcrumb will read home/news/blog title just as it should. The issue is though when someone tries to click the “news” link in the breadcrumbs it takes them to the page home/categories/news. This is not right. I want it to take the visitor directly back to home/news minus category. How can this be done.

    Thanks in advance

    • Hi Stephen,

      Breadcrumb NavXT uses the get_term_link() function to link to term archives (e.g. categories). You will need to hook into that function and remove the ‘/categories’ from the URL it returns. If you don’t want to affect every category link, you can always use the bcn_breadcrumb_url filter. See the documentation for examples of how to use that filter.

      -John Havlik

      • Hello John,
        could you please guide me to this function? I can’t find a get_term_link() anywhere in the plugin’s php files. And as a non-native speaker it is quite hard to understand every line in the documentation or settings helper texts…

    • In general, it is considered bad form to hide a category. It is possible, though you have to write a hook into the bcn_after_fill action and remove the unwanted category breadcrumb. To link all of the breadcrumbs in the breadcrumb trail (e.g. to link the current item, which is not usually linked), you need to ensure the “Link Current Item” setting is checked in the Breadcrumb NavXT settings page.

      -John Havlik

  4. Hi John,

    I like the plugin very much and was able to customise the looks of it very well. However, how can I hide displaying the current post title in the breadcrumbs? I tried reading the documentation but did not figure it out. There are also 4 websites describing it and none of the steps have worked.


  5. NavXT follows the path as defined in “reading settings -> posts page.”

    My website uses a custom home page, that I do not set in “reading settings.” Doing so, would override the custom page I built.

    Is there a hook or method of letting NavXT understand that a particular page is my main (one and only) blog page?

  6. Hi John –

    Your plug-in was exactly what I needed for my site… Easy to install, easy to configure. Thanks for this! I’m experiencing some weirdness w/ how the Titles of pages are carrying through to hte plug-in… it appears that most Titles include an indentatin directly after the title, which adds a weird space..

    Check this webpage for a sample: Website sample

    I checked your guide which details how to shorten the length of text displayed in breadcrumbs, however it still included that indent..

    Any ideas of what CSS styles I can apply to .breadcrumbs to close out that white space? Thank you so much for your assistance. Have a nice day!

    • Hi Joe,

      The issue here is that you have CSS style rules for the too generic .post class. These end up being applied to all elements with the class post on the page. This happens to include breadcrumbs representing posts (of any type).

      Also, I noticed you are using the deprecated <center> HTML tag. I strongly encourage you to move to a more modern way to center elements using CSS.

      -John Havlik

  7. Having trouble styling the breadcrumb links. Haven’t done CSS in a long time. I inspected the element and saw links are in a div class of breadcrumbs, with the breadcrumbs having classes of “home” “taxonomy” and “category”. I came up with:

    div.breadcrumbs a.taxonomy.category:link { color: #00ff00; }
    div.breadcrumbs a.taxonomy.category:visited { color: #00ff00; }
    div.breadcrumbs a.taxonomy.category:hover { color: #70DB93; }
    div.breadcrumbs a.taxonomy.category:active { color: #70DB93; }

    Nothing is working – tried a few different variations. Any ideas?

  8. Hey there, Does anyone know how to display the full title with all the pages.

    For instead of Home > Accounting I want

    Home > Accounting > Buisness accounting services > industry >child care

  9. Hello,
    in my website, only for some pages i need to add a custom word in the breadcrumb trail, between Home > and the current page.
    How can i do it?
    Thank you for your help

Leave a Reply

Your email address will not be published. Required fields are marked *