How To Create A Rockin’ Thesis Menu

by theCoder on September 11, 2010

There are far too many websites using the Thesis theme that have the plain old vanilla looking menu.

Sure it is functional, but it isn’t rockin’ the way we like here at Team Thesis.

We have had a number of people ask us how we implemented our menu and since we’re all about lending a hand and trying to help everyone build a better website, we thought we would share how we built our menu.

Don’t worry…we won’t just leave you hanging with a block of sample code as we know that can be somewhat confusing when it is not accompanied by an explanation.

That would be like having a slice of chocolate cake without a glass of milk!

Pour Me a Glass

For the purposes of this tutorial, we will be working in the custom_functions.php and performing a few basic tasks such as removing an action, adding a new action, and writing a custom function. Don’t worry…it sounds more painful than it will be – promise!

Step #1 – Remove the default menu hook

For the appetizer, we will first need to remove the default Thesis navigation menu because even though the Thesis menu is quite the tasty treat, we want our menu to be finger lickin’ good.

We accomplish this by calling “remove_action” with the appropriate hook and function name for the default location of the default menu. In this case, the hook is thesis_hook_before_header and the function name is thesis_nav_menu.

remove_action('thesis_hook_before_header', 'thesis_nav_menu');

(Tip: Let the Thesis User Guide be your friend when learning what hooks are available.)

Now that we have removed the default Thesis menu, we need to ask the waiter to prepare the next course – adding in our own custom menu.

Step #2 – Adding our custom menu hook

In our case, we want our totally rad menu to be displayed below our header. Also, as mentioned earlier, we want to add a little flair to our menu so rather than use the default function to display the menu we are going to create our own custom function.

add_action('thesis_hook_before_content_area', 'team_thesis_nav_menu');

In the above code snippet, you can see that we are using the thesis_hook_before_content_area hook as the definition of where we want to locate our new custom menu. Basically, our menu will become the enormous pile of pastrami piled between the two slices of bread that are the header and content area.

Is anyone else getting hungry?!?

You will notice that the second parameter of our new action is the team_thesis_nav_menu function name. Don’t worry too much about the name, as you can call this function anything you want – even “wow_this_guy_derek_is_really_cool” – as long as you use the same name when you create your function.

Step #3 – Creating our custom function

Now that you are ready to name your custom function after me, it is time to roll up our sleeves and grab the steak knife as we are into the main course.

function team_thesis_nav_menu() {
?>
...
<?php
}

Here we have the shell for our new custom function. We know it can be intimidating to create your own custom function in PHP, but we are here to help break it down for you. First, we begin our new function with the word…wait for it… function.

We follow the function declaration with the name of our new function. Don’t feel obliged to name your first function after me, but I do recommend creating a name that is easily identifiable as to the purpose of your function. The opening and closing parenthesis after our function name is where we would define any parameters for our function; no need to worry about this in most cases for Thesis customizations.

With the definition of our function complete, we now want to open the function and close the function. We’ll worry about adding the meat and potatoes in just a minute. In order to open and close a function, you will use the opening and closing curly braces that look just like this: { } . Similarly, the code on line 2 and line 4 is used to close / open PHP code respectively.

We know this might be extremely basic for some of you, but we also know this can be extremely confusing for those not quite as familiar with writing code. It make take a time or two to read the above explanation of basic function syntax to really begin to understand the concepts, so don’t get discouraged.

Step #4 – Adding functionality to our function

We have the structure of our menu created, so now it is time to actually add the code that will be responsible for creating the menu.

<div id="tt_menu_area" class="full_width">
  <div class="page">
    <div id="menu_bar">
      ...
    </div>
  </div>
</div>

For those of you that are familiar with Thesis, you will notice that we are rockin’ full width framework option and this means that we are going to build a menu area that contains the menu just like Thesis has done with the header, content area, and footer.

Think of the menu area as the full width of the page stretching all the way from the left most side of the browser over to the right most side. The page is the area that will contain our actual content, which in this case is the menu bar that we will be creating.

<img src="<?php bloginfo('template_directory') ?>/custom/images/menu/menuend.gif" id="menu_left" alt="Team Thesis Menu" title="Team Thesis Menu" height="30" width="117" />

The first step in constructing our fancy new menu will be to add an image that will serve as the introduction to our menu. As you can see up in our menu, we creatively decided to identify this image as our Menu.

Tip: When adding images within your code, be sure to utilize to define the path to your image. This is important because by doing so, you will be able to copy your custom code into future releases of the Thesis theme without having to change the path to all of your images.

<div id="twitter_link"><a id="menu_right_link" title="Follow us on Twitter" href="http://twitter.com/teamthesis" rel="nofollow"><img src="<?php bloginfo('template_directory') ?>/custom/images/menu/tweetend.gif" id="menu_right" alt="Team Thesis Twitter" title="Team Thesis Twitter" height="30" width="117" border="0" /></a></div>

With the left most end of our menu starting with an image, we decided to add a personalized touch and create a link to our Twitter account for the right most end of the menu. Now our menu is starting to look unique and classy.

Speaking of the menu, how do we actually add the menu items?

<?php thesis_nav_menu() ?>

In the above line of code, we are simply calling the default function that the Thesis theme uses to create the menu. You might remember that this is the exact function that we removed from our code way back in Step #1. The reason that we are doing this is because the default Thesis menu does a nifty job of creating the links for each menu item, so we might as well use that to our advantage.

Whew, take a deep breath as you have just created your own rockin’ Thesis menu!

Chocolaty Goodness

As a note of clarification, our menu is built in the order of “left – right – middle”. This might seem somewhat confusing at first but it is important to know why it was done in this manner. The left-most element being first is fairly self-explanatory; the right-most element being in the middle not so much.

The reason that the right-most element is entered before the middle section of the menu is because we use our CSS definitions to have the right end of the menu float directly to the right of the links that comprise the menu. If we were to enter the code in the natural order of “left – middle – right” we would see that the Twitter link ends up wrapping down to the next line.

Need a Napkin?

There really isn’t too much involved in designing a rockin’ menu that adds a few extra touches that will be sure to separate yourself from the majority of websites running the Thesis theme. Take some time to review the code provided above and be sure to let us know if you have any questions.

For simplicity, we have provided the entire code snippet below that you can use to add your awesome menu creation to your own website!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
 
function team_thesis_nav_menu() {
?>
	<div id="tt_menu_area" class="full_width">
		<div class="page">
			<div id="menu_bar">
			<img src="<?php bloginfo('template_directory') ?>/custom/images/menu/menuend.gif" id="menu_left" alt="Team Thesis Menu" title="Team Thesis Menu" height="30" width="117" />
			<div id="twitter_link"><a id="menu_right_link" title="Follow us on Twitter" href="http://twitter.com/teamthesis" rel="nofollow"><img src="<?php bloginfo('template_directory') ?>/custom/images/menu/tweetend.gif" id="menu_right" alt="Team Thesis Twitter" title="Team Thesis Twitter" height="30" width="117" border="0" /></a></div>
			<?php thesis_nav_menu() ?>
			</div>
		</div>
	</div>
<?php
}
add_action('thesis_hook_before_content_area', 'team_thesis_nav_menu');

Leave a Comment