1

I have a page structure like this.

    Portfolio
    - Residential
    - - Resident 1
    - - Resident 2
    - - Resident 3
    - Commercial
    - - Commercial 1
    - - Commercial 2
    - - Commercial 3

The grandchild pages Resident 1 - Commercial 3 have post thumbnails

I have a template for the Portfolio page where i would like to display the 'Residential' and 'Commerical' pages with their child pages like so.

    <div class="grid">
      <h2>Residential</h2>
      <ul>
        <li>  Resident 1 post_thumbnail </li>
        <li>  Resident 2 post_thumbnail </li>
        <li>  Resident 3 post_thumbnail </li>
      </ul>
    </div>
    <div class="grid">
      <h2>Commercial</h2>
      <ul>
        <li>  Commercial 1 post_thumbnail </li>
        <li>  Commercial 2 post_thumbnail </li>
        <li>  Commercial 3 post_thumbnail </li>
      </ul>
    </div>

I'm using get_pages and I have the div's created for 'Residential' and 'Commercial'

    <?php

        $portfolio_sections = array(
            'post_type'     => 'page',
            'child_of'      => $post->ID,
            'sort_column' => 'menu_order',
            'sort_order'    => 'ASC',
            'parent'            => $post->ID
        );

        $sections = get_pages($portfolio_sections);

        foreach($sections as $section){

        ?>

        <div class="grid">
            <h2><?php echo $section->post_title; ?></h2>

              //Create Child pages

        </div><!--.grid-->

        <?php   
        }
    ?>

My problem is creating the child pages in the 'ul' list

I tried using a second foreach loop but this didn't work and I don't know if this is the correct way

    <?php

        $portfolio_sections = array(
            'post_type'     => 'page',
            'child_of'      => $post->ID,
            'sort_column' => 'menu_order',
            'sort_order'    => 'ASC',
            'parent'            => $post->ID
        );

        $sections = get_pages($portfolio_sections);

        foreach($sections as $section){

        ?>

        <div class="grid">
            <h2><?php echo $section->post_title; ?></h2>
            <ul class="imageGrid">
                <?php
                    $portfolio_pages = array(
                        'post_type'     => 'page',
                        'child_of'      => $section->ID,
                        'sort_column' => 'menu_order',
                        'sort_order'    => 'ASC',
                        'parent'            => $section->ID
                    );

                    $pages = get_pages($portfolio_pages);

                    foreach($pages as $page){
                        ?>
                            <li><a href="<?php echo get_the_permalink($page->ID);?>"><?php echo get_the_post_thumbnail($page->ID, "thumbnail"); ?><span><?php echo get_the_title($page->ID);?></span></a></li>
                        <?php
                    }
                ?>
            </ul>
        </div><!--.grid-->

        <?php   
        }
    ?>

--- UPDATE ----

The structure I wanted. A div around each ul list

    <div class="grid">
      <h2>Residential</h2>
      <ul>
        <li>  Resident 1 post_thumbnail </li>
        <li>  Resident 2 post_thumbnail </li>
        <li>  Resident 3 post_thumbnail </li>
      </ul>
    </div>
    <div class="grid">
      <h2>Commercial</h2>
      <ul>
        <li>  Commercial 1 post_thumbnail </li>
        <li>  Commercial 2 post_thumbnail </li>
        <li>  Commercial 3 post_thumbnail </li>
      </ul>
    </div>

The structure from the code is one surrounding div.

    <div class="grid">
      <h2>Residential</h2>
      <ul>
        <li>  Resident 1 post_thumbnail </li>
        <li>  Resident 2 post_thumbnail </li>
        <li>  Resident 3 post_thumbnail </li>
      </ul>
      <h2>Commercial</h2>
      <ul>
        <li>  Commercial 1 post_thumbnail </li>
        <li>  Commercial 2 post_thumbnail </li>
        <li>  Commercial 3 post_thumbnail </li>
      </ul>
    </div>
1

You don't need 2 queries, just use a bit of logic and 2 foreach loops:

$portfolioID = $post->ID;

$portfolio_sections = array(
  'post_type' => 'page',
  'child_of' => $portfolioID,
  'sort_column' => 'menu_order',
  'sort_order' => 'ASC',
);

$sections = get_pages($portfolio_sections);

$hierachical = array();

if ( ! empty($sections) ) {
  foreach ( $sections as $section ) {
    if ( $section->post_parent == $portfolioID ) {
      if ( ! isset( $hierachical[$section->ID]) ) $hierachical[$section->ID] = array();  
      $hierachical[$section->ID]['child'] = $section;
      $hierachical[$section->ID]['grandchildes'] = array();
    } else {
      if ( ! isset( $hierachical[$section->post_parent]) ) $hierachical[$section->post_parent] = array();
      $hierachical[$section->post_parent]['grandchildes'][] = $section;
    }
  }
  foreach ( $hierachical as $id => $hierachical_data ) {
    if ( ! isset($hierachical_data['child']) || ! is_object($hierachical_data['child']) ) continue;
    echo '<div class="grid">';
    echo '<h2>' . get_the_title($hierachical_data['child']->ID) . '</h2>';
    echo '<ul>';
    if ( isset($hierachical_data['grandchildes']) && ! empty($hierachical_data['grandchildes']) ) {
      foreach ( $hierachical_data['grandchildes'] as $grandchild ) {
        if ( has_post_thumbnail($grandchild->ID)) {
          echo '<li><a href="' . get_permalink( $grandchild->ID ) . '" title="' . esc_attr( $grandchild->post_title ) . '">';
          echo get_the_post_thumbnail($grandchild->ID);
          echo '</a></li>';
        }
      }
    }
    echo '</ul>';
    echo '</div>';
  }
}

Code untested but should works.

  • It is not working for grand child pages. – Vinod Dalvi Sep 7 '13 at 11:52
  • Yea. Problem was on query args (that I've copied from OP) that set both parent and child_of argument. Fixed and tested. Ok. @VinodDalvi – gmazzap Sep 7 '13 at 11:52
  • Thanks for the code G.M. but it doesn't produce the correct structure. I have Updated the original question. – Simon Cooper Sep 7 '13 at 12:17
  • @SimonCooper it was just a minor edit. Now the structure is just like you want. – gmazzap Sep 7 '13 at 12:59
  • Thanks G.M. working now. Could you explain why attempt of using a second get_pages inside the first to create the 'li' doesn't work? – Simon Cooper Sep 7 '13 at 13:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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