How to - Adding menu sub-titles to a theme

Menus are an important part of your WordPress site. If ever a sentence didn’t need to be vocalised then it was that last one, without menus your users would have a hard time finding their way around your site. Practically all available WordPress themes construct their menu’s in one of three ways - from WordPress page titles, using a custom-written administration panel or hard coding them into the themes header.

The first two options are the most common for a lot of themes as they allow the user to easily change the menus without having to edit a (sometimes complicated) php file. However, these methods (more-so using the first option) are a little inflexible.

Themes with menu sub-titles

There are some very nice looking themes available at the moment that have started to add sub-titles to their menu bars. In the majority of those themes, the menus are hard-coded and require editing of the header.php and/or footer.php theme file to make changes.

How to add sub-title functionality to your theme

I’m a lazy person. I don’t like having to edit theme files everytime I want to change a menu. I also run a WordPress MU installation, so hardcoded menus on a theme means that it can’t be made available to my users. For these reasons I have written a small function that will allow you to set up and use sub-titles from within WordPress.

Using custom fields

We are going to take advantage of the custom fields functionality within WordPress to create our sub-titles.

I will assume that you know how to use custom fields (if not look here and here), so for each page we are going to include on our menu - add a custom field with a key of subtitle. The value should be the sub-title that you want for this page on the menu.

Displaying the subtitle on the theme

Once we have a subtitle custom field set up for each of the pages that are going on our menu, we need to edit the theme file.

We will need to edit two files (as a minimum, if your theme also shows the menu in the footer, then you will need to edit that file too).

Open up the themes functions.php file. If the theme doesn’t have one, then create it within the themes folder.

We are going to add a simple function to this file that will pull out all of the pages we have created and link them to the sub-titles we have entered for them. The function looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function sub_page_list() {
	global $wpdb;
 
	$sql = "SELECT p.ID, p.post_title, p.guid, pm.meta_value FROM " . $wpdb->posts . " AS p LEFT JOIN ";
	$sql .= "(SELECT post_id, meta_value FROM " . $wpdb->postmeta . " AS ipm WHERE meta_key = 'subtitle') "; 
	$sql .= "AS pm ON p.ID = pm.post_id ";
	$sql .= "WHERE p.post_type = 'page' AND p.post_parent = 0 AND p.post_status = 'publish' ";
	$sql .= "ORDER BY p.menu_order ASC ";
	$sql .= "LIMIT 0, 10";
 
	$rows = $wpdb->get_results($sql,OBJECT);
 
	if($rows) {
		foreach($rows as $row) {
			echo "<li>";
			echo "<a>ID) . "\">$row->post_title</a>";
			echo "<span>$row->meta_value</span>";
			echo "</li>";
		}
	}	
}

Save the functions.php file and move to the header.php file. We are now going to call this function to display our menu. Firstly find the bit of HTML that displays the menu - it will probably look a little bit like this:

1
2
3
4
5

<ul class="menulist">
<li>
<a href="">Home</a><span>main page</span>
</li>
</ul>

Finally add our function call. We are going to add it after line 3 of the HTML above so that the Home menu item will be the first menu item displayed, followed by all of our dynamic menu items:

4

sub_page_list();

and that should be it. You can now add, edit and delete pages from your menu without having to download and edit php files.

Note: Don’t forget to wrap the code with <?php tags - they are not displayed above for some reason.

Note 2: It appears the link to the excellent “Rock My World” theme isn’t working correctly, I have an updated version of this theme with the code above in it as well as some other customisations (such as a widgetised sidebar). I shall upload a copy for download as soon as I get back to the office.