Support » Themes and Templates » Grid page template twentyeleven

  • Resolved pietergoosen



    Can anyone help me with a page template or the coding for a 4×5 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 4×5 grid. Many thanks

Viewing 10 replies - 1 through 10 (of 10 total)
  • Not sure what you mean by a 4×5 grid….is this rows and columns of thumbnails or an aspect ratio or?

    Moderator Andrew Nevins


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

    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



    Forum Moderator

    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 and post the link to it here as a base for any suggestions –

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

    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



    Forum Moderator

    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.

    alchymyth, ok, I found this on your website I’m quite happy to use the grid lay out you explained there (4×4). 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



    Forum Moderator

    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.

    @ 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



    Forum Moderator

    you are welcome 😉

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Grid page template twentyeleven’ is closed to new replies.