Build Your Own Business Website header image

How to Put a Slideshow in the Thesis Header

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

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.

A member wants to know how to create a header that is similar to a site that has a logo on the left and a slideshow with changing images taking up the rest of the space to the right.  The images in this slideshow are not clickable, that is they don’t take you anywhere if you select them. The method we show for creating this is different than if you wanted the sliding images to be links to pages or more images.  We use the Thesis Header Image options to upload the logo and under Design Options set the header to link back to the home page. Then we add the slideshow using the plugin SH Slideshow. We place it in the header by adding a new function to the custom­_functions.php file and then style it with CSS.

Video Transcript

So this member asks how to create a header similar to this and what’s going on here is you know, you’ve got the navigation bar across the top and then you have a fixed logo. And then you have a rotating banner here and if you click on the images in that banner, it doesn’t go off anywhere. So it’s simply a banner or image that switches. And so that’s what we’re going to show you how to do here.

Now if you wanted this to… or this method is going to be different than if you wanted to go to say click on this and go to a page or go to a post or to have this thing automated so that you know, it automatically displays your latest post. That’s a whole different set of functionality that we’re going to work on right here. But I am going to show you how to use the Thesis header image options to upload this and then we’ll add this using a plugin.

So let’s go over and take a look at the site that we’re going to work on. This is and we’re currently working in Thesis 1.8 and WordPress 3.1. And so, if we go over to the dashboard here, the first thing we want to do is upload a header image. So if we select the Thesis header image, you can see it saying it wants to be 950 pixels wide. Now what we’re going to do is upload one that’s only 300 pixels wide and that’s going to be our logo and for me, that’s this one right here. So if we say upload, here is my logo image. If we go over to the site, you can see now the logo image sits here.

Notice how clicking on this doesn’t do anything? That is because I need to set a setting here under Design Options. And under Design Options and header, I need to have show site name in header because without that, it won’t be clickable but with it, it will be. So if we go to the About page and click on this, it takes us back to the homepage. So you need to make sure that’s selected.

Okay so the next thing we’re going to do is we’re going to take a plugin and we’re going to put it right here beside this in the header. So we come back over to the Dashboard and we go down to plugins, add new and search for SH Slideshow. It’s this one right here, SH Slideshow. We’ll just say install now and then activate the plugin.

Now at the bottom here, we have this SH Slideshow options. Now the first thing to do is have some images for this and actually, I’ve already uploaded the images for this in the Media Library. I have 3 images, I’m calling it smooth banner 1, smooth banner 2, and smooth banner 3. And if you look at these images, they are 650 pixels wide by 250 pixels tall. And so, those are just going to sit right beside the existing header.

So with those in place, we’ll go down to Slideshow options and remember I had 950 pixels? I’m going to open this up here again. I said I had 950 pixels for this? We’re going to… oh isn’t that funny? So I already started putting that in there. Well, what we’re going to do is we’re going to make this 650 pixels because my logo was 350 wide. Its height is going to be 250 pixels and then we will scroll down here and for the moment, we’re not going to change any of these things. We won’t do any random effects. We will not display navigation. We’re only going to show 3 slides. We’re not going to show recent posts. You can see how the last time I installed this, it left the addresses in here. If you want to put the address in, you just select that, go to your Media Library and then pick the one you want to insert there and insert into the post. If you want it to go to a link, you can select a link here or you can use an outside link from the outside and then you would add it. But in this case, we don’t want any links. All this going to do is just rotate. We only want 3 slides so we’ll just say 3 and if we hit update, only 3 are going to show there like that.

And then we want to go to Appearance and let’s do our preview using the real slides. Add slideshow CSS, we’re going to say no to that. We’re going to add CSS ourselves and that’s pretty much it. So let’s say update.

So now you can see what our images look like here as they cycle through. And so now, our job is to add these… add the header image to the right spot. Now, you just refresh this here for a second. Interestingly, it’s adding it right here, right now and I’m not exactly… let’s see, maybe it’s from… it’s this left over from old code. Yeah, I’m sorry. That was just left over from old code. This is what it looks like right now without that… before you add any custom functions php stuff. So you don’t see the image at all. It’s just sitting right here.

And then what we’ll do is we’ll come over to our custom functions php file and we’re going to use this little comment block. This adds the SH slider plugin to the header. We’re going to create a new function and that will be function add slideshow to header. And then inside of that, we’re going to ask if the function exists… if and then if function_exists and then the function name in here is going to be SH Slideshow. So if that function exists then we will include that function and it’s going to be let’s see… if function exists, it’s actually a mistake there isn’t it? Yes it is. That’s it there, not this. Okay so if function exists SH Slideshow which is the function that calls that slideshow then we’re going to go ahead and call it. So SH Slideshow opening and closing parentheses and closing semi-colon… so what that does it if we just call this without this and the plugin wasn’t activated then we’d throw an error. So we have if function exists SH Slideshow and then the code that calls this slideshow which, in this case, is SH Slideshow. And now, what we have to do is add it to our header. So add action Thesis hook header and then add slideshow to header. So copy that name, copying it like this avoids the possibility of typos so that’s it. We’ll go ahead and save it, upload it to our website, come over here and test it. Okay, I made a mistake on line 38. Come back over here to line 38, SH Slideshow… I must have spelled it wrong. SH… oh, slideshow. It’s missing an S there. Save document, upload document, reload it.

Okay so now what we need to do is we need to add some styling to this so that it will sit over there the way we want it to sit. So if we refresh this and then just look at our structure for just a moment, we’ve got our menu and our header and we’ve got slideshow here. So what we want to do with that slideshow is come over here to custom CSS and .custom and then we use div id slideshow… #SHslideshow and let’s give a width of 650 pixels and then let’s float it left. Okay, div id header, div id logo… I think our problem here is that… I think we also have to say above this, .custom #header #logo and let’s just give it a width of 350 pixels or 300 pixels and let’s float it left.

Okay so we moved logo out of the way and then we moved header up, the slideshow header up. And you can see how everything just rotates like you would expect it to rotate. And so, we can just copy this, open up our custom CSS file, paste that to our custom CSS file, save the document, upload the document and refresh the document. And there we have it. We’ve got a logo here that’s clickable and we’ve got banner images here that are going to rotate and they’re not clickable. And you can move around and they’re going to come up in the order that we just did them in.

Okay so hopefully that answers the question as comprehensively as possible.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment