Creating Breadcrumb Navigation
http://www.byobwebsite.com/answers/br...
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."