Change Post Background Color Based On Category

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.

Note : You can also use this code to change the background color based on any conditionals simply by changing the conditional tags.

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 :

Note the use of the string function substr : The substr function removes the # from the hex code color ACF returns based on your color selection so it then gets added to inline styles which you can view in the HTML source. Without this string function, the background_color would print 2 hashes ## and therefore it would not work.

Step 2 : Install ACF and create a new field named acf_color using the following settings as a guide :

Download Folder

Comments

Denise Carlton says

February 5, 2020 at 6:30 pm

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.

Log in to Reply
- Brad Dalton says
  
  February 6, 2020 at 5:28 am
  
  Installation is included however you will need to send access details https://wpsites.net/terms-of-service/#refunds-tutorial-requests
  
  Log in to Reply
j d says

February 26, 2019 at 12:26 am

Hi,

How can I do this to the background color of custom entry-header for each post by category?

Thanks.

Log in to Reply
Tatiana M says

March 20, 2018 at 11:19 pm

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!

Log in to Reply
- Brad Dalton says
  
  March 20, 2018 at 11:39 pm
  
  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/
  
  Log in to Reply
  - Tatiana M says
    
    March 21, 2018 at 8:58 am
    
    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. 🙂
    
    Log in to Reply
    - Brad Dalton says
      
      March 21, 2018 at 10:47 pm
      
      I tested this and it works. Swap out the category class to match what you have :
      
      .single .category-dog-1 .entry-header .entry-meta a, .single .category-dog-1 .entry-header .entry-meta, .single .category-dog-1 .entry-title { color: red; } .single .category-dog-2 .entry-header .entry-meta a, .single .category-dog-2 .entry-header .entry-meta, .single .category-dog-2 .entry-title { color: blue; } .single .category-dog-3 .entry-header .entry-meta a, .single .category-dog-3 .entry-header .entry-meta, .single .category-dog-3 .entry-title { color: green; }
      
      You could add a custom body class using the in_category conditional tag however there’s no need.
      
      Log in to Reply
      - Tatiana M says
        
        March 22, 2018 at 2:04 pm
        
        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.
      - Brad Dalton says
        
        March 23, 2018 at 1:03 am
        
        Try this https://wpsites.net/web-design/add-color-picker-to-edit-category-screen-to-set-color-for-posts-in-each-category/

Video Demo

Solution 1 : Uses Pure PHP Code

Solution 2 : Uses ACF With PHP Code

Related Solutions

Reader Interactions

Comments

Leave a Reply Cancel reply