elegant themes

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

| June 4, 2009 | 19 Comments

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

Tags: , , , , ,

Category: Code Snippets

About Rebecca Markowitz: Rebecca Markowitz has built over 50 WordPress sites for clients as Web Project Manager and WordPress specialist at illuminea. illuminea is a Jerusalem-based boutique web agency. WPGarage shows my dedicated relationship with WordPress over the years - full of love, laughs, tears, growth and strong drinks. L'chaim! View author profile.


Comments (19)

Trackback URL | Comments RSS Feed

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

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

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

    :)

  3. gwyn says:

    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&gt; 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.

  4. 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.

  5. Elio says:

    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!

  6. [...] How to create a Simple Directory in WordPress using Grandparent, Parent, and Child Pages – This tutorial by Rebecca Markowitz over at WordPress Garage goes over how to set up a simple directory on your site. Includes all the code you’ll need, as well as a live site using the code outlined in the post. [...]

  7. [...] How to create a Simple Directory in WordPress using Grandparent, Parent, and Child Pages – This tutorial by Rebecca Markowitz over at WordPress Garage goes over how to set up a simple directory on your site. Includes all the code you’ll need, as well as a live site using the code outlined in the post. [...]

  8. [...] How to create a Simple Directory in WordPress using Grandparent, Parent, and Child Pages – This tutorial by Rebecca Markowitz over at WordPress Garage goes over how to set up a simple directory on your site. Includes all the code you’ll need, as well as a live site using the code outlined in the post. [...]

  9. [...] How to create a Simple Directory in WordPress using Grandparent, Parent, and Child Pages | WordPress… (tags: wordpress code hacks php) [...]

  10. scott says:

    I love what you’ve done here. How would I modify the code to JUST have Parent and Child pages but no grandparent?

  11. Dave says:

    dude…you have no idea how long it took for me to find this post and make my world come together in a beautiful array of happy thoughts.  thanks for this snippet – saved me!  (i knew someone had to have figured this out and well enough for a php hack to understand).
    thanks…did i say that yet!?

  12. Andy says:

    Hi

    Great article, thanks for the info.

    One question, could I run this for two separate directories?
    I.e. Have two separate grand parent pages

    Thanks for any help or advice offered

  13. Teach says:

    Thanks for this solution this is very helpful for those who are using wordpress

  14. Covandy says:

    Do you think you could expand this to further sub pages > more depth than grandparents. Does wordpress support sub pages further than this?

  15. I have an existing jewelry site for our store here in Jacksonville that this code is going to ROCK on. Thanks!

  16. Howard says:

    Link to full page.php broken or page no longer exist. Would like to use this code but example not explicit enough.

  17. NanC says:

    I’m new to using WordPress, so new that I’m not sure if your advice above answers my question, which is…

    My WordPress-powered site has 5 Pages, all of which appear in my horizontal menu.  1 Page has 2 Children.  Here’s is an example of my menu:

    HOME
    ABOUT
        ABOUT ABC
        ABOUT DEF
    FAQ
    BLOG
    CONTACT

    The ABOUT page has no content (intentionally).  I created the ABOUT page only so it could have 2 Children as submenus.  When someone clicks on ABOUT in the Menu, I don’t want the ABOUT page itself to load.  I just want the submenus to appear and be clickable hyperlinks to their respective pages.

    Is what I’m trying to do possible?  If so, what code do I need?
    (I tried posting this question twice in the WordPress.org Support Forum, and both times, my question didn’t register even though I was logged in.)

    Thank you!

  18. boykalbo says:

    wow… great work Rebecca, did not know, I don’t need now to switch to other blogging tools to create a directory, with just a few hack with your code… it done thanks!!

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.

More in Code Snippets (19 of 34 articles)