Different header image per category

• 

  michaelmoseryr1 · Member · Oct 20, 2015 at 2:09 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I understand that this has been asked before but those are all from many years ago and wordpress has evolved since. My question is how can one change the header image for each category? I’ve been doing it manually for each post in the different categories but unless someone goes into that particular post, it stays on the default image even when selecting the different categories. I can’t seem to find the html script section to be able to edit it either…

  Help is very much appreciated as it for university.

  Many thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  ehtis · Staff · Oct 21, 2015 at 6:16 am

  • Copy link

  Hi Michael,

  I suppose you want a custom header image for each category page (which lists all the posts in that category), correct? If so, you will have to open that category, right-click anywhere on the page, select Inspect Element and note down the category class, which is category-161mc on this page.

  Then upload a header image with adequate width to your Media Library, copy its URL and use the following code block, which is for 161MC category page:

  .category-161mc .site-image img {
  	visibility: hidden;
  }
  .category-161mc .site-image {
  	background: url(http://MediaLibraryURL/header.jpg);
  	background-repeat: no-repeat;
  }

  Repeat the above steps for other category pages. Notice the dot before .category-161mc! It would be .category-160mc for 160MC category page.

• 

  michaelmoseryr1 · Member · Oct 21, 2015 at 8:40 am

  • Copy link

  Exactly! Thanks so much, I’ll try it!

• 

  michaelmoseryr1 · Member · Oct 21, 2015 at 8:34 pm

  • Copy link

  Sorry to ask again, but how do I change it? I think I have the correct section, but it doesn’t seem to be editable…? Any advice?

• 

  ehtis · Staff · Oct 22, 2015 at 3:41 am

  • Copy link

  Paste the above code in Customize > CSS, after you’ve done changes and included the image URL.

  Note that this will only work if you’re on the Premium or Business plans, as CSS editing is part of these upgrades.

• 

  michaelmoseryr1 · Member · Oct 22, 2015 at 9:27 am

  • Copy link

  In that case I realise why it won’t work. Appreciate your help regardless, thank you!