2

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?

2

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.

4
  • 1
    Damn, you're just too good :) I'm was just reading the source and coming to the same conclusion.
    – Nicolai
    Dec 2 '13 at 0:28
  • You're a wizard sir, a thousand internets to you. Just one more question, how to get the image inside the actual a tag itself as well as the li?
    – andy
    Dec 2 '13 at 0:32
  • 1
    I guess this is what s_ha_dum meant by modifying the start_el instead, take a look at the source. @andy
    – Nicolai
    Dec 2 '13 at 0:53
  • @andy : what ialocin said. Most of the work is really in start_el. end_el is just for closing things up, usually.
    – s_ha_dum
    Dec 2 '13 at 1:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.