Build Your Own Business Website header image

Thesis 2.0 Technical Review – Part 9 – Box Example – Add Breadcrumb Navigation

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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.

Now it’s time to dive in and create a simple box from scratch in Thesis 2.0. The NavXT Breadcrumb Navigation plugin provides an excellent means of displaying a breadcrumb trail. In this section we write a box that allows the user to add the NavXT breadcrumb trail anywhere in a template. This demonstrates the construction of a very simple box.

Member: The next question I have is how would we go by creating a box like I mentioned today that say used page nav plugin. Like if I have a site that needs to use the page nav plugin.

Rick: Okay, well let’s use one I’m a little bit more comfortable with than page nav because it has its own set of complexities…

Member: I guess the idea would be to do something that you would normally use custom functions php for.

Rick: Exactly. So let’s do a breadcrumb. That, I can do. Let’s go to plugins and we’re going to add a new plugin and this is nav xt. Okay, there it is, breadcrumbs nav xt. That’s the one. So we go ahead and install that, activate the plugin.

Review the Breadcrumb Code

Let’s come over and look at the code that I use to add the breadcrumb… bcn. Custom functions php, there it is. For BYOB breadcrumbs… I’ve got this echo div class breadcrumb. If function exists, bcm display and then bcm display and echo div. So there’s my standard code that I’m using to add the breadcrumbs to my site.

Turn the Breadcrumb Code into a Box

Now we’re going to take this little piece of code and we’re going to turn it into a box. I’m going to start off with copyright date. I’m going to copy this, paste it… breadcrumbs. It doesn’t look like an a, does it? The text is too small for me to see easily.

So now, in this box.php, we’re going to call it nav xt breadcrumbs helper and nav xt breadcrumbs. There’s my class name, create a menu class for that class name. And this name is going to be byob nav xt breadcrumbs helper and…

Member: So now if you were to create a box with just those first 15 lines, that would basically create a box that would show up once you imported it into Thesis 2.0, that would have that main listed as the box.

Rick: Yes, absolutely.

Functionality of the Box

Member: Okay. So then whatever code you put below that essentially is the functionality that you’re ending with that box.

Rick: Right.

Member: It doesn’t necessarily have to call for any inputs so it could just be a purely functional one like what you’re probably doing right now.

Rick: Right.

Refine the Function

Member: So in this case, I am going to stop here. All I’m going to do is add a class name to this. So the only option is going to be class name…and then in terms of HTML, class name…we’re just going to delete these two because class name will equal this options class and then we come back over to our custom functions php file and copy this. Back over to box php.

Member: Now that echo div class equals breadcrumbs? Okay, I was just going to say…

Rick: Yeah so I’m going to… for the single quote, concatenation symbol, the class, concatenation symbol, single quote. So echo div class, if function exists, bcn display and then bcn display.

In fact, what I really ought to say is if function exists then do the echoing and the bcn display and if the function doesn’t exist, don’t bother. Don’t put anything in. Okay so if the function exists, bcn display that is essentially if the plugin is installed then echo this div class based on that class and then do bcn display and then echo the div, the closing div. Okay, this little box right here…

Why Create the Box Instead of Using custom_functions.php?

Member: So any kind of custom php you’re adding…So you’ve added, for example, before this was in custom functions.php and this was just its own function, a breadcrumb function. So now, I guess the idea is to kind of separate out the bulk of the custom functions and turn them into boxes, right? Because essentially, that’s what some of these are being used for. So any kind of custom php that we would be converting from that old file into say, a box, needs to be held within this public function HTML.

Rick: Well, the nice thing about it is that you can choose then, on a template by template basis, if it displays and where it displays.

Member: What I meant was systematically. We need to…

Rick: No, systematically, you don’t actually. Systematically, you could just as easily say inside the skin that you’re working on, whatever skin that happens to be and using your skin.php, you could say add action and specify a hook and have a display at that hook instead.

Member: Gotcha, okay.

Rick: So you don’t have to create a box. The reason you create the boxes is so that people are able to choose when and where to use it.

Member: Gotcha, okay.

Rick: And this might seem like a little bit more effort than this way but really, once you’ve got it done, there’s really not much to it….

Member: You can reuse it and put it in different places on different templates.

Rick: Right. So I’m going to just zip this up.

Output and HTML

Member: Just one other question here. What I meant was you’re placing all that code inside the public function HTML. If…

Rick: Well, that’s where the output happens. So that’s why it goes in public HTML, public function HTML because it’s going to be output as HTML.

Member: Okay. But I guess what I’m asking if they were something else that you were outputting, it would have to go in underneath that. You wouldn’t put it in a separate function, yes?

Rick: If you’re outputting it to the page then you would want to include it inside of HTML.

Member: Okay. Alright, gotcha.

Upload the Breadcrumb Box

Rick: And by definition, it’s going to be output where you drag the box because that’s where the HTML is output. So let’s just save it and zip it up and then upload it on our site. Come back over to Thesis, select boxes, upload a box, choose the file, add it.

Now it’s there so I need to add a check in the checkbox to make it work. Hit save boxes, now come over to my skin editor. Let’s go to regular page and on regular page, we’re getting rid of the feature box.

Add the Breadcrumb Box to a Page

So in content area, content area page, 2 columns left…I don’t think it really matters but come down here and go to nav xt breadcrumbs helper and let’s call it, I don’t know, top breadcrumbs. Add the box. Now you can drag it up to content area .page, save the template, go to a page and there it is.

Adding Multiple Instances of the Box on a Page

And you could do the same thing then adding it above the footer. So you just come back down here again and say nav xt breadcrumbs helper and bottom breadcrumbs.

Member: And this is where that multiple instance selection comes in that we were talking about earlier.

Rick: Right, exactly. So then drop it in the footer area .page, save the template.

Member: If that line of code wasn’t uncommented, what kind of error would that give you? Would it just crash the site?

Rick: What do you mean?

Member: You mentioned if you want to run multiple instances of a box on one template, you needed to uncomment a certain part of the code.

Rick: Well, it needs to have a name so it’s up to you. If it doesn’t have a name then you can only have one instance of it.

Member: Okay so then maybe one, okay. I was just wondering what happened, I guess. Stupid question.

Rick: I don’t really know what would happen. I’m guessing that it might crash. It might remove one instance of it.

2 Comments… add one
2 comments… add one
  • slstay January 10, 2013, 3:58 pm

    Did you ever publish this box to your site? I can’t seem to find it.

Leave a Comment