Changing class name

Question

Hello i am working on a menu in wordpress and made it dynamicly like this:

<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>

but when i look at my source i get the following:

<ul>
<li class="page_item page-item-5"><a href="http://localhost/private/Kife/?page_id=5" title="Start">Start</a></li>
<li class="page_item page-item-7"><a href="http://localhost/private/Kife/?page_id=7" title="Referenties">Referenties</a></li>
<li class="page_item page-item-9"><a href="http://localhost/private/Kife/?page_id=9" title="Over ons">Over ons</a></li>
<li class="page_item page-item-11"><a href="http://localhost/private/Kife/?page_id=11" title="Contact">Contact</a></li>
</ul>

What i would like to have is that the class names are the same as the title name? How would i do this?

Answer 1

Well.. you're going to want to slugify the title name at the very least.. but why would you want article-specific classes anyway? That won't scale well at all! Are you going to modify your style-sheet every time you write a new article? I can almost guarantee you're taking the wrong approach if this is what you want to do.

Answer 2

Unfortunately it's not possible using the wp_list_pages() function to add another class. You could do it afterwards using jquery, or script your own function in php that simulates wp_list_pages() the way you want it.

Do remember though that spaces in classes won't work.. you'll have to replace them with dashes or underscores (dashes are preferred, I believe)

Answer 3

We've had to do this a couple of times. Though not pretty, its certainly not ugly. And, yes, there's a filter for that:

function my_page_css_class($class, $page) {
    if (!empty($page)) { // sanity check
        $class[] = sanitize_title($page->post_title);
    }
    return $class;
}
add_filter('page_css_class', 'my_page_css_class', 10, 2);