Good morning everybody and welcome to this special seminar entitled Advanced Thesis 2.1 Box Development. This is actually going to be a two-part seminar because of the extent and complexity of what can be taught in a 2-3 hour time period. So today we’re going to do half of it and we’ll do the other half another time.
Use a Box to Implement and Display Slides
We are building a jQuery Accordion Slider that is based on or implements the jQuery plugin called Unleash 3 that I’ve purchased from Envato. This is a simple jQuery plugin, it’s not a WordPress plugin or anything like that.
What we’re going to do is create a box that implements this and then allows us to display slides in an accordion fashion. You can see kind of what that looks like here. As you click on these, all kinds of interesting stuff can happen. And some of that is actually fairly advanced which is why we’re going to take more time to complete the seminar.
Build a Responsive jQuery Accordion Slider
So this is what we’re going to be creating. This is a responsive slider and it changes as the window size changes.
There is a certain amount of prerequisite knowledge in order for you to get the most out of this seminar. I’m hoping that pretty much everybody here in this online seminar has already watched and reasonably understood my earlier Thesis seminar Introduction to Customizing Thesis 2.1 Using PHP. That seminar introduces the concept of the Thesis box and goes through all of the basics of creating a Thesis box, the Thesis 2 Box API.
Anyway, that seminar goes through a lot of material that I’m not going to repeat in this class and I’m assuming that you’ve already worked your way through the examples here.
In order to implement this jQuery plugin there are a lot of moving parts. I have already downloaded this plugin and unzipped it. If you do the same thing, open up documentation.html you’ll see there is a description here of what you need to do.
You need to add jQuery, you need to add a customized version of modernizr.js, you need to add the specific jQuery stuff for the slider and then there are a couple of CSS files that need to be added. So you’ve got scripts that you need to add and you’ve got CSS that you need to add.
Fonts for the Site
It’s not immediately apparent from this but you also have fonts that you need to add. This plugin is designed to be used in a static HTML website and so it can use relative URLs for calling those fonts from the CSS files. But because we’re working in WordPress, we don’t have that ability so we actually have to take an extra step and add the fonts properly to the site.
You also have to create HTML that reflects the HTML that the jQuery plugin is looking for. In particular, you have to create a wrapper with a class “unleash_container” and then you need to create a wrapper for each slide with a class “unleash_slider”. And each slide has to be wrapped in a class “unlease_slide”. If you’re going to use the caption or the content then you have to wrap that as I noted.
It’s not particularly difficult HTML but this HTML also has to be implemented inside of this box in order for this box to work. We’re going to be using the Query box as the Thesis element that decides what images to show and what captions to show. And we’ll be able to add these classes to the Query box in the way that we want them to be added.
Nevertheless, we have this HTML that has to be created and so those are really the 5 things – we’ve got scripts, we’ve got CSS, we have fonts and we have HTML that we have to integrate in this box.