Wordpress Themes - WP Forum at BFA - [SOLVED] Getting single posts to inherit header for their category

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - [SOLVED] Getting single posts to inherit header for their category (http://forum.bytesforall.com/showthread.php?t=22686)

kitfreeman

Jul 28, 2014 05:36 PM

[SOLVED] Getting single posts to inherit header for their category

I have created two virtual blogs from a single install, using two basic categories and a menu link to each category. Now I'd like to have a different header image (banner) for each virtual blog -- i.e., I'd like posts to show a different header image depending on whether they belonging to one basic category or the other.

I can get the effect I want for the category pages using the following CSS:

body.category-1 div#imagecontainer {
background-image: url(/wp-content/ata-images/banner-1.jpg) !important;}

body.category-2 div#imagecontainer {
background-image: url(/wp-content/ata-images/banner-2.jpg) !important;}

However, this doesn't work for single post pages, which revert to the default site banner. Is there a simple way I can get single post pages to inherit the header image assigned to the category to which they belong?

I'd be very grateful for any help! Thanks!

Best, Kit

juggledad

Jul 28, 2014 06:32 PM

that should work fine - what is the url pointing to the problem post?
also check the spelling of your category name in the css - computers are notorious for doing what you tell them to do and not what you want them to do. ;)

kitfreeman

Jul 28, 2014 06:47 PM

Thanks for your reply. It works fine for the general category link -- see here, but if I go to a specific post, it defaults to the site banner -- see here. I'd like specific posts to inherit the category banner. I guess this would require a body.single-post div#imagecontainer command, but I can't make it work. Obviously, I'd prefer not to have have to set the banner for each post individually!

juggledad

Jul 28, 2014 07:16 PM

edit functions.php and change line 991 (the last line) from

HTML Code:

?>

HTML Code:

// add category nicenames in body and post class

        function category_id_class($classes) {

            global $post;

            foreach((get_the_category($post->ID)) as $category)

                $classes[] = $category->category_nicename;

                return $classes;

        }

        add_filter('post_class', 'category_id_class');

        add_filter('body_class', 'category_id_class');

?>

kitfreeman

Jul 28, 2014 07:28 PM

Thanks. I've added that (to the functions.php in the ata them directory), but sadly it doesn't seem to be working, despite several page reloads :(

juggledad

Jul 28, 2014 07:39 PM

check the category slug and make sure it has no blanks in it - I see 'consciousness mind' and it should be 'consciousness-mind' and your CSS should reflect that.

also why are you using

HTML Code:

if (in_category('mind')) {

body.single-post div#imagecontainer {

background-image:url(/wp-content/ata-images/kf_banner-mind.jpg) !important

}

}

in your CSS? What do you think that will do?

kitfreeman

Jul 29, 2014 08:42 AM

Thanks. I can't see any gaps in the CSS category names. And the problem is there with posts that have only the basic category, like this test post.

I've removed the bit of CSS you noticed -- it was a left-over from an incompetent experiment! But do I need some CSS to get the single post effect (a body.single-post command?), now that the php code has been added?

Thanks for your time. As you can tell, I'm not very competent at this!

juggledad

Jul 29, 2014 09:49 AM

I'd like to take a look because my site with multi word category names (ex 'word1 word2'), sets the slug as 'word1-word2' and sometimes yi u have 'word1-word2' but in the header it is 'word1 word2'

so I'd like to take a look at your site. If it is ok, please send me a PM with an admin ID/pw

juggledad

Jul 29, 2014 11:07 AM

Ahhhh now I see what is happening

The category is 'mind' not 'category-mind' so your css selector of

HTML Code:

body.category-mind div#imagecontainer {

will never work. You need to code it as

HTML Code:

body.mind div#imagecontainer {

you should take a css tutorial (http://htmldog.com/guides/css/) and learn how to use a code editor so you can look and see what you are doing

kitfreeman

Jul 29, 2014 12:17 PM

That's cracked it! Thank you very much for your help. (And yes, I will take a tutorial!)

All times are GMT -6. The time now is 05:01 PM.