WP SITES

Log in

Change Post Background Color Based On Category

—

by

Brad Dalton

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

Comments

9 responses to “Change Post Background Color Based On Category”

  1. Denise Carlton Avatar
    Denise Carlton

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      Installation is included however you will need to send access details https://wpsites.net/terms-of-service/#refunds-tutorial-requests

  2. j d Avatar
    j d

    Hi,

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

    Thanks.

  3. Tatiana M Avatar
    Tatiana M

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      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/

      1. Tatiana M Avatar
        Tatiana M

        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. 🙂

        1. Brad Dalton Avatar
          Brad Dalton

          I tested this and it works. Swap out the category class to match what you have :

          [code]
          .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;
          }
          [/code]

          You could add a custom body class using the in_category conditional tag however there’s no need.

          1. Tatiana M Avatar
            Tatiana M

            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.

          2. Brad Dalton Avatar
            Brad Dalton

            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

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.