I was recently hired to make what I thought was going to be a simple change for a client. Modify the navigation on a WordPress blog to match their static site. The menu items were already listed but were in the wrong order.

So, knowing that the blog was running on WordPress I said sure!

My first thought was OK, I will just get in there rearrange the order of the pages by id, and be done. Easy enough right?

Look Before You Leap!

What I didn’t know from talking to the client, was that their blog was running a premium theme by the name of Thesis. I had never worked with Thesis before but I have read about it and heard about its SEO capabilities, easy to customize by anyone etc etc.

Having never worked with Thesis before, I had no idea that adding a page order plug-in wouldn’t work. I quoted a very small amount to make this 10 minute change and I am now at one hour into the job wondering why this simple fix didn’t work.

What I discovered during my research is that Thesis basically doesn’t do things like a normal template, due to the complexity of it’s admin pages. I did find some information on customizing the navigation menu for WordPress pages but it wasn’t what I needed. This site has no pages set up through WordPress. Just the blog itself.

Adding a Custom Menu

So 3.5 hours of research later, I decided to just start hacking away. I downloaded my clients template to my local server, and through some trial and error came up with the information below.

First, Thesis uses it’s own custom options panel. Once Thesis is installed and activated, you will see a new menu item in the admin panel called Thesis Options. So, instead of going to Appearance and using the file editor in WordPress, you want to go to Thesis Options>Custom File Editor to edit the custom_functions.php. You can also use your favorite text editor and then upload the file if you prefer.

First, I created the new function which is the custom nav menu:

function  custom_nav_menu() {
?>

What we did was define our new function, custom_nav_menu, and the curly bracket opens the function.  We close out the PHP to allow for the HTML in the next section. Since this is the first function in our custom_functions.php file, we don’t need to open PHP. It is already the first line in the custom_functions.php file. We will only close it and reopen it as needed.

Next we insert our HTML  for the menu  (You can add anything here, such as a div, some more php or even a new page).

<ul>
	<li><a href="http://reallycoollink.here">One</a></li>
	<li><a href="http://reallycoollink.here">Two</a></li>
	<li><a href="http://reallycoollink.here">Three</a></li>
	<li><a href="http://reallycoollink.here">Four</a></li>
	<li><a href="http://reallycoollink.here">Five</a></li>
	<li><a href="http://reallycoollink.here">Six</a></li>
</ul>
}

What we did was add our HTML for the custom navigation, re-opened PHP and closed out the function with the curly bracket.

And that is it for the custom nav function! You can do more like drop downs etc but I am just giving the basics.

Removing The Old Menu

Next, we need to get rid of the old menu. We do this by editing the custom_functions.php file like so:

remove_action('thesis_hook_before_header',  'thesis_nav_menu');

Thesis uses it’s own hooks. They are basically similar to modules and where they are positioned. By default, the nav menu is above the header, so the remove_action is telling thesis to take out the hook above the header which removes the thesis nav menu function.

Next we want to insert our custom nav menu in its place:

add_action('thesis_hook_before_header',  'custom_nav_menu');

Now your completed code should look like this:

//Add custom Menu
function custom_nav_menu() {
?>
<ul>
	<li><a href="http://reallycoollink.here">One</a></li>
	<li><a href="http://reallycoollink.here">Two</a></li>
	<li><a href="http://reallycoollink.here">Three</a></li>
	<li><a href="http://reallycoollink.here">Four</a></li>
	<li><a href="http://reallycoollink.here">Five</a></li>
	<li><a href="http://reallycoollink.here">Six</a></li>
</ul>

Styling The Custom Navigation

Now, if we want to add some styling you can edit the custom.css file. Just make sure to add .custom to your classes like this:

.custom .menu {background:none; margin-top:-42px; float:right;  width:55em;height:20px;z-index:1000;}

And to your id’s like this:

#menu .custom {more:really; cool:css;}

(.custom tells Thesis to use this style)

Of course you will want to add your own CSS to style it.

Now you are rocking thesis with a brand new nav menu!

Closing Thoughts

After spending a day figuring out and working with Thesis, I don’t see what all the hype is about. Any WP template that is properly coded will have the same SEO capabilities as Thesis.

You can add on the All in One SEO Pack and Google XML Sitemaps plug-in and be well on your way. There are also numerous blog postings on how to further increase the SEO capabilities of WordPress.

I hope this helps someone out there and for all of you freelancers, look before you leap! Make sure to ask those probing questions and check out what they have going on behind the scenes before you give a price. At a minimum view the source and check out the CSS file for the template name .

Your Thoughts

Have any of you worked with Thesis? What are your thoughts on it?