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 Answer 1

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.

6
  • It is not working for grand child pages. Sep 7, 2013 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, 2013 at 11:52
  • Thanks for the code G.M. but it doesn't produce the correct structure. I have Updated the original question. Sep 7, 2013 at 12:17
  • @SimonCooper it was just a minor edit. Now the structure is just like you want.
    – gmazzap
    Sep 7, 2013 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? Sep 7, 2013 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.