Title: Grid View with Static Elements
Last modified: August 19, 2016

---

# Grid View with Static Elements

 *  [snowboy76](https://wordpress.org/support/users/snowboy76/)
 * (@snowboy76)
 * [15 years, 12 months ago](https://wordpress.org/support/topic/grid-view-with-static-elements/)
 * I am building a theme (from scratch) and I would like to have posts displayed
   in a grid with three static elements that remain in the same place on the page
   with posts to the left and right of them. Like this:
 * [Post 1 (newest)] [Post 2] [static element Div] [Post 3]
    [Post 4] [static element
   Div] [Post 5] [Post 6] [Post 7] [Post 8] [Post 9 (oldest)] [static element Div]
 * Would an alteration of this method work?
 * [http://perishablepress.com/press/2008/09/01/multiple-loops-and-multiple-columns-with-wordpress/](http://perishablepress.com/press/2008/09/01/multiple-loops-and-multiple-columns-with-wordpress/)
 * Thanks a head of time.

Viewing 13 replies - 1 through 13 (of 13 total)

 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [15 years, 12 months ago](https://wordpress.org/support/topic/grid-view-with-static-elements/#post-1468252)
 * there is probably a way to modify the method from your link; however, imho there
   is a simpler way to do what you want, such as the following:
 *     ```
       <?php
       if (have_posts()) :
         $columns = 3; //set the number of columns
         $i = 1;
         while (have_posts()) : the_post(); ?>
   
       <div class="post<?php if( ($i-1)%$columns == 0 ) { echo ' clearleft'; };  if( $i%$columns == 0 ) { echo ' last'; }; ?>">
       <!-- show the post -->
       <?php if($i == 2) { ?>
       <!-- show first static element -->
       <?php } elseif($i == 4) { ?>
       <!-- show second static element -->
       <?php } elseif($i == 9) { ?>
       <!-- show third static element -->
       <?php } ?>
   
       </div>
       <?php $i++; endwhile;
   
       else:
         echo 'no posts';
       endif; ?>
       ```
   
 * minimum css for it:
 *     ```
       .post {
       float:left;
       width: 100px; /*adjust to your site*/
       margin-right: 10px; /*adjust*/
       max-height:150px; /*not necessary*/
        }
       .post.clearleft { clear:left; }
       .post.last { margin-right: 0px; }
       ```
   
 * the above code has no safeguards for when there are less than 9 posts.
    this 
   could be refined, when you define what is to happen in this case.
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [15 years, 12 months ago](https://wordpress.org/support/topic/grid-view-with-static-elements/#post-1468368)
 * with quite a bit of adjustment, to account for the divs for the static content,
   and allow for less than 9 posts, here is a new version:
 * [http://wordpress.pastebin.com/uxEwwkxM](http://wordpress.pastebin.com/uxEwwkxM)
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [15 years, 12 months ago](https://wordpress.org/support/topic/grid-view-with-static-elements/#post-1468389)
 * correction of above linked code; there was a malfunction if the first or the 
   last element was static.
    (for the css see above linked code)
 * corrected code: [http://wordpress.pastebin.com/BEZzjiKN](http://wordpress.pastebin.com/BEZzjiKN)
 *  Thread Starter [snowboy76](https://wordpress.org/support/users/snowboy76/)
 * (@snowboy76)
 * [15 years, 12 months ago](https://wordpress.org/support/topic/grid-view-with-static-elements/#post-1468426)
 * Yeah… Have I mentioned I don’t know a drop of PHP?
 * So where in the example would I place my code for the non-static posts? I see
   you are modify the loop and telling the static posts to do different things depending
   on what is happening, but where do a put my existing post code?
 * Thanks again.
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [15 years, 12 months ago](https://wordpress.org/support/topic/grid-view-with-static-elements/#post-1468427)
 * in the code from this pastebin [http://wordpress.pastebin.com/BEZzjiKN](http://wordpress.pastebin.com/BEZzjiKN)
   in line 34/35 – find this code:
 *     ```
       the post<br />
       <?php the_title(); ?>
       ```
   
 * replace it with the code of your posts:
    typically everything between the `while(
   have_posts()) : the_post(); ?>` and the `<?php endwhile; ?>` of the wordpress
   loop (both lines **not **included)
 *  Thread Starter [snowboy76](https://wordpress.org/support/users/snowboy76/)
 * (@snowboy76)
 * [15 years, 12 months ago](https://wordpress.org/support/topic/grid-view-with-static-elements/#post-1468431)
 * This is why I dislike things that use programming code… So I copied your code
   in. Now I get “parse error” warning on like 100. (Actually its on whatever line
   the next <php> statement is on.)
 * Full index.php code (cut/pasted) at [http://wordpress.pastebin.com/EFSKutg4](http://wordpress.pastebin.com/EFSKutg4)
 * What am I missing?
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [15 years, 12 months ago](https://wordpress.org/support/topic/grid-view-with-static-elements/#post-1468433)
 * looks like the `<?php endwhile; ?>` was left in from your old loop;
    try and 
   remove this line.
 *  Thread Starter [snowboy76](https://wordpress.org/support/users/snowboy76/)
 * (@snowboy76)
 * [15 years, 12 months ago](https://wordpress.org/support/topic/grid-view-with-static-elements/#post-1468437)
 * alchymyth, there is now a parsing error at line 102 which is the last line in
   the file, namely <?php get_footer(); ?>.
 * Could be the code you gave me needs a closing out in someway before the sidebar
   and footer statements?
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [15 years, 11 months ago](https://wordpress.org/support/topic/grid-view-with-static-elements/#post-1468448)
 * > Could be the code you gave me needs a closing out in someway before the sidebar
   > and footer statements?
 * you are absolutely right.
 * sorry for messing this up and for the late reply – i haven’t been on my computer
   during the day:
 * i missed to put the ‘endif’ of the loop into the pastebin code:
 * this is how it looks (inclomplete):
 *     ```
       endwhile;
             endif;
       // end of trial with static elements ?>
       ```
   
 * and this is how it should look:
 *     ```
       endwhile;
             endif; 
   
       endif; // this is the end of 'if(have_posts())' //
   
       // end of trial with static elements ?>
       ```
   
 *  Thread Starter [snowboy76](https://wordpress.org/support/users/snowboy76/)
 * (@snowboy76)
 * [15 years, 11 months ago](https://wordpress.org/support/topic/grid-view-with-static-elements/#post-1468450)
 * Thank you! It words like a charm.
 * Post here again with any and all copyright and accreditation information you 
   want included in the code.
 * It even holds nicely on multiple pages. If I could attach an image I would.
 * Thank you so much. Someday I will have to learn programming. 🙂
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [15 years, 11 months ago](https://wordpress.org/support/topic/grid-view-with-static-elements/#post-1468451)
 * you are welcome.
 * imho, all code given here in the forum is free to use, no accreditation and copyright
   needed.
 * > Someday I will have to learn programming. 🙂
 * you are doing it already …
 *  Thread Starter [snowboy76](https://wordpress.org/support/users/snowboy76/)
 * (@snowboy76)
 * [15 years, 11 months ago](https://wordpress.org/support/topic/grid-view-with-static-elements/#post-1468456)
 * Before I let you get back to something more important…
 * I am trying to use this method ( [http://urbanoalvarez.es/blog/2008/09/11/assign-image-to-wordpress-post/](http://urbanoalvarez.es/blog/2008/09/11/assign-image-to-wordpress-post/))
   to add an image to the post. I think this method is very easy and I can (sort)
   of understanding what its doing.
 * So guess what… parse error when I try to use it on the line starting with “echo”.
   I think its issue with like 3 layers of <php> calls. What do you think?
 * See code at: [http://wordpress.pastebin.com/gzfPZ4V7](http://wordpress.pastebin.com/gzfPZ4V7)
 * Again, thank you SO MUCH!!!
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [15 years, 11 months ago](https://wordpress.org/support/topic/grid-view-with-static-elements/#post-1468457)
 * to use `bloginfo()` in a string, use `get_bloginfo()` ;
    [http://codex.wordpress.org/Function_Reference/get_bloginfo](http://codex.wordpress.org/Function_Reference/get_bloginfo)
 * and there was an extra layer of php tags.
 * this should work:
 *     ```
       <?php if(get_post_meta($post->ID, 'post_image',true)){
                                       //There is an image assigned
                                       echo '<img src="'.get_bloginfo('template_directory').'/thumbnails/'.get_post_meta($post->ID, 'post_image',true).'" />';
                                       } ?>
       ```
   

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Grid View with Static Elements’ is closed to new replies.

 * 13 replies
 * 2 participants
 * Last reply from: [Michael](https://wordpress.org/support/users/alchymyth/)
 * Last activity: [15 years, 11 months ago](https://wordpress.org/support/topic/grid-view-with-static-elements/#post-1468457)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics