The 2 different solutions in this tutorial enable you to change the background color, not background image, based on the category the post is assigned to. The code works in any WordPress theme.
In this tutorial, you’ll get 2 code snippets which enable you to change the background color :
- Using pure PHP code
- Using ACF with PHP code
The 2nd solution requires changing the background color via the edit category admin screen :
There are other ways to do this using PHP, jQuery or CSS however these 2 are amongst the most efficient methods.
Firstly, let’s take a look at a video which shows you exactly what the code in this tutorial enables you to do.
Video Demo
The video shows how you can set a default background color using the customizer which you can change on any category archive page. You can also set a default for the category page and posts in the same category if none added.
Here’s the code snippets for registered users :
Solution 1 : Uses Pure PHP Code
Both solutions use the theme_mod_$name filter.
Copy & paste the PHP code ( without the opening PHP Tag ) from the file named solution-12.php to the end of your child themes functions file. You can then Swap out the category id’s and/ore conditional tags in the code to suit your own requirements.
Solution 2 : Uses ACF With PHP Code
Step 1 : Copy & paste the PHP coe from the file named solution-2.php to the end of your child themes functions file :
Step 2 : Install ACF and create a new field named acf_color using the following settings as a guide :
I don’t know how to start. Your video has areas to click on that I don’t have. I have Premium with the Radiate Theme.
Installation is included however you will need to send access details https://wpsites.net/terms-of-service/#refunds-tutorial-requests
Hi,
How can I do this to the background color of custom entry-header for each post by category?
Thanks.
Hi,
If I wanted to target specific elements such as the post title or meta, rather than the background, how would I go about doing that using this technique? I’ve found a plugin that looks like it would simulate this effect, but I don’t know how to implement that into a genesis child theme.
https://codecanyon.net/item/category-colors/5587892
Thanks!
Hi
You want to change the color of the entry title on single posts on a per post basis?
Try this which works with or without a plugin https://wpsites.net/web-design/add-color-picker-to-edit-post-screen-to-style-specific-single-post-elements/
Hi,
Kind of. I want to automatically color the post titles to match the category colors. I’m building a kennel website, and each dog would have its own ‘color’ – Dog1=blue, Dog2=purple, etc. Post titles and meta would match. In one of your other tutorials, you show how to do it by hand via CSS:
.blog .category-mysti a:link,
.blog .category-mysti a:visited {
color: #2da5b3;
}
etc.
But I would like to streamline it rather than doing it by hand or having to pick the color every time for each post. If possible. 🙂
I tested this and it works. Swap out the category class to match what you have :
You could add a custom body class using the in_category conditional tag however there’s no need.
So then the only way to do what I would like is by hand via CSS? I was hoping to be able to use the color picker and set a color per category that would populate across the site within the dashboard, so my clients could set the colors.
Dang. Okay, thanks.
Try this https://wpsites.net/web-design/add-color-picker-to-edit-category-screen-to-set-color-for-posts-in-each-category/