Support » Themes and Templates » How to make the first post on the frontpage different from the rest?

  • Resolved scorix

    (@scorix)


    I want to give the top news post on the front page of my site a different look than the rest of the posts.

    A good example is this site: http://css-tricks.com/

    As you can see here, the first post looks quite normal, while the following four posts have a totally different look.

    So how can I do this on my own site?

    Bonus question: Would also like to know how I can put an ad in between the first and second post. This can also be seen on the site I linked above.

    All help greatly appreciated! 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • Amend the Loop in index.php using something like:

    <?php if (have_posts()) : $c = 0;?>
    <?php while (have_posts()) : the_post(); ?>
    <?php $c++;
    if( $c ==1 ) $extra = 'one';
    else $extra = '';?>
    
    <div <?php post_class($extra) ?> id="post-<?php the_ID(); ?>">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    
    [ post markup ]
    <>php if( $c ==1 ) :?>
    
    [ ad goes here ]
    <?php endif;?>
    <?php endwhile; ?>

    Then style the first post using the class .one in the theme’s stylesheet.

    Thread Starter scorix

    (@scorix)

    Thanks, I’ll see if I can get that to work. One question though:

    That looks like the code for the first post only. Is that correct, and if so, what exactly do I add after that to get the rest of the posts? Exactly the same if statement with the exception of the ($extra) in the post class?

    Thread Starter scorix

    (@scorix)

    I tried it, but I only got this:

    Parse error: syntax error, unexpected T_ENDIF in /nfs/c03/h01/mnt/86074/domains/warcraft-universe.com/html/wp-content/themes/azuredream/index.php on line 31

    I’m no expert on PHP, so I don’t really know what’s wrong or how to fix it.

    All the code I supplied does is add a specific class to the first post. You need to use it as a guide to editing the Loop in your template file – not as a replacement.

    Thread Starter scorix

    (@scorix)

    After some trial and error with my very poor PHP skills, I think I finally made it work, thanks a lot for the help! 🙂

    Thread Starter scorix

    (@scorix)

    I’ve got another question now though. How can I add a second class to the rest of the posts? The first post now has the class “one”, but if I want all the following posts to have the class “two” or something else, how do I do that?

    Edit:

    Figured this one out actually, thanks again for the help ^^

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to make the first post on the frontpage different from the rest?’ is closed to new replies.