treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] How to display and style pages as grid on homepage of site

  • I want a grid of thumbnails on my homepage that each link to a separate page. These thumbnails would pull from the featured image of that page. The page title will also be displayed above each thumbnail.

    Similar to http://demo.graphpaperpress.com/mixfolio/ in a way but those thumbnails would be pulling from pages and not images.

    Thanks!
  • Sounds like you need to use 'iframes' but only for pages you're hosting yourself.
  • Definitely iframes is the worst possible route you could take here!

    You'll just need to run a loop with query_posts, should be pretty easy. Something like this:
    <?php query_posts('post_type=page&post_parent=####'); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
    <?php endwhile; ?>
    <!-- post navigation -->
    <?php else: ?>
    <!-- no posts found -->
    <?php endif; ?>
    <?php wp_reset_query(); ?>

    Where '####' is the ID of the parent page (probably the portfolio page?).
  • That looks awesome Doc, now what would be the best method to style these pages so they line up perfectly in a grid?
  • Well, presumably all of your images are going to be the same size, so you could just wrap a div around them like this:
    <div class="grid-item"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></div>

    And then float them all to the left. Apply appropriate margins, etc.
  • Thanks Doc, I will try this out today. Much appreciated!
  • Hey Doc, I've implemented what you recommended but it is only pulling the image from the slider I have configured for the homepage. I have since disabled the slider on the homepage but it is only pulling that slider image which is itself another page.

    This is where I am testing out the grid if you would like to have a look.

    http://studio7.greenflagseo.com/pages-grid/

    Thanks!
  • Can you post the code that you're using for your loop?
  • I actually used your code and fixed some stuff on my page, and your code works perfect. All set, thank you!
  • No problem!