Multiple Loops That Pull Pages (Child/Grandchild) While Styling the First Entry

Question

This is either something really simple that I've orchestrated into a complex problem or it really is a complex problem.

I've decided to use pages to display information. If I go to a page called Houston, I want to see the subpages of Houston, but also the children of those subpages. I'd like these styled in a block format similar to a "magazine" website. I think I'm really close, but it's just eluding me. Here's a diagram of what I'm trying to accomplish in case my description is not up to snuff.

The code I'm using...

<?php
$my_query = new WP_Query(
    array(
        'sort_column'  => 'menu_order, post_title',
        'depth' => 2,
        'showposts' => 30,
        'post_parent' => $post->ID,
        'post_type' => 'page'
    )
); ?>
<?php $count = 0; ?>  
<?php while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
<?php $count++; ?>  

<?php if ($count == 1) : ?>  
    <div id="top">
      <div class="first">&nbsp;</div>
      <!-- end details -->
          <h2 class="clear"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h2>
      <p class="clear"><?php the_content('read more...'); ?></p>
    </div>
    <hr/>
<?php elseif ($count == 4) : ?>  
    <div class="middle">
      <h3><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
      <p class="clear"><?php the_content('read more...'); ?></p>
    </div>
<?php else : ?>  
    <div class="last">
      <h3><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
      <p class="clear"><?php the_content('read more...'); ?></p>
    </div>
<?php endif; ?>

This is pulling in the children of Houston but not the grandchildren. It is styling the first child but...I just want the title of the child, then the first grandchild to be styled. I guess what I'm looking for is a multiple loop? Am I setting myself up for failure with this path?

Answer 1

Something like this should work:

$args = array(
    'sort_column' => 'menu_order, post_title',
    'child_of'    => $post->ID,
    'parent'      => $post->ID,
    'hierarchial' => 0,
);
$children = get_pages( $args );

foreach( $children as $child ) {
    $child_args = array(
        'sort_column' => 'menu_order, post_title',
        'child_of'    => $child->ID,
        'parent'      => $child->ID,
        'hierarchial' => 0,
        'number'      => 3
    );

    $grandchildren = get_pages( $child_args );

    setup_postdata( $child );
    ?>
    <h1><?php the_title(); ?></h1>
    <?php
    $first = true;
    foreach( $grandchildren as $gchild ) {
        setup_postdata( $gchild ); ?>
        <?php if( $first === true ) : ?>
            <div class="first">
                <!-- do your output -->
        <?php else : ?>
            <div class="middle">
                <!-- do your output -->
        <?php endif; ?>
            </div>
        <?php
        if( $first === true )
            $first = false;
    }
}

note: that's completely untested. I based it off the codex page on get_pages(), so you may have to fiddle with getting that to return only one level of posts.

Answer 2

You have so many things wrong with your code, to start WP_Query does not have 'sort_column' , or 'depth' parameters. the use of $do_not_duplicate = $post->ID; does nothing at all and a few other things.

What you need is to get the children (just the ids, no need to get the post object since you are not using any of the fields other then title and premalink), loop over them and for each one get the children (meaning main page grandchildren) and loop over them.

something like this:

<?php   
//store page
$temp = $post;
//get children
$children = get_posts(array(
    'orderby'  => 'menu_order',
    'post_per_page' => 30, 
    'post_parent' => $post->ID, 
    'post_type' => 'page',
    'fields' => 'ids')
);
//children loop
foreach ($children as $child) {
    $do_not_duplicate[] = $child;
    ?>
    <div id="child">
        <h2 class="clear"><a href="<?php echo get_permalink($child); ?>" ><?php echo get_the_title($child); ?></a></h2>
    </div> <?php
    //get grandchildren
    $grandchildren = get_posts(array(
        'orderby'  => 'menu_order',
        'post_per_page' => 3, 
        'post_parent' => $child, 
        'post_type' => 'page',
        'fields' => 'ids')
    );
    $count = 0;
    //grandchildren loop
    foreach($grandchildren as $granchild){
        setup_postdata($granchild);
        $count++;
        if ($count == 0){ ?>
            <div id="top">
                <div class="first">&nbsp;</div>
                <h3 class="clear"><a href="<?php the_permalink($granchild); ?>" ><?php the_title($granchild); ?></a></h3>
                <?php echo get_the_post_thumbnail($granchild->ID, 'thumbnail'); ?>
                <p class="clear"><?php the_content('read more...'); ?></p>
            </div> <?php 
        }elseif ($count == 1){ ?>  
            <div class="middle">
                <h3><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
                <p class="clear"><?php the_content('read more...'); ?></p>
            </div> <?php
        }else { ?>  
            <div class="last">
                <h3><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
                <p class="clear"><?php the_content('read more...'); ?></p>
            </div><?php
        }
    }
}
//restore page
$post = $temp;