Add the "category slug" as a CSS class to the article content element - Support

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
May 17, 2016 at 6:11 pm #633892

Tracce
Participant

I was wondering if there is a way to add the category slug as css class to the style of the body content element? I need to make a visual distinction between different categories.

Example:
<body id=”top” class=”news single single-post postid-90 single-format-standard logged-in admin-bar stretched open_sans customize-support” itemtype=”https://schema.org/WebPage” itemscope=”itemscope”>

May 17, 2016 at 8:26 pm #633947

Jordan
Inactive Moderator

Hey Tracce,

Thanks for getting in touch with us!

Yes you absolutely can. You need to turn on the custom CSS class and then you can add any class to the elements you want. You can follow the instructions here: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Let me know if you need further assistance :)

Best regards,
Jordan

May 18, 2016 at 9:48 am #634257

Tracce
Participant

I Jordan,
thanks for the quick replay.
I think what i needs is slightly different, i’ll try to explain better:
I need, for all the articles’ pages under a specific category, to have that specific “category slug” as a class of the “body”.

Example: For the articles in the category NEWS i’ll have
<body id=”top” class=”NEWS single single-post postid-90 single-format-standard logged-in admin-bar stretched open_sans customize-support” itemtype=”https://schema.org/WebPage” itemscope=”itemscope”>

Example: For the articles in the category SPORT i’ll have
<body id=”top” class=”SPORT single single-post postid-90 single-format-standard logged-in admin-bar stretched open_sans customize-support” itemtype=”https://schema.org/WebPage” itemscope=”itemscope”>

is it possible?

May 19, 2016 at 6:22 am #634958
Ismael
Moderator
Hi,

Thank you for the info.

Please add this in the functions.php file:
```
// add category class on single post page
add_filter( 'body_class', 'add_category_class' );
function add_category_class( $classes ) {
    if( is_single() && has_category('news') ) $classes[] = 'news-cat';
    return $classes;
}
```
The code will add the “news-cat” class attribute for single posts included in the category “news”.

Best regards,
Ismael
July 23, 2018 at 10:21 am #988634

Jarmo
Participant

Hi Ismael,

This works for me but I want to add the function 2 times so I can give the category news the class news-cat and an other page the category water so I can add the class water-cat to that pages.
If I paste this function 2 times my site is down. How can I fix this?

July 24, 2018 at 10:24 pm #989403
Basilis
Inactive Moderator
Hi,
```
// add category class on single post page
add_filter( 'body_class', 'add_category_class' );
function add_category_class( $classes ) {
    if( is_single() && has_category('news') ) {
 $classes[] = 'news-cat'; }
elseif( is_single() && has_category('news') ) { 
 $classes[] = 'news-cat'
}
    return $classes;
}
```
Please use that one and let us know if that works out for you.

Best regards,
Basilis
July 25, 2018 at 2:08 pm #989691
Jarmo
Participant
When I add this, my site breaks :(
```
add_filter( 'body_class', 'add_category_class' );
function add_category_class( $classes ) {
    if( is_single() && has_category('consument') ) {
$classes[] = 'consument-cat'; }
elseif( is_single() && has_category('projectontwikkelaar') ) {
$classes[] = 'projectontwikkelaar-cat'
}
    return $classes;
}
```
July 25, 2018 at 5:47 pm #989836
Victoria
Inactive Moderator
Hi (Email address hidden if logged out) ,

There is a semicolumn missing.

Try like this:
```
add_filter( 'body_class', 'add_category_class' );
function add_category_class( $classes ) {
    if( is_single() && has_category('consument') ) {
       $classes[] = 'consument-cat';
    }
      elseif( is_single() && has_category('projectontwikkelaar') ) {
         $classes[] = 'projectontwikkelaar-cat';
     }
    return $classes;
}
```
If you need further assistance please let us know.
Best regards,
Victoria
July 26, 2018 at 9:41 am #990126

Jarmo
Participant

Hi Victoria,

Thanks, kind of stupid I didn’t see this semicolumn by myself haha.
Next time I need to take a better look!

July 26, 2018 at 2:21 pm #990263

Victoria
Inactive Moderator

Hi (Email address hidden if logged out) ,

You’d be surprised how many times it’s just a semicolumn and how much it can break things :)

Glad we could help :)

If you need further assistance please let us know.
Best regards,
Victoria

August 9, 2018 at 11:40 am #995393
Jarmo
Participant
I have this now because I want to add a category for different pages:
```
add_filter( 'body_class', 'add_category_class' );
function add_category_class( $classes ) {
    
    
    if( is_single() && has_category('gasvrij-academy') ) {
       $classes[] = 'gasvrij-academy-cat';
    }
    
    elseif( is_single() && has_category('informatief') ) {
       $classes[] = 'informatief-cat';
    }
    
    elseif( is_single() && has_category('advies') ) {
       $classes[] = 'advies-cat';
    }
    
    elseif( is_single() && has_category('offerte') ) {
       $classes[] = 'offerte-cat';
    }
    
    elseif( is_single() && has_category('afspraak') ) {
       $classes[] = 'afspraak';
    }
    
    
     return $classes;
}
```
But with this code the categories are not added to the pages, is there something wrong in this code?
August 9, 2018 at 3:05 pm #995514

Victoria
Inactive Moderator

Hi (Email address hidden if logged out) ,

The function looks ok, you need to debug it, to check if it fires and if the conditions are met and see what the classes get in the end.

Best regards,
Victoria
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.