WordPress.org

Ready to get started?Download WordPress

Forums

styling the first post differently (13 posts)

  1. slim81
    Member
    Posted 7 years ago #

    Yes I have wordpres version 2.2 and I'm trying to style the most recent post differently than the rest of the post that appear on the homepage.

    Im inside the index.php file and I need some help on what php code would conditionally style only the most recent post differently than the rest of the post

  2. Adam Brown
    Member
    Posted 7 years ago #

    Maybe there's an easier way to do this, but try this:

    Before the loop begins, maybe right after get_header(), paste this in:

    <?php $i = 1; ?>

    And then right before the endwhile;, on the line right above, paste this in:

    <?php $i++; ?>

    Next, right after the loop begins (i.e. after the_loop()), paste this in:

    <?php if ( 1 == $i ) { $firstclass="firstpost"; } ?>

    Now, find where your post's HTML begins. Probably something like <div class="post">. You want to give the first post an additional class, so that it says <div class="post firstpost"> or something. Assuming that it looks like <div class="post">, you would write

    <div class="post<?php echo $firstpost; ?>">

    Now you can just edit your CSS to modify div.firstpost however you want.

  3. slim81
    Member
    Posted 7 years ago #

    adam thank you for your help but I title the post the wrong way. I titled it using 'the first post
    actually I needed to style the most recent post.

  4. moshu
    Member
    Posted 7 years ago #

    It will do exactly that :)
    ("first" here being the first displayed on the top = the latest)

  5. slim81
    Member
    Posted 7 years ago #

    moshu or adam:
    can you explain a little about the code Im fairly new to php programming and is trying to understand php and program with it as I go

    like why did he increment the $i and
    how does wp know that it was the most recent post using that code?...does the content() load a certan way? or something..

  6. Adam Brown
    Member
    Posted 7 years ago #

    One correction. That's what I get for not testing the code I post.

    <?php if ( 1 == $i ) { $firstclass="firstpost"; } ?>

    should be

    <?php if ( 1 == $i ) { $firstclass="firstpost"; }
    else{ $firstclass = ''; } ?>

    As for the explanation: I increment the $i so that you only get that "firstpost" class once. Otherwise you'll get it every time.

    And since wp's loop process the posts from most recent working back, and this code applies an additional class only to the first post processed, well, there you go.

  7. fath
    Member
    Posted 6 years ago #

    I'm using WP 2.3.x, is this way still can be used? Because I've tried to follow this step one by one but it didn't work.

  8. Adam Brown
    Member
    Posted 6 years ago #

    I'm using WP 2.3.x

    Irrelevant. The code I gave isn't WP specific, it's just basic PHP.

    What do you mean that it didn't work? Do you mean that it didn't output a unique class for the first post, or do you mean that you haven't added anything to your CSS yet?

    This is a clearer explanation of the above:

    http://adambrown.info/b/widgets/easy-php-tutorial-for-wordpress-users/first-post-different-from-the-rest/

  9. fath
    Member
    Posted 6 years ago #

    It didn't output a unique class for the first post even when I styled it with css..

  10. Adam Brown
    Member
    Posted 6 years ago #

    Paste a copy of whatever theme file you edited into http://wordpress.pastebin.ca/

    This is the theme's index.php we're talking about, right?

    Also, what's your URL?

  11. traceyshaw
    Member
    Posted 6 years ago #

    Hi Adam,
    Followed your instructions at your website and it worked perfectly, and I thank you for posting it.

    The only issue now is that if a user chooses to view older posts from the index page, the second page of posts shows the top entry as the latest post when it's only the newest post on that particular page. Is there a workaround for this that ignores the firstPost class when 'index.php' becomes 'index.php/page/2/' or similar?

    Thanks again for the tutorial, fingers crossed on this fix :)

  12. Adam Brown
    Member
    Posted 6 years ago #

    Change <?php $i++; ?> to

    <?php
    if (is_home() && !is_paged())
       $i++;
    ?>
  13. houseofboyd
    Member
    Posted 6 years ago #

    Adam, thanks for all of your help on this issue. I to was having the same issue as Traceyshaw, but after making the change that you mentioned above, my first on the first page displays as it should, however, every post on every other page than the first displays like the first post on the first page...I've gone back to my original way, the first post on each page displays differently as other posts. I just want the first post on the first page to display differently...Any ideas? Your help is appreciated.

    House Of Boyd

Topic Closed

This topic has been closed to new replies.

About this Topic