Ask your WordPress questions! Pay money and get answers fast! (more info)

Remove header or styling from specific category of posts? WordPress

  • SOLVED

Hi,
I have a category of posts which have a dotted line above them (I hid the title from these posts but the dotted line remains in the header). Is there a quick way of removing this line just from this category, or rather from the category children? I know if I do a display:none this won't work as it'll remove the line from all my posts.
This is one example
http://www.customercarewords.com/intranet-in-a-box/
I wish to remove the line from all the posts in the 'Ideas and Analysis' category
http://www.customercarewords.com/category/ideas-and-analysis/

Thanks.

Answers (4)

2015-08-21

Shoeb mirza answers:

This must be the perfect answer to your question
Please add this in functions.php and with this you may see the category slug to all the posts.

add_filter('body_class','add_category_to_single');
function add_category_to_single($classes, $class) {
if (is_single() ) {
global $post;
foreach((get_the_category($post->ID)) as $category) {
// add category slug to the $classes array
$classes[] = $category->category_nicename;
}
}
// return the $classes array
return $classes;
}



Now, please add this css

.single .category-ideas-and-analysis header {border:0;} (or)

.category-ideas-and-analysis .single header {border:0;}

2015-08-21

Jayaram Y answers:

HI Alisa,

Hope you are doing well..

If you need for particular category, then you must get the category class in the body tag so that you can control the css based on the category class.. As its a single post, the category class doesnt show up. TO do this add the below code to theme functions.php file


add_filter('body_class','add_category_to_single');
function add_category_to_single($classes, $class) {
if (is_single() ) {
global $post;
foreach((get_the_category($post->ID)) as $category) {
echo $category->cat_name . ' ';
// add category slug to the $classes array
$classes[] = 'category-'.$category->slug;
}
}
// return the $classes array
return $classes;
}


Once added, it gives the category class in the body tag. Then use that in css to remove the line as below.


.single.category-ideas-and-analysis header.entry-header{
border: none;
}


Let me know if you need any help doing this.


Ailsa Craig comments:

Hi - Thanks, the class is showing up now (on both Shoeb and your solutions) but the css doesn't. Should I change something in the css?


Jayaram Y comments:

Hi.. Yes now I see the class for single post.. Please use the below css.


To hide the line

.single-post.category-ideas-and-analysis .entry-heade{border:none !important;}

to remove the line along with space

.single-post.category-ideas-and-analysis .entry-heade{display:none !important;}


Jayaram Y comments:

Sorry here is the correct one which works.



.single-post.category-ideas-and-analysis header {
border: none !important;
}


Ailsa Craig comments:

Perfect - works a treat! Thanks Jayaram

2015-08-21

Arnav Joy answers:

you can try this.

.page-id-439 .g1-grid .g1-box__inner hr{display:none}


Ailsa Craig comments:

The problem is I need ALL the pages in the category without this line not just the one page. And any pages created at a later date in this category.

2015-08-21

Andrea P answers:

hello,

if I understood correctly, you want to hide the line (and title) in the single posts, but only on posts from a specific category. is this correct?

unfortunately there isn't an automatic css class appended to the posts which tells their categories. but it's pretty easy to add it manually by editing your single.php (or wherever template file in which the title+line is coded).


you can place this snippet on top of your single.php


<?php $terms = wp_get_post_terms();
$class_hide_title = "";
foreach ( $terms as $term ) {
if ( $term->slug == 'ideas-and-analysis' ){
$class_hide_title = 'hide-post-header';
}
}

?>


then you search for this line of code


<header class="entry-header g1-layout-inner">


and you substitute it with this


<header class="entry-header g1-layout-inner <?php echo $class_hide_title; ?>">



at this point you can add to your style.css this rule


.single-post .entry-header .hide-post-header{
display:none;
}


or if you want to take off only the line

.single-post .entry-header .hide-post-header{
border:none;
}