WordPress.org

Support

Support » Plugins and Hacks » Adding a different style to each link in the wp_list_pages function.

Adding a different style to each link in the wp_list_pages function.

  • 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?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Tdude
    Participant

    @tdude

    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);
    		extract($args);
    
    		$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;
    			else
    				$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,
    T

    Tdude
    Participant

    @tdude

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

    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!

    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.

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

    Tdude
    Participant

    @tdude

    Kmak,
    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!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Adding a different style to each link in the wp_list_pages function.’ is closed to new replies.