Grow your CSS skills. Land your dream job.

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

  • # January 30, 2012 at 2:02 am

    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!

    # January 30, 2012 at 5:20 am

    Sounds like you need to use ‘iframes’ but only for pages you’re hosting yourself.

    # January 30, 2012 at 12:18 pm

    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(); ?>
    ">< ?php the_post_thumbnail(); ?>
    < ?php endwhile; ?>

    < ?php else: ?>

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

    Where ‘####’ is the ID of the parent page (probably the portfolio page?).

    # January 30, 2012 at 12:24 pm

    That looks awesome Doc, now what would be the best method to style these pages so they line up perfectly in a grid?

    # January 30, 2012 at 12:28 pm

    Well, presumably all of your images are going to be the same size, so you could just wrap a div around them like this:

    And then float them all to the left. Apply appropriate margins, etc.

    # January 30, 2012 at 2:12 pm

    Thanks Doc, I will try this out today. Much appreciated!

    # January 31, 2012 at 12:18 am

    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!

    # January 31, 2012 at 12:28 pm

    Can you post the code that you’re using for your loop?

    # January 31, 2012 at 2:24 pm

    I actually used your code and fixed some stuff on my page, and your code works perfect. All set, thank you!

    # January 31, 2012 at 2:47 pm

    No problem!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".