[resolved] Displaying Posts Outside WP Differently (8 posts)

  1. Y2Neildotcom
    Posted 7 years ago #

    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:

    // Include WordPress
    define('WP_USE_THEMES', false);

    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,


  2. Mark / t31os

    Posted 7 years ago #

    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..

  3. Y2Neildotcom
    Posted 7 years ago #

    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(); ?>
                <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,

  4. Mark / t31os

    Posted 7 years ago #

    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>
    <?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 {
    .following_post {

    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..

  5. Y2Neildotcom
    Posted 7 years ago #

    That's fantastic, I'll have a tinker with the CSS and give it a go.

    Thank you for your help!

  6. Mark / t31os

    Posted 7 years ago #

    You're welcome... ;)

  7. Y2Neildotcom
    Posted 7 years ago #

    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,

  8. Mark / t31os

    Posted 7 years ago #

    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..

Topic Closed

This topic has been closed to new replies.

About this Topic