Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

1 Answer 1

up vote 2 down vote accepted

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.

share|improve this answer
1  
Damn, you're just too good :) I'm was just reading the source and coming to the same conclusion. –  ialocin 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 –  ialocin 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

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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