Title: Positioning Posts Individually
Last modified: August 19, 2016

---

# Positioning Posts Individually

 *  Resolved [alexsaidani](https://wordpress.org/support/users/alexsaidani/)
 * (@alexsaidani)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/positioning-posts-individually/)
 * I have been coding for wordpress for sometime now along with HTML, CSS and PHP,
   there is something new which I have decided to try out and I’m having a little
   trouble with it.
    I want to position my wordpress posts or entries individually
   without using a plugin of some sort. I want to have one post centred and the 
   largest (which would be the latest one) whilst having 4 posts below in like a
   row, with the post title an image and the small description of what the post 
   is about. I have never attempted to interfere or edit the blogroll before as 
   i have always left it as normal configuring the number of posts down to one in
   the settings. I can offer more information and images of how i want the blog 
   to look like, if anyone knows anything regarding this or could provide any assistance
   such as a small code snippet or anything really. Thanks in advance.

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

 *  [vtxyzzy](https://wordpress.org/support/users/vtxyzzy/)
 * (@vtxyzzy)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/positioning-posts-individually/#post-1648440)
 * Sounds like you want the first (latest) post to be full width with the 4 below
   it in a row with only the image and an excerpt.
 * If that is the case, you can use a counter in the loop to set the proper divs
   to arrange the posts like that.
 * The code should look something like this:
 *     ```
       <?php if (have_posts()) :
          while (have_posts()) : the_post();
            if (++$c == 1) {
              echo '<div class="fullwidth">';
            } elseif (($c -1 ) % 4 == 1) {
              echo '<div class="newrow">';
              echo "<div class='$postclass'>";
            } else {
              echo "<div class='$postclass'>";
            }
            // Code here to display a post
            echo '</div><!-- End of post -->';
            if ($c > 1 && ($c - 1) % 4 == 0) {
               echo '</div><!-- End of row -->';
            }
          endwhile;
          if ($c > 1 && ($c - 1) % 4 != 0) {
             echo '</div><!-- End of row -->';
          }
       else :
          // Code here for no posts found
       endif;
       ?>
       ```
   
 * Then, set up the CSS for fullwidth, newrow, and postclass.
 *  Thread Starter [alexsaidani](https://wordpress.org/support/users/alexsaidani/)
 * (@alexsaidani)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/positioning-posts-individually/#post-1648587)
 * Hello thanks for replying, I tried using the code you gave me customising it 
   a bit and so on. However I have tried numerous times to get this to work and 
   I just can’t seem to get it to. Is there no other way of doing this? I wanted
   it to look something like this :
    [Click Here](http://cl.ly/57bc5a545d456fb7b3b8)
 * Thanks again.
 *  [vtxyzzy](https://wordpress.org/support/users/vtxyzzy/)
 * (@vtxyzzy)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/positioning-posts-individually/#post-1648590)
 * The code I gave works to set up the div’s. You can see where I tested it in this
   [screen shot](http://img189.imageshack.us/img189/5503/testscreenshoto.jpg) (after
   I changed the posts per row to 3 per your sample).
 * The code and CSS:
 *     ```
       <style>
       .fullwidth { width: 98%; border: 2px solid black; }
       .newrow { width: 98%; }
       .postclass {width: 30%; float: left; margin: 4px; border: 2px solid green; }
       </style>
       <?php
   
       // This code shows how to use a counter to show the first post full width
       // with the remaining ones 3 to a row.
          echo '<h2>Testing rows</h2>';
          $postclass = 'postclass';
          for ($i=1;$i<12;++$i) {
            if (++$c == 1) {
              echo '<div class="fullwidth">';
            } elseif (($c -1 ) % 3 == 1) {
              echo '<div class="newrow">';
              echo "<div class='$postclass'>";
            } else {
              echo "<div class='$postclass'>";
            }
            echo "A post goes here. c is $c";
            echo '</div><!-- End of post -->';
            if ($c > 1 && ($c - 1) % 3 == 0) {
               echo '</div><!-- End of row -->';
            }
          }
       if ($c > 1 && ($c - 1) % 4 != 0) {
         echo '</div><!-- End of row -->';
       }
   
       ?>
       ```
   
 *  Thread Starter [alexsaidani](https://wordpress.org/support/users/alexsaidani/)
 * (@alexsaidani)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/positioning-posts-individually/#post-1648591)
 * Perhaps I am getting this wrong, where exactly must this code be placed. I have
   tried it both in the loop.php file along with the page.php file.
    Thanks for 
   the code though, I am sure it will be much useful when i get it working. 🙂
 *  Thread Starter [alexsaidani](https://wordpress.org/support/users/alexsaidani/)
 * (@alexsaidani)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/positioning-posts-individually/#post-1648592)
 * The part of code within my loop file that gets the results is this:
 *     ```
       <?php ?>
       <?php while ( have_posts() ) : the_post(); ?>
   
       <?php?>
   
       	<?php else : ?>
       	<div id="maincontent">
       	<br>
       <div id="posttitle">
       			<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
       </div>
       <div id="postdate">
       		<?php twentyten_posted_on(); ?>
       </div>
   
       	<?php if ( is_archive() || is_search() ) :  ?>
       			<?php the_excerpt(); ?>
       	<?php else : ?>
       		<?php the_content( __( 'Continue reading &rarr;', 'twentyten' ) ); ?>
       			<?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?>
       	<?php endif; ?>
       	</div>
   
       				<?php if ( count( get_the_category() ) ) : ?>
       				<?php endif; ?>
       				<?php
       					$tags_list = get_the_tag_list( '', ', ' );
       					if ( $tags_list ):
       				?>
       					<?php printf( __( 'Tagged %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
       				<?php endif; ?>
       		<?php comments_template( '', true ); ?>
       	<?php endif; ?>
   
       <?php endwhile; ?>
       ```
   
 * Whilst my page.php file consists of:
 *     ```
       <?php
       get_header(); ?>
       <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
       <style>
       					<?php if ( is_front_page() ) { ?>
       						<h2><?php the_title(); ?></h2>
       					<?php } else { ?>
       						<h1><?php the_title(); ?></h1>
       					<?php } ?>
                           <?php the_content(); ?>
       <?php endwhile; ?>
   
       <?php get_footer(); ?>
       ```
   
 * I probably should have stuck to normal web design 😛
 *  [vtxyzzy](https://wordpress.org/support/users/vtxyzzy/)
 * (@vtxyzzy)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/positioning-posts-individually/#post-1648593)
 * The twentyten theme is not the easiest to modify for that. You might be better
   off starting with a theme that uses a ‘Featured Post’, but here goes. Back up
   loop.php and change as follows.
 * Change this:
 *     ```
       <?php /* How to display all other posts. */ ?>
   
       	<?php else : ?>
       ?>
       		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
       ```
   
 * to this:
 *     ```
       <?php /* How to display all other posts. */ ?>
   
       	<?php else : ?>
       <?php // Code to have wide first post, then rows under it.
       $posts_per_row = 3;  // The number of posts on rows after first.
       if (++$c == 1) {
          echo '<div class="fullwidth">';
       } elseif (($c - 1) % $posts_per_row == 1) {
          echo '<div class="newrow">';
          echo '<div class="narrowpost">';
       } else {
          echo '<div class="narrowpost">';
       }
       ?>
       		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
       ```
   
 * Change this;
 *     ```
       </div><!-- .entry-utility -->
       		</div><!-- #post-## -->
   
       		<?php comments_template( '', true ); ?>
       ```
   
 * to this:
 *     ```
       </div><!-- .entry-utility -->
       		</div><!-- #post-## -->
          </div><!-- End fullwidth or narrowpost -->
          <?php if ($c > 1 && ($c - 1) % $posts_per_row == 0) {
              echo '</div><!-- End of row -->';
          } ?>
       		<?php comments_template( '', true ); ?>
       ```
   
 * Change this:
 *     ```
       <?php endwhile; // End the loop. Whew. ?>
   
       <?php /* Display navigation to next/previous pages when applicable */ ?>
       ```
   
 * to this:
 *     ```
       <?php endwhile; // End the loop. Whew. ?>
       <?php
       if ($c > 1 && ($c - 1) % 4 != 0) {
         echo '</div><!-- End of row -->';
       } ?>
   
       <?php /* Display navigation to next/previous pages when applicable */ ?>
       ```
   
 * And use CSS similar to this:
 *     ```
       .fullwidth {
          width: 98%;
          border: 2px solid black;
       }
       .newrow {
          width: 98%;
       }
       .narrowpost {
          width: 30%;
          float: left;
          margin: 4px;
          border: 2px solid green;
       }
       ```
   
 *  Thread Starter [alexsaidani](https://wordpress.org/support/users/alexsaidani/)
 * (@alexsaidani)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/positioning-posts-individually/#post-1648599)
 * I think I am going to have to take a different approach to doing this, because
   it’s really not working for me, I might just start again or build on top of another
   theme. The code looks right to me, and I can see you got it working yourself.
   
   Thanks for your help though vtxyzzy, seriously I appreciate it a lot.
 *  Thread Starter [alexsaidani](https://wordpress.org/support/users/alexsaidani/)
 * (@alexsaidani)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/positioning-posts-individually/#post-1648600)
 * I have found a theme now, which im just going to use the foundations of and strip
   away the rest of the stuff.
    So like I said, thank you very much for all your
   help and trying to help me. 🙂
 *  [vtxyzzy](https://wordpress.org/support/users/vtxyzzy/)
 * (@vtxyzzy)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/positioning-posts-individually/#post-1648601)
 * You are welcome. Glad you found something that works.

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

The topic ‘Positioning Posts Individually’ is closed to new replies.

## Tags

 * [entries](https://wordpress.org/support/topic-tag/entries/)
 * [individual](https://wordpress.org/support/topic-tag/individual/)
 * [positioning](https://wordpress.org/support/topic-tag/positioning/)
 * [posts](https://wordpress.org/support/topic-tag/posts/)
 * [wordpresss](https://wordpress.org/support/topic-tag/wordpresss/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 9 replies
 * 2 participants
 * Last reply from: [vtxyzzy](https://wordpress.org/support/users/vtxyzzy/)
 * Last activity: [15 years, 9 months ago](https://wordpress.org/support/topic/positioning-posts-individually/#post-1648601)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics