Did you ever had that problem as a webdesigner, that you wanted to do your customer a good job, but he or she insisted on silly things? Like a navigation in WordPress made of tables? Than we have something for you. Here we go…

Why should I use table-navigation? That’s bad Web 1.0 style!

Well, that’s right. Somehow it is. But there is a certain point, you can’t manage with li-tags and css alone. If you want to display your navigation in that way, that it has always – say – 100 percent of the container width, and the single navigation elements are distributed exactly over the width, with equal padding of each element, than tables are your friends.

wordpress-navigation-css-li
Standart li-tag bahavior: li-elements are floating left, leaving a “whitespace” on the right side.

wordpress-navigation-table
Table-hack with mytag-list-pages: all navigation elements fill up exactly the space of the navigation width – no matter how many elements you add.

If you call this a silly design, let’s call it this way. Some customers demand this design. This plugin will make your live much easier, if confronted with that situation.

mytag_list_pages – plugin

WordPress by default renders navigational elements, like the pages you have on your site, as li-tags, using the wp_list_pages() call from withing the template. This is a clean and css-friendly approach, and there is nothing bad about it. But if you want to use the table-hack illustrated above, you will become a problem with WordPress. The mytag-list-pages will make it easy for you.

mytag_list_pages works excatly like the default wp_list_pages, but with an additional parameter, that replaced the default li-tag with a custom tag of your choice.

Example:

A standard-call of the wp-list-pages looks like this:

<ul>
  <?php wp_list_pages('exclude=17,38' ); ?>
</ul>

Resulting in a linked list with li-tags, that exclude page number 17 an 38. Example:

<ul>
  <li>About</li><li>Press</li>li><Sitemap</li>
</ul>

If you installed the mytag-list-pages plugin, you would type in somthing like that:

<ul>
  <?php wp_list_pages('exclude=17,38', 'mytag!' ); ?>
</ul>

And will get the same result as above, but the li-tags replaced by mytag!-tags:

<ul>
  <mytag!>About</mytag!><mytag!>Press</mytag!><mytag!>Sitemap</mytag!>
</ul>

This of course doesn’t make any sense, but shows the principle.

Common usage:

If you now want to render your pages-navigation as a table, you would replace this call:

<ul>
  <?php wp_list_pages(''); ?>
</ul>

With this one:

<table><tr align="center" >
  <?php mytag_list_pages('', 'td' ); ?>
</tr></table>

Result:

<table><tr align="center" >
  <td>About</td><td>Press</td><td>Sitemap</td>
</tr></table>

Now you have the navigations made with a table, ready to satisfy your needs. Since this is a very common thing, this is also implemented as a default behaviour.

This will result in the same code as above:

<table><tr align="center" >
  <?php mytag_list_pages(''); ?>
</tr></table>

Install:

Download and unzip the plugin. Upload ‘mytag_list_pages.php’ it into your wp-content/plugins folder. Navigate in your WordPress-admin area to the plugins-section and activate the plugin. Now you can replace any li_list_pages with mytag_list_pages as much as you want.

Version History:

V0.1 – Initial release: Replaces li-tags with custom markup-tag

Download:

Get the plugin right now!

Licence:

GPLv3

Download - Date published: February 13, 2009 | 1 Comment

A reader has left 1 comment, join him/her.

  1. John Burgoon said:

    I understand your point about customers insisting on bad designs. Why do people hire an expert and then proceed to ignore him? Just be sure to get your money up front.

    However, in case you have not seen it, have a look at Stu Nicholl’s CSS page:
    http://www.cssplay.co.uk/menus/

    He makes superb CSS-only navigation. You can learn a ton just by carefully working through his examples. Notice that even Stu resorts to table nav to get past stupid IE6 problems…