WordPress List Pages with The Excerpt

Published by John on September 24, 2012 Under Wordpress

For an existing WordPress theme, I wanted to display a list of child-pages, with a brief description next to each one. Using the excerpt seemed like a natural choice, as it provides an easy way to provide a small chunk of text about a post.

Add Support for Page Excerpts in Your WordPress Theme

By default, excerpts are not enabled for pages, so first, you will need to enable theme support for excerpts on pages.

Add the following to your functions.php file.

add_post_type_support( 'page', 'excerpt' ); // Add support for excerpts on pages.

The above enables excerpts to be used with pages.

Custom Walker for Displaying Excerpts

Add the following to your functions.php file. This creates a new custom page walker called ‘Walker_Show_Excerpt’ , which can be used with the ‘wp_list_pages’ function.

class Walker_Show_Excerpt 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(!empty($page->post_excerpt))
					$page_excerpt = $page->post_excerpt;
				else
					$page_excerpt = kcr_get_simple_excerpt($page->post_content);
				
				if(!empty($page_excerpt))
					$page_excerpt =  " - {$page_excerpt}";
				
				

                $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>{$page_excerpt}";
                //End Modification
                 
                if ( !empty($show_date) ) {
                        if ( 'modified' == $show_date )
                                $time = $page->post_modified;
                        else
                                $time = $page->post_date;
 
                        $output .= " " . mysql2date($date_format, $time);
                }
        }
         
       }

function kcr_get_simple_excerpt($content, $size = 70){
	
	$content = strip_tags($content);
	$content = explode(' ', $content);
	$content_size = count($content);
	$the_excerpt = '';
	
	for($i = 0; $i < $size && $i <$content_size; $i++)
		$the_excerpt .= $content[$i]." ";
	
	return ($content_size > $size ? trim(trim($the_excerpt), '.').'...' : trim($the_excerpt));
		
	
}

The modification begins on line #25 and checks to see if the page has an excerpt. If it does not, the function ‘kcr_get_simple_excerpt’ , which is on line #53, is called. kcr_get_simple_excerpt takes the content and generates a non-html excerpt, using a default size of 70.

Todo:

There are several things you might want to do in order to improve this or make it a better fit for your wordpress theme.

– Change the excerpt size. By default, you can enter a good deal of text into the excerpt field, in the database it is stored as a “text” field, so there is plenty of room. However, you might want to standardize it a bit, tweaking the default size in ‘kcr_get_simple_excerpt’

– Add some styling. You will need to tweak the styling and possibly even how it is displayed with the ‘modification’ section of the walker

– The ‘link_before’ and ‘link_after’ are still setup to wrap the link text, NOT the excerpt. You might want to tweak this, although I think this way makes sense.

– Add alt-text or tweak link styling / format, see “link_title” line.

Using in Your Theme

Once you have the above walker added to your functions.php file, or in a separate php file, you can use “wp_list_pages” function with the “walker” option.

Below is a quick example of how you might use it to display a list of child pages(child_of) when viewing a page:

$args = array(
	'child_of'     => get_the_ID(),
	'echo'         => 0,
	'title_li'    => ' ',
	'sort_column'  => 'menu_order, post_title',
	'walker'=>new Walker_Show_Excerpt()
);

$children = wp_list_pages( $args );

if($children)
	echo "<div id='child_pages'><h2>Browse {$post->post_title}:</h2><ul id='child_pages'>$children</ul></div>";

Note: In the above example, the child_of option is used, so this will only show subpages of the current page.

No Comments |