Different Headers Per Category Archive Page in Gridspace
-
Hello,
I was hoping it might be possible to customize the header images for each Category Archive page. If so, I am all ears as to how to do so.
Thank you!
Sincerely,
Allison Hudson
The blog I need help with is: (visible only to logged in users)
-
Hi Allison,
Try adding this to the CSS section of your customiser:
body.category-breakfasts #site-header { background: url("https://fromtheathleteskitchen.files.wordpress.com/2016/05/tuscan_inspired_lemon-olive_oil_muffins.jpg"); background-size: cover; display: block; max-height: 294px; } body.category-breakfasts #site-header img { visibility: hidden; }You can obviously pick whichever image you think is best, I’ve just used one of your own as an example. You can then duplicate the code and change the instances of .category-breakfasts to any of your other categories.
-
Thanks very much, I’ll give this a try! So it sounds like the image I choose for the header needs to have a URL, vs being inserted, the way it is in the Customizer. I could always accomplish that by putting the images into the Media Library.
Much appreciated!
-
Yeah that’s the way to do it. Upload the image you want directly to your media library and then copy the URL into your CSS. For best results, based on the current header images, aim for an image 1050 by 294px.
-
-
Hi Again – wondering the same re the backgrounds by category… and the best size for a background image. Any tips on either sub set would be greatly appreciated, thank you so much!
-
I’m not sure what you mean about “backgrounds by category”. You can use the code above for any category you like if you swap out breakfasts both places it appears in the code with one of your other categories and replace the URL.
-
Ah – so in other words, if I’m able to make the change to the header image so that I can have them be different for each category, do you know if it’s possible to do the same for the Background in each category? (Background customization is a separate option from the Header customization.)
And tangentially, do you happen to know the best dimensions for Background imagery. While I’ve seen the recommended dimensions for the Header, I have not come across the same info for Backgrounds.
Thanks a million!!!
-
If you just mean the background colour you can do that with this code:
body.category-renovation-interior { background-color: #FDEBDD; }You could set an image in a similar way, I’d suggest a small, tiled picture or pattern rather than a photograph as that would be a large file and make your website much slower, especially for mobile viewers.
body.category-renovation-interior { background-image: url("https://i.imgur.com/r7EbPbb.png"); } -
Ah okay – thanks so much for the instruction and insight!! Much appreciated. Have a great afternoon! Sincerely, Allison
-
Hi Again – I have had some luck implementing the unique Header Images by Category, however some are not working, such as in sub-categories. For example, I am able to add in a Custom Header image for Breakfasts, but not for Oatmeals & Mueslis. Any ideas as to where I might be going wrong?
-
The category class is category-oatmeals-mueslis so the first section of the CSS would look like this:
body.category-oatmeals-mueslis #site-header { ... }The quick way to find the wording of the category class you need is to navigate to the page in question, right click in the space on either side of your main site content and select Inspect or Inspect Element. This should pop open a window showing the HTML code of the page and highlight the body tag. In that tag you’ll also see the classes listed in a big row. Something like this:
<body class="archive category category-oatmeals-mueslis category-396880708 logged-in admin-bar...>It’s probably always going to be the third one along like in that example.
(I’m absolutely going to make your sesame salmon and bok choy recipe this weekend, yum!)
-
Okay – this is extremely helpful, thanks ongoing. Oh that’s a good one to make – I wish I could make it for you to say thanks!! Hopefully these details will improve the site.
-
By the way – on the same topic of customizing the categories, do you happen to know if there is a way to hid the words ‘Category Archive’ at the top of each section. For example at the moment if someone were to click on Breakfasts, the site section would read “Category Archive: Breakfasts”. If possible, I’d love to have it just read Breakfasts. I understand that there is short code which will allow me to customize the text, however I don’t think I can do so w/o changing the grid layout on the page, which I like. If it’s not possible to remove those words, that is okay, but I wanted to at least ask!
-
Your theme makes this much easier than some others do. You can leave out the second bit if you prefer having the titles in lower case.
body.category.archive .page-title span { display: none; } body.category.archive .page-title { text-transform: capitalize; }If you’re even in London then you’re welcome to borrow my kitchen in order to feed me!
-
Wow – thank you, I just applied it and it’s a great improvement! I really appreciate your help with that, it is a solution I have been looking for for a long time. Haha be careful what you wish for!!
-
Hi (once again) – I was just looking at some of the posts within the categories, and noticed that the homepage header appears at the post level. Do you know if there is any way to get the category headers to apply to the posts w. in that category?
(Make sense?)
-
Hi Alli, I’m not sure what you mean, can you link to a page that demonstrates the issue. Or maybe take a screenshot and talk me through it in a bit more detail?
-
Hello – back from working on my ‘day job’. So what I mean is the following:
While the custom header appears by Category, such as: https://fromtheathleteskitchen.com/category/recipes/smoothies/
It does not appear on the individual Posts within that category, for example this smoothie Post: https://fromtheathleteskitchen.com/2015/04/26/raspberry-sunflower-smoothie/
If possible without doing so Post by Post, what I’d like to do is have the Category custom header image appear atop each of the Posts in the relevant Category.
Does that help / make sense?
Thanks ongoing!!!
-
Hi Alli, I can’t see a way to do that, sorry. While your theme gives us a handy CSS class to use on the individual category archive pages it doesn’t include these in the same section for the individual posts.
- The topic ‘Different Headers Per Category Archive Page in Gridspace’ is closed to new replies.
WordPress.com Forums 