• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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 :

  1. Using pure PHP code
  2. 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

Related Solutions

  • Change Background Image Based On Category
  • Add Color Picker To Edit Category Screen To Set Color For Posts In Each Category

Custom Fields Taxonomy Terms

Reader Interactions

Comments

  1. 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
  2. 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
  3. 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/

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems