Thesis for WordPress is one of those things I love and hate. I started out mostly hating but as I’ve gotten to know it better I’ve felt more comfortable with using it. I could get into why it should never have been marketed as something for beginners (especially at the beginning, but I won’t here).
I run this site on Thesis (as of publication) since I’m so used to making it work for other people as a side gig and own a developers’ copy. Tonight I got an e-mail from a client who couldn’t find a tutorial on how to make a drop-down navigation menu bar. So I sent them a shorter version of what’s below.
Sure, Thesis 1.6 & up have this functionality built right in. But it only works for sub-pages and sub-categories. If you’re trying to create a drop-down menu of links that aren’t pages on the site or categories, you have to hand-code it and insert it into the
custom-functions.php file or Thesis OpenHook. Even the option that Thesis offers of letting you choose a category of links to include in the nav bar doesn’t let you make drop-downs.
Edited on release of WP 3.0 – now it’s possible to create your own menus in WordPress. This tutorial is for hand-coding as I haven’t yet looked into how to combine the two and I probably won’t. This tutorial will still work if you want to hand-code your menu.
So what are you supposed to do?
Putting Your Own Drop-Down Links in the Thesis Nav Bar
Actually, it’s really easy, you just have to put it together the right way. The code below demonstrates how to make some nav bar items include a drop down. I’ll explain a little more below. Items 2 & 3 are the one with drop-down menus.
<ul class="menu"> <li class="tab"><a href="">Item 1</a></li> <li class="tab"><a href="">Item 2</a> <ul> <li><a href="">Item 2, Child 1</a></li> <li><a href="">Item 2, Child 2</a></li> </ul> </li> <li class="tab"><a href="">Item 3</a> <ul> <li><a href="">Item 3, Child 1</a></li> <li><a href="">Item 3, Child 2</a></li> </ul> </li> <li class="tab"><a href="">Item 4</a></li> </ul>
If you’re using
.tab to style the items, then you may want to make the children
<li class="tab"> too instead of plain old
A Note on List-Item Structure
The drop-down part is created by putting another unordered list
<ul> inside the main list
<li>. You must put it inside the
li tags or it won’t work. Put it after the
a href of the link itself.