I Dream in Colors

10/16/06 Wordpress: user-editable menu with images

A client asked me for a navigation bar using a custom font for his WordPress theme. I couldn’t just hand code it and use images since he wanted the final user to be able to add pages from the WP control panel. I figured there had to be a way to do that; there is a plugin to replace the post titles with images (gee, can you tell?), so why couldn’t you use it for any other text? It took me a while, but i finally figured it out. This is what i did:

I made a menu on the header with the wp_list_pages tag.

<div id="menu">
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>

title_li= makes the tag not display a title.

The menu is done, next is converting it to images. I started by getting this Image Replacement WordPress plugin. I had to fix it to get it to work properly. On that page look for a comment by Serge Lafont. I tried that and it worked like a charm.

The plugin lets you specify wich html tag you want to replace (h1, h2, h3, h4, h5, h6, div, span and p), and even set a class. The problem is that the wp_list_cats tag outputs something like this:

<li class="page_item"><a href="...url..." title="Links">Links</a></li>

No good. I needed a tag around the page title. I had to change the output of the wp_list_pages tag, wich is found in the the template-function-posts.php file (on the wp-includes folder).

I had to look around a bit, as php is not really my thing, but i found the part that had to be changed. To locate it, do a search for “function _page_level_out” and scroll down a few lines. The part is this:

$output .= $indent . '

<li class="’ . $css_class . ‘"><a href="’ . get_page_link($page_id) . ‘" title="’ . wp_specialchars($title) . ‘">’ . $title . ‘</a>’;

I added a span there, like this:

$output .= $indent . '

<li class="’ . $css_class . ‘"><a href="’ . get_page_link($page_id) . ‘" title="’ . wp_specialchars($title) . ‘"><span class="’ . $css_class . ‘">’ . $title . ‘</span></a>’;

I copied the class from the li element, so they’ll both have the same class. Any other one class could be used too though.

Now the wp_list_pages tag outputs this:

<li class="page_item"><a href="...url..." title="Links"><span class="page_item">Links</span></a></li>

Perfect. And there is no problem if you want to use another theme in the future. All you have is an extra span tag that won’t bug.

All left to do is go to the plugin settings and choose a span class “page_item”, and voila, an image menu, fully editable. So far it works fine, at least in IE6, Opera 9 and Firefox 1.5 (all for WinXP).

The only drawback is that you can’t have mouseover effects. Oh well.

Technorati Tags: Wordpress, Wordpress hack

Webdesign, WordPress