Title: Displaying Posts Outside WP Differently
Last modified: August 19, 2016

---

# Displaying Posts Outside WP Differently

 *  Resolved [Y2Neildotcom](https://wordpress.org/support/users/y2neildotcom/)
 * (@y2neildotcom)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/displaying-posts-outside-wp-differently/)
 * Hi folks,
 * I’m trying to create a site for my girlfriends football team, I am using WP to
   write all the news items.
 * I have an index page (pershoreladies.y2neil.com) which I use to display the latest
   three posts from the blog using the code:
 *     ```
       <?php
       // Include WordPress
       define('WP_USE_THEMES', false);
       require('./blog/wp-blog-header.php');
       query_posts('showposts=3');
       ?>
       ```
   
 * This calls the blog and means I can display the latest three posts on my page
   by using WP code.
 * My question is, how can I format each post differently. For example, I want the
   first post to be large and prominent with the second and third posts smaller.
   Its been suggested that I use a counter variable that increments everytime I 
   go through the loop, but honestly I don’t understand what that means.
 * Many thanks for your help,
 * Neil

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

 *  [Mark / t31os](https://wordpress.org/support/users/t31os_/)
 * (@t31os_)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/displaying-posts-outside-wp-differently/#post-1065627)
 * Can you post the code that follows the above, namingly the WP loop…
 * Myself or someone else can write a few lines for you to add..
 *  Thread Starter [Y2Neildotcom](https://wordpress.org/support/users/y2neildotcom/)
 * (@y2neildotcom)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/displaying-posts-outside-wp-differently/#post-1065629)
 * Certainly, the following is what I use to call the posts. Try to ignore the mess.
 *     ```
       <?php while (have_posts()): the_post(); ?></b>
   
                     <h3><b><?php the_title(); ?></b></h3> by <?php the_author(); ?>
   
                   <span class="style6 style2">
                   <?php the_excerpt(); ?>
                   </span>
                   <p class="style6 style2" align="right"><a href="<?php the_permalink(); ?>">Read more...</a>
   
                   <span class="style6 style2">
   
                     <?php endwhile; ?>
   
                   <p align="left"><a href="archives.php"><< Older Posts</a>
       ```
   
 * Many thanks,
 *  [Mark / t31os](https://wordpress.org/support/users/t31os_/)
 * (@t31os_)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/displaying-posts-outside-wp-differently/#post-1065632)
 * Ok, well it’s only the while loop i needed to see.
 * I’ll just mention firstly, there’s some invalid markup, so i’ve corrected that
   in this example… (if i can explain further if you like).
 *     ```
       <?php while (have_posts()): the_post(); $postnum = 1; ?>
       	<div <?php if($postnum == 1) : echo 'class="main_post"'; else : echo 'class="following_post"'; endif; ?>">
       		<h3 style="font-weight:bold"><?php the_title(); ?></h3>
       		by <?php the_author(); ?>
   
       		<span class="style6 style2"><?php the_excerpt(); ?></span>
   
       		<p class="style6 style2" align="right">
       			<a href="<?php the_permalink(); ?>">Read more...</a>
       		</p>
       	</div>
       <?php if($postnum == 1) echo '<div style="clear:both"></div>'; ?>
       <?php $postnum++; ?>
       <?php endwhile; ?>
       ```
   
 * You’d need to accompany that with a little CSS…
 * In the example above… you have 3 posts…
 * [ post 1 ] – has the class “main_post”
    [ post 2 ] – has the class “following_post”[
   post 3 ] – has the class “following_post”
 * Of course you can change the names to what you like, just modify the code as 
   you like…
 * Here’s some example CSS though…
 *     ```
       .main_post {
         width:100%;
         background-color:#fff;
       }
       .following_post {
         float:left;
         width:auto;
       }
       ```
   
 * You’ll need to make it work visually by fiddling with the CSS (as that’s totally
   untested)…
 * The PHP is very simple itself, but i imagine that’s where you primarily wanted
   the help.
 * If you need further help, just post back..
 *  Thread Starter [Y2Neildotcom](https://wordpress.org/support/users/y2neildotcom/)
 * (@y2neildotcom)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/displaying-posts-outside-wp-differently/#post-1065637)
 * That’s fantastic, I’ll have a tinker with the CSS and give it a go.
 * Thank you for your help!
 *  [Mark / t31os](https://wordpress.org/support/users/t31os_/)
 * (@t31os_)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/displaying-posts-outside-wp-differently/#post-1065665)
 * You’re welcome… 😉
 *  Thread Starter [Y2Neildotcom](https://wordpress.org/support/users/y2neildotcom/)
 * (@y2neildotcom)
 * [17 years ago](https://wordpress.org/support/topic/displaying-posts-outside-wp-differently/#post-1065921)
 * Hello again,
 * Turns out, I’m rubbish.
 * The code wasn’t displaying the posts as I would expect so I threw an echo $postnum
   in there and all the posts are being numbered as post 1 meaning they’re displaying
   the same CSS.
 * How do I increment the postnum for the following two posts?
 * Many thanks,
 *  [Mark / t31os](https://wordpress.org/support/users/t31os_/)
 * (@t31os_)
 * [17 years ago](https://wordpress.org/support/topic/displaying-posts-outside-wp-differently/#post-1065928)
 * This part…
 * `<?php $postnum++; ?>`
 * Increments the postnum after each post, so that should be increasing with each
   post…
 * Try changing that for…
 * `<?php $postnum = $postnum+1; ?>`
 * It shouldn’t make a difference though..
 * Perhaps this line is being a problem..
 * `<?php if($postnum == 1) echo '<div style="clear:both"></div>'; ?>`
 * Could also try changing that for..
 * `<?php if($postnum == 1) { echo '<div style="clear:both"></div>'; } ?>`
 * If you’re still stuck after that i’ll test some code, but i’ve done this kinda
   thing lots of times and i can’t see an issue with the above..

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

The topic ‘Displaying Posts Outside WP Differently’ is closed to new replies.

## Tags

 * [display](https://wordpress.org/support/topic-tag/display/)
 * [increment](https://wordpress.org/support/topic-tag/increment/)
 * [posts](https://wordpress.org/support/topic-tag/posts/)
 * [style](https://wordpress.org/support/topic-tag/style/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 7 replies
 * 2 participants
 * Last reply from: [Mark / t31os](https://wordpress.org/support/users/t31os_/)
 * Last activity: [17 years ago](https://wordpress.org/support/topic/displaying-posts-outside-wp-differently/#post-1065928)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics