WordPress.org

Ready to get started?Download WordPress

Forums

How to add different css style per post in WordPress timeline (6 posts)

  1. wpmhweb
    Member
    Posted 2 years ago #

    Hello everyone!

    I would like to apply different css style per post in the WordPress timeline, but I don't where to start to do this. Can anyone tell me how or at least point me into the right direction?
    Thanks,

  2. Kirk Wight
    Member
    Posted 2 years ago #

    Assuming your theme uses the_ID() when outputting the posts:

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    you can target individual posts with CSS:

    #post-1 {
        background: green;
    }
    #post-2 {
        background: blue;
    }
  3. wpmhweb
    Member
    Posted 2 years ago #

    Thanks for the answer, but I don't think this will work, what I am looking for is a little different of what you are telling me.
    What I need is to show a different style per post but not per unique post, I need it for the first, second, third, forth, and fifth post to have a different style.

    If you know how to do this as well the help will be really appreciated : )
    Thanks,

  4. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    I would like to apply different css style per post in the WordPress timeline

    what is a 'WordPress timeline' ?

    one possibility is to add a counter variable to the loop and output a css class based on that variable into the post div; then proceed similar to the suggestion by @kwight;

  5. Kirk Wight
    Member
    Posted 2 years ago #

    +1 for alchemyth's answer. You could even use the post_class() parameter in my example above, see "Add Classes By Filters" under Examples here: http://codex.wordpress.org/Function_Reference/post_class

  6. wpmhweb
    Member
    Posted 2 years ago #

    Oh, may be I am not saying it right, when I said WordPress timeline, I was referring to the output of all the posts in the homepage or category, etc. I guess it is called the 'loop'?

    Thank you so much for the answers!
    I think this will do it.

Topic Closed

This topic has been closed to new replies.

About this Topic