How do I implement this basic CSS for just one category?

1 Views

I’m a newbie but I can follow clear instructions. I tried searching for this problem and I can’t seem to find a solution.

I have just two types of (main) category on my WordPress site: Quotes and Articles. That’s all. Each one has their own subcategories. (about 100 or so)

Read More

I want to style one of them (the “Quotes” category) and all its sub-categories this way: 

.post-title {display:none;}
h2.post-box-title {display: none;}
.page-title {display:none;}
a.more-link { display: none;}

If I do that that from Global CSS in my theme, it applies to everything on site which isn’t what I want. I want the other main category (Articles) and all its subcategories to not be affected by that CSS, so what do I do?

I read that the function would be something like: 

<?php if ( in_category( 'Quotes' ) || post_is_in_descendant_category( 'Quotes' ) )

but how and where and what to do I don’t understand.

Post Views: 1

Related posts

3 comments

  1. YES, That condition might work for you, but only if placed on the right place.

    if ( in_category( 'Quotes' ) || post_is_in_descendant_category( id_of_Quotes_category ) )

    When ever a post is printed wordpress creates a div Block
    What you can basically do is, whenever a post from the quotes category comes. In the div block of the post add a extra css class, e.g. quotes

    so your code will be like 

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post();
if (in_category( 'Quotes' ) || post_is_in_descendant_category('ID_OF_Quotes_Category' ) ) :
?>
    <div class="post quotes">
<?php else : ?>
    <div class="post">
<?php endif; ?>

    and then your css code will be 

    .quotes .post-title {display:none;}
.quotes h2.post-box-title {display: none;}
.quotes a.more-link { display: none;}

    hope this will help.

  2. Here is some tips to help you:

    • You can try to make sure you new styles are at the bottom of the style.css page

    • You can also right click on your element in google chrome and click Inspect or Inspect Element then right click on you html and click on copy css path or go under copy and and click copy selector like here:
      enter image description here

    hope it helps thank you

Comments are closed.