So the next thing we’re going to talk about is boxes because Thesis 2 introduces two new concepts. And they are skin boxes and skin packages. And boxes and packages are unique to Thesis 2. That is, they don’t exist in any other environment and they are installed and used in their own unique ways.
Efficiency Advantages to Boxes and Packages
There’s a real efficiency advantage of having boxes and packages. One because they add dynamic behavior to your site but they do so with reusable code so that there’s a lot less code that gets loaded when Thesis is loaded because each box shares a bunch of code.
And each package is only loaded when the admin screen is being used and otherwise, it isn’t loaded at all when a web page is being used which means that it significantly reduces the resources necessary in order to display a webpage.
The standard WordPress plugin gets loaded every single time a page is loaded and typically, the plugins do not share code. Even though you may have several plugins that do the same thing or do very similar things, they nevertheless have their own blocks of code that do it. And so your site takes up more memory. There’s a little bit more processing. There’s just a fair bit more work that the server has to do with plugins than it does with boxes and packages.
Additional Complexity in Using Boxes and Packages
However, it also adds a little bit of complexity to the whole system because it used to be, all you need to do was know how to upload a theme and upload a plugin. So you had themes and plugins to install and nothing else. Well, with Thesis 2, now you have skins to install and boxes to install and packages to install. And each of them install separately and in a different location. So it does add a little bit of complexity to the process.
What a Thesis 2 Box Does
But just like a plugin, a box is a Thesis 2 specific module that adds functionality to your site. Now it often results in a new box showing up in the HTML section of your Skin Editor but it doesn’t necessarily do that.
Let’s come over to our Skin Editor for a moment. Not every box you install is going to create a new box that can show up here. Some of them will maybe create only an admin screen and some of them may not create any extra interface at all but just does something specific for you on your site like a plugin does.
Boxes are very similar to plugins except that they share a code base with Thesis and they only work inside of Thesis.
Use Select Boxes to Upload and Save Boxes
And so if you’re looking at your boxes menu, well, by default you really only have menu item and that’s select boxes. And this select boxes is very much like the plugins dashboard. You have the ability to upload a box and to save boxes and right now, there’s nothing in here so there’s nothing for us to look at.
Upload and Install the BYOB Multilevel Drop Down Responsive Menu
What we’re going to start off by doing is uploading a box and we’re going to upload the BYOB Multilevel Drop Down Responsive Menu. So in order to do that, we actually have to go over here first. We’ll go to plugins, boxes and packages for Thesis theme 2. And then this is a combination box and package so it’s up here and it’s this one here, BYOB Multilevel Drop Down Responsive Menu for Thesis 2.
We’re going to start off by downloading the box so we’ll right click on that box. We don’t have to do that even here in this case, just click on it. The difference between the box and the package is that the box name is BYOB Multilevel Drop Down Responsive Menu and the package is BYOB Multi Drop Down Responsive Menu Style.
We’ve downloaded this. I’m now going to remove it from here and add it to my downloads section on my business website. Just paste that there and then from these select boxes dashboard, I’m going to upload a box, choose the file and pick that file.
Open it, add the box and look what happened. The box is not installed. And you know why the box is not installed? Because I didn’t actually pick a box. I actually picked a different zip file. I picked the Black Studio TinyMCE widget plugin. So that’s something to keep in mind is that sometimes, when this stuff doesn’t work, it’s because you’re trying to upload the wrong thing.
Let’s just refresh this. Choose the file. The same thing would happen if you chose the skin here but what we want is this multi dropdown responsive menu. You add the box. Now it’s installing the latest version. The box was successfully installed and we have the box installed.
Activate the Box
Now in order to activate the box, you have to put a check mark beside that and hit save boxes. And once you’ve done that, this box has been activated. If you refresh the page, the activated box is white and the non activated box is gray.
You may have boxes in here that you have not activated or you’re not using at the moment or you were testing and deactivated. And they’ll be a different color that will help you determine which is which.
This box, similar to plugins, has the name of the box, the version of the box, the name of the author and then a description of what the box does. That’s what’s in your list here of box.
And since this has been checked and saved, it’s actually going to result in a box that can be added to the skin. So if we come down here to the add box section, now you see there’s this BYOB Multilevel Drop Down Responsive Menu box.