WordPress List Pages With Featured Images

Published by John on July 8, 2012 Under Wordpress

I am developing a custom wordpress theme right now for a website with over a hundred pages and to make management easier, I have been using a parent/child relationship. This makes sense, as they are all related anyway and I wanted to be able to show a list of child pages, to provide easier navigation.

On the parent pages, I wanted to still be able to use wordpress’s wp_list_pages function, but wanted to use the really cool ‘featured-image’ theme option. So, I created a custom page walker, to display the images.

Basic Page Structure

The basic page structure is like the below. The “Related Picture Gallery” pages are child pages of “Main Product Page.”

Each ‘Related Picture Gallery” page has a featured image set, using the built-in wordpress option.

-Main Product Page
   -Related Picture Gallery
   -Related Picture Gallery
   -Related Picture Gallery
   -Related Picture Gallery

Add Theme Support For Featured Images

Before you can use the featured image option in the editor, you need to enable it for you theme. Add the below to your functions.php file.

add_theme_support( 'post-thumbnails' );

//optional
//set_post_thumbnail_size( 200, 142, false );

add_image_size( 'main-featured-thumbnail', 200, 142 );

The ‘add_theme_support’ function enabled the featured image option, which will then appear in the editor, bottom right of sidebar, as well as when uploading an image.

Make note of the image sizes used, in this case ‘200’ and ‘142.’ You can adjust these as needed. You can uncomment ‘set_post_thumbnail_size’ if you want to change the default thumbnail size.

Also, make note of ‘main-featured-thumbnail’ in ‘add_image_size’ . This adds a new image size, so when an image is uploaded, a version with that size is created automatically. You can change the size as needed and when you upload an image, a thumbnail with those proportions will be created.

Creating the Custom Walker

WordPress uses a base Walker class, which can be easily extended, to draw things like lists of pages and menu items. If you want to change how a menu or list is displayed, you can extend the default Walker class, in order to change how the item is displayed.

In this case, since ‘wp-list-pages’ is going to be used, it is necessary to extend the ‘Walker_Page’ class, which exists in ‘wp-includes/post-template.php.’

In your functions.php file, add the below:

class Walker_Featured_Images extends Walker_Page {
        function start_el(&$output, $page, $depth, $args, $current_page) {
                if ( $depth )
                        $indent = str_repeat("\t", $depth);
                else
                        $indent = '';

                extract($args, EXTR_SKIP);
                $css_class = array('page_item', 'page-item-'.$page->ID);
                if ( !empty($current_page) ) {
                        $_current_page = get_page( $current_page );
                        _get_post_ancestors($_current_page);
                        if ( isset($_current_page->ancestors) && in_array($page->ID, (array) $_current_page->ancestors) )
                                $css_class[] = 'current_page_ancestor';
                        if ( $page->ID == $current_page )
                                $css_class[] = 'current_page_item';
                        elseif ( $_current_page && $page->ID == $_current_page->post_parent )
                                $css_class[] = 'current_page_parent';
                } elseif ( $page->ID == get_option('page_for_posts') ) {
                        $css_class[] = 'current_page_parent';
                }

                $css_class = implode( ' ', apply_filters( 'page_css_class', $css_class, $page, $depth, $args, $current_page ) );
                
                //Modification
                if(has_post_thumbnail($page->ID)){
					$image = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'main-featured-thumbnail' );
					$link_title = $link_before . '<img src="'.$image[0].'" alt="'.esc_attr( wp_strip_all_tags( apply_filters( 'the_title', $page->post_title, $page->ID ) ) ).'"/><br />'.apply_filters( 'the_title', $page->post_title, $page->ID ). $link_after;
				} else
					$link_title= $link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after;
                                

                $output .= $indent . '<li class="' . $css_class . '"><a href="' . get_permalink($page->ID) . '">' . $link_title . '</a>';
				//End Modification
				
                if ( !empty($show_date) ) {
                        if ( 'modified' == $show_date )
                                $time = $page->post_modified;
                        else
                                $time = $page->post_date;

                        $output .= " " . mysql2date($date_format, $time);
                }
        }
        
       }

Note that on line #25 , a modification has been added to check if a post thumbnail has been added, using ‘has_post_thumbnail.’

If a featured image is present, ‘$link_title’ is set to display the featured image, with a caption of the post title. Otherwise, the default link title is used.

Some Notes:

– You may need to adjust sizes in the add_image_size call above.
– If you change the name used in add_image_size, ‘main-featured-thumbnail’ , make sure to also change it in wp_get_attachment_image_src
– wp_get_attachment_image_src returns the height/width of the image, so you could use that to scale or resize as needed.
– You might consider adding a default image, to be used when no thumbnail is present.

Using the Custom Walker in Your Worpdress Theme

Now that you have the walker setup, you can call wp_list_pages as normal, using the custom featured image walker. Because the class is more or less the same as the default, all of the default options should work.

In this case, since ‘wp_list_pages’ is called on a page within the loop, get_the_ID() is used to set the ‘child_of’ option.

Example Use with Base CSS:

	<div class='children_pages'>			
		<ul>
		<?php 
			wp_list_pages(array('walker'=>new Walker_Featured_Images(), 'child_of' => get_the_ID(), 'title_li'=>false));
		?>
		</ul>
	</div><!--children_pages-->

A bit of styling, adjust as needed for your theme or any other modifications.

<style>
div.children_pages ul{
margin: 0;
}

div.children_pages ul li{
background:none;
float:left;
width: 210px;
padding: 10px 20;
min-height: 210px;
text-align:center;
}

div.children_pages ul li img{
max-height: 107px;
}

div.children_pages ul li a{
margin: 0;
padding: 0;
}
</style>

9 Comments |