Modification to wp_list_categories

Question

I dug this up to help me modify wp_list_categories and place the featured image from the latest post in that category, inside the generated li.

class CategoryThumbnail_Walker extends Walker_Category {
    // A new element has been stumbled upon and has ended
    function end_el( &$output, $category, $depth, $args ) {
        // Output the standard link ending
        parent::end_el( &$output, $category, $depth, $args );

        // Get one post
        $posts = get_posts( array(
            // ...from this category
            'category' => $category->cat_ID,
            'numberposts' => 1
        ) );
        // If a post has been found
        if ( isset($posts[0]) ) {
            // Get its thumbnail and append it to the output
            $featured = get_the_post_thumbnail( $posts[0]->ID, 'extrathumb', null );
            $output .= $featured;
        }
    }
}   

Used thusly:-

<?php wp_list_categories( array(


                        'show_count' => 1,
                        'walker' => new CategoryThumbnail_Walker()) ); ?>

This does almost exactly what I want, to output the featured image along with the category name and the post count from that category.

The only problem is it outputs the img OUTSIDE the li, like so

<li class="cat-item cat-item-38"><a href="http://192.168.1.141:8888/category/around-the-web/" title="View all posts filed under Around The Web">Around The Web</a> <span class="post_count"> 1 </span>
</li>
<img width="79" height="79" src="http://192.168.1.141:8888/wp-content/uploads/2013/11/thanksgiving-day-parade-wind-79x79.jpg" class="attachment-extrathumb wp-post-image" alt="A lot could go awry.">

I need that image to be INSIDE the category li

Any ideas?

Answer 1

Move what you are calling the "standard link ending" to the end of the function, instead of the beginning.

class CategoryThumbnail_Walker extends Walker_Category {
    // A new element has been stumbled upon and has ended
    function end_el( $output, $category, $depth, $args ) {
        // Get one post
        $posts = get_posts( array(
            // ...from this category
            'category' => $category->cat_ID,
            'numberposts' => 1
        ) );
        // If a post has been found
        if ( isset($posts[0]) ) {
            // Get its thumbnail and append it to the output
            $featured = get_the_post_thumbnail( $posts[0]->ID, 'extrathumb', null );
            $output .= $featured;
        }

        // Output the standard link ending
        parent::end_el( $output, $category, $depth, $args );
    }
} 
wp_list_categories( 
  array(
    'show_count' => 1,
    'walker' => new CategoryThumbnail_Walker()
  ) 
); 

I believe that "nests" correctly (I didn't analyze it very thoroughly though), but I am pretty sure you'd have a neater output by modifying the start_el method instead of the end_el one.