WordPress.org

Ready to get started?Download WordPress

Forums

Display HTML based on category (6 posts)

  1. fernandasaboia
    Member
    Posted 11 months ago #

    I'm trying to change a piece of HTML on my index.php based on category.
    Basically, I have 5 categories: body, mind, work, art, thoughts. And I want an specific div inside my loop to change according to post.

    If the post is in the body category, the HTML I want it to display is:
    <div class="listposts_editoria_body"></div>

    I've researched in the foruns, but I'm not a developer, and I'm not making progress.

    Can anybody help me? Thanks. :)

  2. paulwpxp
    Font hero
    Posted 11 months ago #

    What is the purpose here ?

    To style post differently based on category it's assigned to, just make use of the post_class()
    http://codex.wordpress.org/Function_Reference/post_class

    To put something there, make use of in_category()
    http://codex.wordpress.org/Function_Reference/in_category

  3. fernandasaboia
    Member
    Posted 11 months ago #

    Basically this is what I'm trying to do. This is my website: http://5damanha.com.br/en/

    I want the small vertical line on the left of the pictures to be the color corresponding to the category the post is in.

  4. paulwpxp
    Font hero
    Posted 11 months ago #

    In your template

    change this

    <div class="test">

    to this

    <div <?php post_class(); ?>>

    and remove this

    <div class="listposts_editoria">
    </div>
  5. paulwpxp
    Font hero
    Posted 11 months ago #

    After the remove and change as per above, use this in CSS

    .category-mind .listposts_img {border-left:10px solid red;}
    .category-body .listposts_img {border-left:10px solid blue;}
    .category-work .listposts_img {border-left:10px solid yellow;}
  6. fernandasaboia
    Member
    Posted 11 months ago #

    Thanks, @paulwpxp! That worked like a charm. :)

Reply

You must log in to post.

About this Topic