Listing Child pages with Excerpt

For those of you who use Wordpress as a CMS, I found myself searching for a way to list several related pages with an excerpt.  I read through this article by The Wordpress Guru, and found that it basically described what I wanted to do, however it used calls to the database that I didn’t feel was the best way to do it.  Wordpress should have something built in to do this, right?  Right.

My searches through the Wordpress Codex left me a little overwhelmed.  I could list all pages using get_children(), but if I tried to retrieve the title or excerpt it would only retrieve the parent posts data.  So after a little more searching and testing I found the best way, that I know of, to do this:
<?php
// Set up the arguments for retrieving the pages
$args = array(
    'post_type' => 'page',
    'numberposts' => -1,
    'post_status' => null,
// $post->ID gets the ID of the current page
'post_parent' => $post->ID,

    'order' => ASC,
    'orderby' => title

    );
 $subpages = get_posts($args);
 // Just another Wordpress Loop
 foreach($subpages as $post) :
    setup_postdata($post);
 ?>
<h4><a href="<?php the_permalink(); ?>"
id="post-<?php the_ID(); ?>">
<?php the_title(); ?>
</a>
</h4>

 <?php the_excerpt(); ?>

 <?php endforeach; ?>

To utilize this feature this code will be placed in your template.  For me I put this in page.php just above the call to get_footer();

The reason I did this is so that if I create additional pages that will contain children this list will come after the content on those parent pages.  However, you can put this above ‘The Loop’ as well if you want this list to appear above your content.

If you have any questions about how this works or how to utilize this script, please post a comment.  Again this is my first how-to, so if I left out something major politely let me know and I will fix it.

Posted on 30 March '09 by Gabe, under How To, Wordpress.

8 Comments to “Listing Child pages with Excerpt”

24.01.10 at 08:16
Posted by calicosun

Hi there, I know you posted this ages ago but I am desperate! I am trying to do pretty much exactly what your title suggests but have read though you code and don’t totally understand how it gets the child page of a parent page to display.

I have a parent page with two child pages under it. I would like to display the title and first few lines (using read more preferably or excerpt – I have an excerpt plugin) of the two child pages in a small area on my homepage with a ‘read more’ link through to the full pages. My site is not a blog, more of a magazine site.

I have looked everywhere for an answer, posted the question on wp forum and still had no luck. My site is not live yet so I am unable to give you a url.

Can you suggest any way the above code could be tweaked to do what I am wanting? I am still learning wp and php which is why I am having so much difficulty figuring this out.

Thanks so much!

24.01.10 at 12:18
Posted by Gabe

I think the problem may be that you will be listing these pages on the homepage. Not a problem really, except that this post doesn’t address that issue. What I am doing does not involve other pages. In other words I’m not listing these pages on the home page.

Here is an example of how I’m using it.

I’m doing two different things here. First I’m providing a menu of child pages, and second, I am providing the child page titles with excerpts. The title of the excerpt links to the full article or page.

The problem that you will run into in your arrangement is that you have this on your homepage, which is not the parent page of your child pages. What you might try is instead of using:
'post_parent' => $post->ID,
use:
'post_parent' => insert parent post ID here,

In other words:
'post_parent' => $post->ID,
becomes,
‘post_parent’ => 513,co

Your post_parent will be different (i.e. 513, 212, 105, etc.)

Take a look at this article from WP Recipes.

Here is a bit more from WebLogTools Collection. I've modified it to what I believe you are wanting to do. His method does not use an $args array, but rather sets the arguments directly in the query();


<h3>Title of your Pages</h3>
<ul>
<?php
$childPosts = new WP_Query();
$childPosts->query('showposts=2&post_parent=513');
?>
<?php while ($childPosts->have_posts()) : $childPosts->the_post(); ?>
<li><?php the_title(); ?><br />
<?php the_excerpt(); ?><br />
<a href="<?php the_permalink() ? rel="nofollow">">Read More...</a></li>
<?php endwhile; ?>
</ul>

I hope this helps, there are so many ways to make Wordpress spit out what you want. A lot of it depends on how you plan to use it. I think this last option will be the best solution for what you want, but without having much more detail about your specific template it would be hard to say.

If you still need help with it let me know. I love troubleshooting PHP and Wordpress, and I'm glad to help if I can.

24.01.10 at 12:34
Posted by Gabe

My theme broke using the pre tags, but I hope you can understand this anyway.

24.01.10 at 15:44
Posted by calicosun

Thank you so much for replying to me, and so quickly! I wasn’t very hopeful you would and am very grateful you have.

I received a reply from the wp forum as well which was great as have not had much luck there. Not surprised, they must get zillions of posts a day.

The code from wp worked so have supplied it here. I have not had a chance to modify your code so it works in my situation but when I get a chance I will as yours uses the excerpt and the wp solution uses the ‘read more’ tag that you put in the actual page post.

Here is the code they suggested:
'page',
'post_parent' => 93,
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo 'List of Child Pages for Page ID 93';
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<a href="" rel="bookmark" title="Permanent Link to "></a>

And here is a link to my post on the wp forum that probably explains things better (warning, there is also a bit of rambling from me – was tired when I wrote!): http://wordpress.org/support/topic/355815?replies=4#post-1364313

And here is a link to the test site (just html/css for design approval): http://gridmaster.slicetest.co.nz/

I wanted the excerpts to go into the little orange box at the bottom right, just above the footer.

I did find some info that said posting excerpts and read mores on a static page was not as simple as on a post. It said you needed to include: in the code where the content call is. I just wasn’t sure how to do this. I see that Michael (wp moderator) has included a variation of this: global $more; $more = false;
plus the: wp_reset_query(); // Restore global post data stomped by the_post().

I don’t totally understand what either of these things do exactly so will do a bit more research.

Thank you so very much. I do appreciate your help. It can get a little overwhelming when at the early stages of all this. Plus when you work for yourself you don’t have other more experienced work mates to learn from or bounce ideas off. I do have HEAPS of books but there are none really on the advance use of wordpress, particularly with regard to using wp as a cms. There you go, perhaps you could write a book! I know there are some coming up in the next few months (I buy from Amazon) but how advance they are I am not sure.

24.01.10 at 15:55
Posted by calicosun

Ops the bit of code that you are suppose to put in static pages to make read mores work disappears as used the php tags. Here it is without: global $more; $more = 0;

Your code will be really helpful for me as, although on this site I really wanted the read more of the child page to show rather than the excerpt (used a plug in as pages don’t have excerpts as you know) which is what the wp forum solution allows, I have another site where want an excerpt that reads slightly differently to the main post.

I do have one other question. Slightly silly probably… how do you get it so your code sits in the little blue boxes? On some forums they have a separate frame with a scroll bar (as in comment fields like this).

Thanks!

24.01.10 at 18:11
Posted by Gabe

For the code text I created a style for pre tags that gives it the blue color and dashed border. Then I surround all code with <pre> and </pre>

24.01.10 at 18:28
Posted by Gabe

How often will that content be changing. It looks like it is something that you would want to keep on the homepage for quite some time. If that’s the case, then you might think about just hard coding it into the template, or into a widget. Unless those topics will be changing or rotating, it’s probably not necessary to use this kind of script.

24.01.10 at 18:49
Posted by calicosun

Ta for the heads up on the blue box! The site is for a client so I want to give them ’some’ flexibilty in making changes and updates.

It is also something I needed to know how to do for a couple of other websites I will be doing in the next few months – again, for clients who want to be able to tweak the copy. Obviously, if it was something that was going to change a lot such as latest news I would use posts.