[resolved] Grid page template twentyeleven (11 posts)

  1. pietergoosen
    Posted 3 years ago #


    Can anyone help me with a page template or the coding for a 4x5 grid. I'm working on a twentyeleven childtheme for a video and photo website. So I need the template to show the photos in a 4x5 grid. Many thanks

  2. Pioneer Web Design
    Posted 3 years ago #

    Not sure what you mean by a 4x5 grid....is this rows and columns of thumbnails or an aspect ratio or?

  3. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Your query is still a bit vague, are you using a type of grid system?

  4. pietergoosen
    Posted 3 years ago #

    Hi, thanks for your reply. No, I'm not yet using any type of grid system as yet. I want just the images from the posts to show on one page in a 4column 5row grid. Hope that helps a bit

  5. Michael
    Forum Moderator
    Posted 3 years ago #

    general approach is to format the post div with 'float: left;' and a 'clear:left;' on each fifth post.

    this is more a css problem, so it might help if you post a link to yoursite to show what you have so far.

    are you familiar with page templates and custom queries?

    you could paste the full code of the template into a http://pastebin.com/ and post the link to it here as a base for any suggestions - http://codex.wordpress.org/Forum_Welcome#Posting_Code

    how are your ideas for the responsive bahaviour on small screens?

  6. pietergoosen
    Posted 3 years ago #

    I'm not to bad on page templates. I saw a post about posting in two columns, that is what I basically need, except that I need 4 columns. I haven't really thought about the responsive lay out yet. another thing is, the css might do the trick, but where must my div go for me to be able to style every 5th post. one last thing, I'm using a very basic twenty eleven child theme with a few css tweaks

  7. Michael
    Forum Moderator
    Posted 3 years ago #

    but where must my div go for me to be able to style every 5th post

    to make any suggestions for that it would be best to see your existing code.

  8. pietergoosen
    Posted 3 years ago #

    alchymyth, ok, I found this on your website transformationpowertools.com/playing-with-columns-stacking-posts-grid-style. I'm quite happy to use the grid lay out you explained there (4x4). The problem is, the page shows up blank. I can't seem to get the code working in a page template. it doesn't seem to call up the posts or the thumbnail images. Can you please give me the complete code. Many thanks

  9. Michael
    Forum Moderator
    Posted 3 years ago #

    that 'stacking' code is not an ideal code if you are considering any responsive adaptation of the column number;
    it is also using a custom query; for your purpose, you will need to remove that query, if your code is used in an index or archive template; or re-define what the query is supposed to show.

    generally, if you have post thumbnails of equal height, the simple code of adding a clear left for every fourth post is much easier;
    you would define the width of each thumbnail so that 4 images will fit into a row, and set the number of posts from within dashboard - settings - reading.

    you can add a css class for the 'clearleft' from within functions.php:

    function clear_left_four_class( $classes ) {
     global $wp_query;
     if( $wp_query->current_post%4 == 0 ) $classes[] = 'clearleft';
    return $classes;

    minimum css:

    .hentry { width: 24%; margin-left: 1%; float: left; }
    .clearleft { clear: left; margin: 0; }


    for further suggestions, please post the code as you have is so far, and post a link to your site to the page using the template, to illustrate what the result is.

  10. pietergoosen
    Posted 3 years ago #

    @ alchymyth, many thanks for your solution, it works great. Unfortunatly I can't give a link to my website, as it is not yet live, I'm still busy developing it on my pc. Once again, many thanks for your help

  11. Michael
    Forum Moderator
    Posted 3 years ago #

    you are welcome ;-)

    no need to post a link if everything is working as expected.

Topic Closed

This topic has been closed to new replies.

About this Topic