WordPress.org

Forums

Display HTML based on category (6 posts)

  1. fernandasaboia
    Member
    Posted 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic