How to center align nav menu in Thesis theme for WordPress

By Sudipto   March 18, 2012

Thesis is no doubt the best premium theme for WordPress I have come across. What I like the most about Thesis is the load time of the site. The code is highly optimized and the site loads much faster.

I have been customizing Thesis for quite sometime now. One of the most difficult part is Menu centering in Thesis. Most of the time we try to do it using CSS which is not always browser safe. Here in this tutorial I will show you how to center align Thesis nav menu using tables.  Table HTML tags are the most browser safe elements and is supported by old browsers like IE6. This method to center was used in another wordpress theme so I thought of implementing it on Thesis too.

Note: Incorrectly editing the custom_functions.php file will make your site go down. Please be extra careful.

Edit your custom_functions.php file and add the below code. To do that  login to your WordPress site dashboard then go to Thesis > Custom File Editor > Select custom_functions.php from the  drop down > Press Edit this file button. After adding the below code save the file and refresh your site to see the change.

<?php //PHP opening tag. Add if not already added.

function my_nav_menu()
<div id="menuwrap">
<table cellspacing="0" cellpadding="0" style="margin: 0pt auto;">
<tbody><tr><td align="center">
<?php thesis_nav_menu(); ?>
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_header', 'my_nav_menu');

//PHP closing tag. Add if not already added.

Update: Check out this Ultimate Thesis Options Plugin. This will help you customize your Thesis Theme too easily. Like centering menu, Right Align menu, adding a second menu, adding Footer widget areas and many more options.


View all posts by Sudipto
Sudipto's Website / Google+

Do you like this article?

Previous post:

Next post: