Build Your Own Business Website header image

Creating Breadcrumb Navigation

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This video will show you how to implement “breadcrumb navigation” on your site.  We install and configure the NavXT plug-in.  We also describe the code needed to add the breadcrumb navigation to our page.  That code is included below.

Video Transcript

Rick: First, I’m going to start off with Pam. Pam, I’m going to un-mute you. Okay, are you there?

Pam: Can you hear me?

Rick: I can hear you. It’s a little funny but go ahead and explain your question about the navigation.

Pam: Well, I’m a raw beginner so I don’t know what I’m doing and I’m probably asking a very basic question. But I wanted to know how you create that breadcrumb list at the top of the page right under your Nav menu.

Rick: Sure. And so if we, for example, if we go to Video Lessons and you see this… you can go to Home or you can go to one of the video lessons, you can see that there’s Home and then Video Tutorials and then Start Building Your Website here and then Lesson 1 in this list of breadcrumbs. If you select on any one of those things, it does take you to you know, the page inside that breadcrumb trail that allows you to go back to the beginning or back to some other place where you started. And so that’s question about the breadcrumbs and on this site, I have breadcrumbs both immediately below my navigation and I also have the breadcrumbs down by the footer.

And so, the first thing that you need in order to do this is a plugin called NavXT plugin. So if we go to the WordPress.org and plugins and then let’s see, breadcrumb…this is the one I like, the Breadcrumb NavXT. Now you could use Yoast and I did use to use Yoast but the nice thing about NavXT is it gives me a little bit control over the way the breadcrumb is displayed. And so, once you install NavXT, you have to do something though because it doesn’t automatically get added to a page. So you have to create a function to add it to your page. And we take a look at my custom functions_php file in NetBeans. This is the function that I use to add NavXT to all of my pages. And so I have 2 add actions first, right? I add this function to the Thesis hook before content box and I add the same function to the Thesis hook before footer. So that’s where it displays both times because I’ve had 2 add actions. And then that function is ask a question first: Is it a page that I don’t want it to display on? And so I don’t want breadcrumbs on my front page. I also don’t want breadcrumbs on a couple of other pages and I don’t actually remember what those pages are anymore but those are probably sales page or something where I want to minimize the amount of information on some page.

If it’s the front page or if it’s a page in this array then, I just want to echo out of space. So all it does is place a space on the page and since it’s just an empty space, it doesn’t get rendered and nothing really happens.

But if it’s not one of those pages, then I want it first to echo an HTML div class to wrap the function in. In that way, I can then assign styles to the display because it’s inside this class. So I created div with a class of breadcrumb and then I have one more function inside there. And I asked whether or not the function exists. And that function is bcn_display and now I don’t know why bcn is the NavXT breadcrumbs but nevertheless, that’s their name for the function inside of their plugin. And so if that function exists, then it’ll employ bcn_display which is the breadcrumb. And then we close it off with a div.

Now anytime I interact with a plugin like this and the plugin requires code to be added to the page, I always want to ask whether or not that function is there. Because if I just put in bcn_display here but I had uninstalled that plugin, it would break my site because bcn_display would no longer exist.

And the question is – is there any chance I’ll cut and paste the code somewhere for you to grab? And yes, I will include this code with a video answer here later on but for grins, I’m just going to go ahead and add it to a forum post too so that way, everybody could have access to this. For the time being, I’m going to do that under General Thesis Questions. I’m going to probably move this to Live Answer code and create something new but for the time being, I’m going to add a topic. I’ll call it Live Answer code and I’m going to say: “Here’s the code for the breadcrumbs.”

Now the only reason I’m making you watch this is because I want you to see how to wrap this code to make it look like code inside this. So I’ve just pasted that. For whatever reason, when I paste like this, it repeats the code twice and to tell you the truth, I don’t understand why. But then, we just go grab all that code and come over to this little thing called code language. Drop it down and pick php and then post a new topic. And so now you can see what it looks like. Right now, it’s colored and all the rest of that stuff and then if you want to grab the code, you can just click grab you know, view raw code. Cut this and paste this into your site and it’ll work just fine.

Okay so that is the answer to how to add it to the page. The answer… you’ve got one more thing to do though and that’s the configuration of that widget. And under Settings, Breadcrumb NavXT, you have really, a lot of potential settings here. And I think the thing that I change most often… oh yeah. For example, I wanted Live Answers to say “Live Answers” in the path so I included that as the root page.

There are a few things like that that you can set. Maybe this is beyond the scope of this conversation but there are settings inside this Breadcrumb NavXT that allow you to change some stuff up. You can see for example, I do place the Home in the breadcrumb trail and I call it “Home” and not something else. But you can call it something else or you can remove it altogether. And I don’t place the blog in the breadcrumb trail so this is not linked and I don’t use this because this is not… because I haven’t checked that.

So anyway… okay, so that’s Pam’s question about how to add NavXT or how to add breadcrumbs.

4 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
4 comments… add one
  • Loui Pedersen December 20, 2011, 4:55 pm

    Hi Rick,

    Where is that code? I can´t find it

  • Ian Date February 8, 2012, 5:27 am

    totally confused by this explanation- I must have missed some code altering tutorial somewhere….

    • Rick Anderson February 8, 2012, 11:02 am

      Ian, the code is fairly straight forward.

      • I’m adding the breadcrumb function to the top and bottom of each page
      • If it’s the front page or a couple of other pages where I don’t want them displayed it displays nothing
      • On every other page it checks to make sure that the plugin is still installed and active
      • If the plugin is installed and active then it adds the breadcrumbs

Leave a Comment