How to create a Simple Directory in Wordpress using Grandparent, Parent, and Child Pages

June 4, 2009 – 12:04 pm | by Rebecca Markowitz

I wanted to create a simple directory of non-profit organizations. To do so,  I wanted to use pages for the directory, rather than posts so that I could separate the static directory listings from the dynamic blog posts. I didn’t want to have to exclude tons of categories from feedburner and the main loop.

So, I started exploring the whole family in Wordpress – grandparents, parents, and children. Translation for those not yet used to seeing Wordpress analagous to the family in My Big Fat Greek Wedding: Pages, sub-pages, and sub-sub pages

Simple Directory Setup

  • Directory Page (grandparent): Displays list of Non-Profit Organization Categories (ex. social, environment, health, etc.)
  • Category Page (parent): Show title and excerpt of each Organization within a category (ex. Environment Organizations)
  • Single Organization Page (child/current): Show content about a single organization(ex. SaveTheEarth – made up org for this example)

Here’s how to do it

  1. Create a Page Called Directory. This will be the Directory Page (grandparent)
  2. Find the Page ID. Let’s say the Page ID = 5. Depending on how you want to display the category info, you can
  3. Manually add the name of each category, a short description and a link
  4. Open up page.php so we can setup The Category Page (Parent Page). We want to show title and excerpts of each organization for each category.
  5. Add this code to page.php – Checks if we’re on a sub page / child page of the Directory (Page ID =10) and if so, list the pages in alphabetical order with excerpts. For the excerpt, I’m using the plugin Limit Posts since it didn’t work with The Excerpt Reloaded.<?php
    $current = $post->ID;
    $parent = $post->post_parent;
    $grandparent_get = get_post($parent);
    $grandparent = $grandparent_get->post_parent;
    ?>

    <?php if ( $post->post_parent==”10″   ){ ?>
    <?php $pageChildren = $wpdb->get_results(“SELECT *    FROM $wpdb->posts WHERE post_parent = “.$post->ID.”    AND post_type = ‘page’ ORDER BY post_title ASC”, ‘OBJECT’);    ?>

    <h2 class=”titles”><a href=”<? php echo get_permalink($pageChild->ID);  ?>”> <? php echo $pageChild->post_title;  ?></a></h2>

    <?php the_content_limit(280, “”); ?><div class=”readmore”><a href=”<?php echo get_permalink($pageChild->ID); ?>” rel=”bookmark” title=”Permanent Link to <? php echo $pageChild->post_title;   ?>”>Read More &raquo;</a></div>

    (make sure to delete the space between <? and php -  I had to to do that so it wouldn’t execute in this post)

  6. Single Organization Page (Child Page) On page.php, after the code you added in step 5, add this code that will check to see if we’re on the grandchild page. This will be the actual organization’s page. In our example, the SaveTheEarth Page. This is very helpful information in case you want to add a different style or add special items in the sidebar, etc.
    <?php if ( $pageChildren ) : foreach ( $pageChildren as $pageChild ) : setup_postdata( $pageChild ); ?>

7. Set up how the rest of the pages on your site will look:

On page.php, after the code in step 6, add this code which instructs every other page in the site to act normally and display the content

<?php endforeach; ?>
<?php else : ?>

<?php the_content(); ?>
<?php  endif; ?>

You can see the full page.php code here

You can see the directory in action here

I figured this out using the following helpful posts:

* http://wordpress.org/support/topic/186206
* http://wpguru.co.za/page/display-title-excerpt-of-child-page

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]
  1. 10 Responses to “How to create a Simple Directory in Wordpress using Grandparent, Parent, and Child Pages”

  2. By Notthat Funny on Jun 4, 2009 | Reply

    Great post/tip/tutorial Rebecca. I found your post via a twitter from ThemeForest.

    I already have an idea of how to implement your offering.
    But, by chance, have you a ‘demo’ link of your “Directory” in acti0n?

    Thanks in advance.

  3. By Rebecca Markowitz on Jun 4, 2009 | Reply

    Thanks, Notthat, I’m glad it helped you. Good idea about the demo link – I added it now to the end of the post so you can see it in action.

  4. By Notthat Funny on Jun 4, 2009 | Reply

    Ah, good move on that Rebecca. Is much clearer now. Thanks!

    I’ll now go ‘tweet’ via my “other” persona…

    :)

  5. By gwyn on Jun 4, 2009 | Reply

    This is a very elegant solution, Rebecca, thanks for sharing.

    I recently had to do something similar for a therapy site with several locations and lots of therapists and ended up using categories, custom fields and a plugin that lists categories (http://picandocodigo.net/programacion/wordpress/list-category-posts-wordpress-plugin-english/ ) to do it.

    <a href=”http://vancouver-therapist.com/wordpress/cats/”>http://vancouver-therapist.com/wordpress/cats/</a> is the main category index page, and then each office has a category page with a conditional statement that displays the appropriate map/description for the office.

  6. By John : Site Doublers on Jun 5, 2009 | Reply

    Great to see another “how-to” article.

    The people in your case study (Israeli non-profit) need to put some content on all their sub-pages. For example I just clicked on the

    directory > health

    link and the site just looks broken because there is no content.

    If they are busy populating the pages then they should do at least one of each. I bet they are doing all of the 1st, then all of the 2nd, and so on.

  7. By Elio on Jun 5, 2009 | Reply

    This is going to be very handy when I have to code a site for a personal project I’m working on. Very good, thanks for sharing!

  1. 4 Trackback(s)

  2. Jun 6, 2009: WordPress Weekend Resources - June 5, 2009 | Theme Lab
  3. Jun 14, 2009: WordPress Weekend Resources - June 5, 2009 | rapid-DEV.net
  4. Jun 19, 2009: WordPress Weekend Resources – June 5, 2009 | GreyBlogs.com - Themes
  5. Jun 30, 2009: links for 2009-06-29 at So It’s Come To This:

Post a Comment

Studio Press Premium Themes