Build Your Own Business Website header image

How to Add the Superfish Style Vertical Menu to Thesis 1.85

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.

In this session we show how to add the superfish style vertical menu to Thesis 1.85. We look at the necessary code and then create a function in custom_functions.php that will unqueue the scripts. We also demonstrate how to add HTML codes so that the scripts get added properly.

Video Transcript

Okay so the only other question I have tonight is if I get the chance, could I please show how to use the superfish style of the fly out menu in CSS? Wow, there you go.

Okay, I didn’t prepare for this Mosa, but we will give it the old high school try. Let’s see, okay we’re going to start off by activating Thesis 1.85. I don’t actually have Thesis 1.85 on this site. Let’s see, since it’s going to be code-related, let’s find a site that I can access. You know, unfortunately, I’m not in my office. I’m out of town and I don’t have immediate access to the FTP information for a site that I can play with like that but I can sort of walk through the issues.

This is a code thing, right? So if you don’t know how to do this kind of code, this is not something you’re going to be able to do. If we come over and take a look at the example and we look at our vertical style here, you have to place these two stylesheets, superfish.css and superfishvertical.css… you have to place those two stylesheets in some place that you can reference. You also have to place these two javascripts in some place you can reference.

So for example, we’ll open up this Thesis 1.8 clip file. What you’d do is you’d create a folder inside of custom or you could use custom. You could put superfish.css in custom, put superfishvertical.css in custom and put hoverintent.js in custom and put superfish.js in custom. So you’ve got all 4 of these files in your custom folder.

Then what you would do is in the foot of your site, you would put this block of text so this script here. This little thing here would go at the bottom of your HTML and then you’d need to add some code. So what you’d do is create a function, add suckerfish script and in this function you would en queue script. Well, let’s just look up the exact stuff for en queue script. So you’d use wp en queue script, that’s what you’d use and we give it a handle. We’d give it a src and that’s all we’d need to do. So, I suppose you do this as register scripts. Okay so it would say wp en queue script and this script would be hover intent and then the src would be caps lock Thesis custom folder dot and then hover intent.js.

Okay and then you do the same thing, wp en queue script was superfish js and then you would wp en queue style. We’ll just go ahead and copy this again, en queue style. And that would be superfish.css and then one last one, wp en queue style and it would be superfish vertical. So that’s going to automatically add the code and then what we’d say is, add action in it and then add suckerfish scripts.

Okay so that little piece of code gets all your scripts added properly. And then you could create another function, function add suckerfish html. And then you would exit php and take this script and enter it and then re-enter php. Okay and then what we’d do is we add action again and this is going to be Thesis hook after HTML then add suckerfish HTML.

Oh okay so add action Thesis hook after HTML, add suckerfish HTML. So you have these two functions that add it in. And then the only other thing you need to do is copy sf menu and sf vertical. And then we go over to whatever menu we happen to be working on that you want to look like this. And we go to menus and CSS classes. Oh, that’s not going to work.

Well, since you’re doing it in a sidebar, what you would do instead then is add the Widgets Reloaded plugin and we’ll install Widgets Reloaded. And then when we install Widgets Reloaded, what we’re going to have is a new menu plugin or our new menu widget. So we go over to widgets and let’s say we want it in widgets 1 here. We would look for custom menu or navigation menu, there we go, and then category. And then what we want to do is put that in the menu class. So we have this sf menu and then sf vertical in the menu class and save that.

And if we come over and just take a look at the page… I mean, this isn’t going to work because it’s not Thesis 1.85. But if we come over and look in the navigation menu here and inspect that… where is the menu? Oh here it is. So it’s menu, sf menu, sf vertical. And then those other bits of information that is, those other functions would kick in and would make that a fly out menu. Because what you’ve done is… so we’ll just sort of go back and re-say this one more time.

You would put all 4 of these files, hover intent, superfish js, superfish css, and superfish vertical css. You’d put all of those in your Thesis custom folder, just right there in the root of that custom folder. Then you’d create a function here in custom functions php that essentially en queues each of those scripts. I’m going to go ahead and put this… when we’re done with this, I’m going to go ahead and cut and paste this into the forum so you have access to it.

And then you’re going to have this add a second one which is add suckerfish html and that’s this little bit of script that comes with it. And then you’re going to hook that to Thesis hook after HTML. And that should produce the desired result. That should give you what you need in order for that menu to work. And I’ll be interested to see how it works for you but this should, in fact, work just fine.

I actually started working on the same thing for a box for Thesis 2 back when… I think actually it was before you asked me. Somebody else asked me and I thought, “Well, I’ll show them how to do this because it was in Thesis 2.” And so I actually started creating a box but I never really got it finished. But anyway, that’s how to do it. I’ll put this code in the forum so that you can copy it and use it yourself.

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