Now that we’ve created the HTML method that outputs the content for the Thesis 2 Accordion Slider box, we need to go back to the template where we’re displaying it. So we’ll go to the Home Template and come down to our Accordion Slider.
Add Query Box to the Slider
Now what we’re going to do is add a Query Box. Those of you who have used my BX Content Slider Box, it behaves very much the same way. So we’re going to take our Query Box, drop it in here. Then we’re going to get rid of this extra stuff.
Setup WP Featured Image
We’re going to take our WP Featured Image, move it up. Our WP Featured Image gives us the choice of choosing this Accordion Slide image size. So we’ll choose that. Leave it at no text wrap and we’ll leave it link image to the post for the moment, I’m not sure if that’ll break it or not. Then I’m going to make our headline an h2.
Add unleash_slide Class
Now, remember there’s some additional HTML we need to add to this. If we look at an instance here with a slide, it requires this “unleash_slide” for each slide. So we have to come back over to our Query Box and add unleash_slide to it.
Add unleash_caption Class to Headline
Then if we’re going to put text in there it requires this “unleash_caption” be added to that headline.
Post Type of the Slides
So we’ve added HTML, we’ve added the right image size, the only thing we haven’t set up is a Query Box. So we’ll come back over to our Thesis Skin Content.
But first I want to talk about the slides. I created a bunch of slides when I demonstrated creating this post type called Secondary Content and so I’m going to use that post type for my slides.
You could use posts, you could use anything you want really. It doesn’t really matter what you’re using but I chose to do it this way. If you look at my slides they’ve got a title, they’ve got a little bit of content and they’ve got a featured image.
Set Options in the Query Box
Let’s come now down to Thesis Skin Content and set the options in my Query Box. I’ve got 2 here and I don’t know which one it is unfortunately so we’re going to have to go back to the Skin Editor and rename this one to Slide Query Box. Say okay and save the template.
Let’s reload this and go to Slide Query Box. We’re going to choose Secondary Content because that’s where I’ve got my slides. We’ll take Recent Secondary Content and put 5 slides in there. Hit Save Options.
Review the Slider on the Site
Let’s come back over to our site and here is our slider with the images sliding in and out. You don’t want to click there because that prevents you from navigating so we’ll take that off, save the template, reload this.
Now, notice how it’s not showing up? I spent hours trying to figure this problem out and it will be figured next time we meet but for some reason this is not firing until window resizes. As soon as the window resizes it fires properly and then it works but it doesn’t work automatically. But now you can go through the slides like this.
Change Color on Controller
There’s also a little controller down here for this it’s just that the text is white and we could just change that here. Come over to our animate.css that we just changed and we’re looking for the unleash_controls. This must be it here, unleash_buttons.
So if we say 000 and upload this, reload our page, now you can see the controls and you can move through them. You can pause the slide, you can get it going again, those are automatically added.
Isn’t that interesting although the text is not white. What is preventing that text from being white? H2 must be getting our Query Box headline, it’s getting its colors from the Query Box headline rather than the just getting it from the body. I thought we had an “unleash_caption” color specified. I guess not, my mistake it’s not done.
Options We’ll be Adding Later
Obviously, there’s a lot of built-in things here like colors that you don’t necessarily want to keep. You want to give your end user some control over that without requiring them to edit the CSS file. So that’s one of the big things we’re going to do next time, is create a set of options that lets them decide how big the image is and decide what colors we’re using for these kinds of things.
Also, if you look at a live preview example, he’s got all kinds of cool stuff like this animation so we’re going to provide ways to add that kind of animation to content. But it was clear to me that there was no way to get all the way through all that work in 2 hours or even 3 hours. So all the fun with options will be next time.
In the meantime we have something that works except it requires a window resize event before it actually starts to work and really, I don’t know why that’s the case. I’ve got a weird thing happening on this website too. Notice how this all of a sudden changed? Now all of a sudden I’ve got a post in here even though those aren’t posts.
It didn’t occur to me that I should test this on a different website to see whether or not my oddball problem will go away. It may be it’s really my oddball problem.
I tried a whole bunch of different things although why it didn’t occur to me that I should try it on a different website, I don’t know. But I’ve got some other troubleshooting that I can do before I give up on it. I know it works because I’ve seen it working so something I’ve done here must be wrong and I just don’t know exactly what it is.
As hairbrained as this sounds to me it may be this order where he’s got jQuery, modernizr, 2 CSS files and another jQuery. That order might actually be significant and if that’s the case then we’re going to have to do something really creative to fix it.
Now, probably the creative thing to do rather than try to change the way WordPress behaves would be to try to change the way his jQuery unleash behaves but I’m not absolutely certain of that.