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.
Visit our website at http://www.byobwebsite.com/ for more video tutorials on building and customizing your own Thesis themed WordPress website.
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.
For the lesson and full video transcript visit: http://www.byobwebsite.com/answers/breadcrumb-navigation/
Loading...
17:43
Introduction to Breadcrumbby askalibrarian733 views
thanx for taking your time, and uploading this vid
oreomelo 5 months ago