There are several menu alternatives to the standard Thesis navigation menu. One of them is the Image Button Bar Menu/Submenu, which can either be used as the main navigation — as it is on this site — or as a submenu to the Thesis nav bar, as it is on Jamie Ridler’s site.

The Button Bar is simple to set up and use. Each button has a selected and unselected image. The Button Bar can handle a home/front page, pages, posts, category pages, and tag pages. In conjunction with the Contextual Menu, it can handle parent/child page relationships, as well.

The code to put in custom_functions.php

Following is the code you put into your custom_functions.php file. Read the code comments and the description which is below the code. Values in UPPERCASE must be replaced:

/* =====IMAGE BUTTON BAR MENU/SUBMENU===== */
/* No buttons selected. 
All buttons are unselected. All button images are unselected versions. */
function button_nav_menu_none_selected() {
?>
	<div id="button_nav">
		<ul>
			<li><a href="URL-PAGE-1"><img src="FULL-PATH-TO-UNSELECTED-BUTTON-IMAGE1" alt="PAGE1-NAME"</a></li>
			<li><a href="URL-PAGE-2"><img src="FULL-PATH-TO-UNSELECTED-BUTTON-IMAGE2" alt="PAGE2-NAME"</a></li>
		</ul>
	</div>
<?php
}
/* Page 1 button is selected. 
Page 1 button is selected version, Page 2 button is unselected version */
function button_nav_menu_PAGE1_selected() {
?>
	<div id="button_nav">
		<ul>
			<li><a href="URL-PAGE-1"><img src="FULL-PATH-TO-SELECTED-BUTTON-IMAGE1" alt="PAGE1-NAME"</a></li>
			<li><a href="URL-PAGE-2"><img src="FULL-PATH-TO-UNSELECTED-BUTTON-IMAGE2" alt="PAGE2-NAME"</a></li>
		</ul>
	</div>
<?php
}

/* Page 2 button is selected.
Page 1 button is unselected version, Page 2 button is selected version */
function button_nav_menu_PAGE2_selected() {
?>
	<div id="button_nav">
		<ul>
			<li><a href="URL-PAGE-1"><img src="FULL-PATH-TO-UNSELECTED-BUTTON-IMAGE1" alt="PAGE1-NAME"</a></li>
			<li><a href="URL-PAGE-2"><img src="FULL-PATH-TO-SELECTED-BUTTON-IMAGE2" alt="PAGE2-NAME"</a></li>
		</ul>
	</div>
<?php
}

/* Determines which button version to use. */
/* Example is for pages only. Other kinds of documents below. */
function button_nav_menu() {
	/* For pages only: The first button is selected */
	if (is_page('PAGE1-NAME'))
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE1_selected', '90');
	/* For pages only: The second button is selected */
	elseif (is_page('PAGE2-NAME'))
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE2_selected', '90');
	/* Defaults to no buttons selected */
	else
		add_action('thesis_hook_after_header', 'button_nav_menu_none_selected', '90');
}
add_action('thesis_hook_after_header', 'button_nav_menu');

	/* =====SAMPLE STATEMENTS FOR OTHER KINDS OF DOCUMENTS===== */
	/* Add or substitute these in Function 4 as needed */
	/* For both blog home pages and static front pages only */
	/*elseif (is_front_page())
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE1_selected', '90');*/
	/* For posts only */
	/*elseif (is_single('POST-NAME'))
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE1_selected', '90');*/
	/* For category pages only */
	/*elseif (is_category('CATEGORY-NAME'))
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE1_selected', '90');*/
	/* For tag pages only */
	/*elseif (is_tag('TAG-NAME'))
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE1_selected', '90');*/

There are four functions provided, enough for two buttons.

Function 1 is the unselected state for all buttons, that is, no button has been selected.
1. There need be only one of this function for all buttons.
2. There needs to be one “<li>” statement for each button, so if you have 5 buttons, there will be 5 statements.
3. For each “<li>” statement you will need to provide a URL to the page, the full path to the unselected button, and a page name (for page identification as well as SEO).

Functions 2 and 3 show selected states for 2 different buttons. In function 2 the first button is selected, and in function 3 the second button is selected.
1. There needs to be one of these functions for each button, so if you have 5 buttons, you will have 5 functions.
2. Rename the function to reflect the page it is for. For example, if the page is about red things, name the function “button_nav_menu_red_selected”
3. Like Function 1, you need one “<li>” statement for each button, so if you have 5 buttons, there will be 5 statements.
4. Like Function 1, for each “<li>” statement you will need to provide a URL to the page, the full path to the unselected button, and a page name (for page identification as well as SEO).
5. Make sure that you provide the image path to the one selected button that the function is handling.

Function 4 determines which button version is the right one to use, based on the current page. The example is just for pages, but other kinds of documents can be used (see below).
1. There is only one of these functions for all buttons.
2. In this example, there are 2 buttons for pages, so we have 3 statements: button 1 selected, button 2 selected, and no buttons selected.
3. Add 1 “elseif” pair of statements (consisting of the “elseif” statement and the “add_action” statement) for each button above 2 that you have.
4. Change the PAGE1-NAME in the “elseif” statement. It’s the actual title of the page as you see it in your blog. For example, if the page displays as “Red Page” then the page name is “Red Page.”
5. Change the function name in the “elseif” statement to that of the page function being called. Following the example above, the red page function would be changed to “button_nav_menu_red_selected”.

Below Function 4 are sample statements for other kinds of documents the Image Button Bar Menu/Submenu can handle: home/front pages, posts, categories, and tags. Of course, the home/front page statements would be used only when the button bar is used for the main menu. Add or substitute statement pairs in Function 4 as needed. Note that you must match the elseif statement pair with the document type! A page is not a post is not a category is not a tag!

The code to put in custom.css

The following code should be put into your custom.css file. Read the code comments and the description which is below the code:

/* =====IMAGE BUTTON BAR MENU/SUBMENU===== */
#button_nav {
	list-style: none; 
	/* optional background color */
	/*background:#FFFFFF none repeat scroll 0 0;*/
}

#button_nav ul {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	/* determines vertical and horizontal placement*/
	margin: -1em 0 -.4em .26em;
}

#button_nav li {
	display: inline;
	/* uncomment border for testing*/
	/*border: 1px solid #000000;*/
	/* determines size of button box*/
	padding: 1.1em -.5em 0em -.5em;
	/* determines spacing between button boxes*/
	margin: 0 -.4em 0 0;
}

There are few adjustments to be made in the css code, mainly vertical alignment, and adjustments to get the button box size right. The code comments tell you where to do this. The values in the code are for this site.

Tips for getting it all working:

1. Go ahead and make button images for the button menu, or at least right-sized dummies to work with. Remember that you need to have 2 button images for each button: selected and unselected.
2. Complete Function 1 first. It contains all the lines for your buttons in their unselected state.
3. Cut-and-paste the button lines from Function 1 into Functions 2 and 3. Then just change the selected button image URL according to which function it is.
4. If you need more than 2 buttons, just copy the entire function 1, rename it, and change the URL of the selected button.
5. I suggest uncommenting the “border” property line while you’re working on button box size. It will display a black border around the button box. Note that the button box will always be a little larger than the button image. Delete the “border” property line or comment it out when you are finished.

I hope these instructions have been clear and helpful. And I hope you are encouraged to use the Image Button Bar Menu/Submenu in your next project! As always, your comments and questions are welcome, either here in the article comments, or by emailing me via the “Contact” button at the top of the page.

©2009 Michael L Nichols. All rights reserved.