Subscribe

I have moved to newlyancient.com and will be writing regularly there! Content on this domain is no longer updated, but will be maintained as an archive in its original form.


WordPress Page Slugged

As I was working away on the next rendition of this blog, I came across a slight problem. In the navigation, I wanted each tab to be a different color. To do this, I needed to assign a unique ID to each tab. No where in the core code of WordPress could I find a parameter to add this. Since I often change the name and order of pages, creating a static list was not an option. Even a quick Google didn’t turn up anything useful. So, I gathered my courage, wrote my will, and dived into the WordPress core. Using the search feature of Eclipse, I was able to track down the relevant class in about ten minutes. Once there it was a simple matter to change the output by adding an additional tag.

I am running WordPress 2.1 and the code may be different in other versions. In fact, there’s a 99% chance it is.

  1. Search around in complex code for 10 minutes. Done for you. :)
  2. Open wp-includes/classes.php in your favorite PHP editor.
  3. Go to line 512 (approximately) and replace this code:
PHP:
  1. $output .= $indent . ‘<li class="’ . $css_class . ‘"><a href="’ . get_page_link($page->ID) . ‘" title="’ . attribute_escape($page->post_title) . ‘">’ . $page->post_title . ‘</a>’;

with this code:

PHP:
  1. $output .= $indent . ‘</li><li class="’ . $css_class . ‘" id="t_’ . attribute_escape($page->post_name) . ‘"><a href="’ . get_page_link($page->ID) . ‘" title="’ . attribute_escape($page->post_title) . ‘"><span class="title">’ . $page->post_title . ‘</span></a>’;

which will render something like this:

HTML:
  1. </li><li class=“page_item” id=“t_about”><a href=“http://myfla.ws/about/” title=“About”><span class=“title”>About</span></a></li>
  2. <li class=“page_item current_page_item” id=“t_writing”><a href=“http://myfla.ws/writing” title=“Writing”><span class=“title”>Writing</span></a></li>

Using this same syntax, you could add other pieces of information to the navigation list. For instance, to display the ID of the page in the title of the link you could do something like this:

PHP:
  1. $output .= $indent . ‘<li class="’ . $css_class . ‘" id="t_’ . attribute_escape($page->post_name) . ‘"><a href="’ . get_page_link($page->ID) . ‘" title="’ . attribute_escape($page->post_title) . ‘ [’ . $page->ID . ‘]"><span class="title">’ . $page->post_title . ‘</span></a>’;

Although this solution is easy enough to implement, it is not elegant since it requires modification of the WordPress core code. In the future, it would be great for wp_list_pages() to be added to the pluggable functions of WordPress. This would make it very easy to create a plugin which does this same thing and is future proof. By modifying the WordPress code, you can add custom CSS to each link in a dynamic navigation setup.

You will need to change this code each time you update WordPress. Otherwise, you will lose the custom IDs.

Spread the Love: These icons link to social bookmarking sites where readers can share and discover new web pages.

  • Digg
  • del.icio.us
  • Ma.gnolia
  • Furl
  • Reddit
  • Technorati
  • YahooMyWeb
  • Shadows
  • BlinkList
  • Fark
  • NewsVine
  • Slashdot
  • SphereIt
  • Spurl
  • StumbleUpon

6 Responses to “WordPress Page Slugged”


  1. 1 /gradster(1)/

    You geek you.

    /gradster(1)/

  2. 2 /gradster(1)/

    By the way, arthus, this design shall be mine, correct? Remember? New winter theme, but mine?

    /gradster(1)/

  3. 3 arthus

    I will release my current theme under a GPL license once I complete my next one. Therefore, anyone can download it and use it for themselves. If you decide to use it and modify it for winter - by all means, you can do so. However, I am extremely busy and will not be able to modify it for you. (unless of course you pay me :))

  4. 4 deniz çakır

    thanks.

  1. 1 WordPress Wednesday: New Security Release, Updated WordPressMU, More WordPress Plugins, and Time to Get Naked at The Blog Herald
  2. 2 WordPress Wednesday: New Security Release, Updated WordPressMU, More WordPress Plugins, and Time to Get Naked » TechAddress