Adding a different style to each link in the wp_list_pages function. (7 posts)

  1. andylaub
    Posted 9 years ago #

    Hi, I am working on a site where each nav item has a slightly different style (background image). Is there a plugin or other way to assign each LI or A tag a different ID or Class when generated by the WP_List_Pages function?

  2. Tdude
    Posted 9 years ago #

    Hi there! I did that for one of my wp projects. I use the "page slug" parameter to get an id for each link to replace it in css with an image. There might be a better way and it includes hacking a few lines of php, but so far it hasn't caused any errors that I know of.
    If you're interested you could do the following:
    In WP 2.1 Open wp-includes/classes.php

    Around line 503 you will find the function start_el

    at that very line, add the parameter $post_name

    Then a few lines down where it says
    "$output .= $indent . '<li class="' . $css_class . '">"
    you need to add your new page slug paramter $page_name in an id or class tag to control it via css. Most of the time I hide the original text with a span tag to make it search friendly, but that's up to you of course.

    The whole start element function looks like this in my file from line 503:

    function start_el($output, $page, $depth, $current_page, $args, $post_name) {
    		if ( $depth )
    			$indent = str_repeat("t", $depth);
    		$css_class = 'page_item';
    		$_current_page = get_page( $current_page );
    		if ( $page->ID == $current_page )
    			$css_class .= ' current_page_item';
    		elseif ( $_current_page && $page->ID == $_current_page->post_parent )
    			$css_class .= ' current_page_parent';
    		// $output .= $indent . '<li class="' . $css_class . '"><a href="' . get_page_link($page->ID) . '" title="' . attribute_escape($page->post_title) . '">' . $page->post_title . '</a>';
    		// fixed by Tdude to give an id for the css
    		// observe extra variable $post_name initiating function
    		$output .= $indent . '<li class="' . $css_class . '" id="' . attribute_escape($page->post_name) . '"><a href="' . get_page_link($page->ID) . '" title="' . attribute_escape($page->post_title) . '"><span>' . $page->post_title . '</span></a>';
    		if ( !empty($show_date) ) {
    			if ( 'modified' == $show_date )
    				$time = $page->post_modified;
    				$time = $page->post_date;
    			$output .= " " . mysql2date($date_format, $time);
    		return $output;

    I tried to get this answer in the forums a few weeks back and I think I've posted my solution, but you know how it is...soo hard to find ;)
    Best wishes,

  3. Tdude
    Posted 9 years ago #

    Oh. I have another hack for 2.07. If you need that, let me know.

  4. StaceyUD
    Posted 9 years ago #

    what about for the latest version of wordpress? I can't find a function start_el in any wp-include files. Would love to implement this!

  5. kmak
    Posted 9 years ago #

    Tdude, thanks, this was a huge help!

    One note: I received this error (WordPress 2.1.3):

    Warning: Missing argument 6 for Walker_Page::start_el() in /wp-includes/classes.php on line 506

    After removing the $post_name parameter from the function start_el everything worked fine.

    StaceyUD, I just got this working on WordPress 2.1.3. The file I edited to accomplish this was '/wp-includes/classes.php' starting at line 506.

  6. kmak
    Posted 9 years ago #

    Update: I've successfully applied this workaround in version 2.2.1

  7. Tdude
    Posted 9 years ago #

    Otto42 at the forums here made this a ticket for the next upgrade of WP. Maybe we won't need to hack this in the future? Anyway, thanx and you're welcome!

Topic Closed

This topic has been closed to new replies.

About this Topic