Change Background Colour for each post

Community Forums Forums Design Tips and Tricks Change Background Colour for each post

This topic is: not resolved

This topic contains 4 replies, has 4 voices, and was last updated by  Genesis Developer 1 year, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #92719


    Wondering if it’s possible to change the background for each post or page. Not the actual background of the theme, which I have a photo for, but the background where the words of the post sit.

    Ideally I’d like either it to be a full colour, not white or an image of my choosing.

    Many thanks



    There may be a plugin for it, I’m not sure, alternatively you can use css.

    If your using chrome or firefox, right click on the post or page you want to add the background on and click inspect element.
    In the html field look for the post or page name it will look something like this depending what post/page it is:

    you can use these classes to add a background by putting it in a css editor or your child theme css.

    for example to change the background for post 6, put in your css –

    .post-6 {
    background: red;

    You can also add an image by using css background image and putting the url to an image in your media library.

    or you could use pseudo class ‘nth-child’ in your css, such as:

    .post:nth-child(8n+8) {
    background: blue;

    which says for every 8th post, add this background. You can then add more of these.

    • This reply was modified 1 year, 9 months ago by  andym119.
    • This reply was modified 1 year, 9 months ago by  andym119.

    Genesis Developer

    Use custom field option. Create a new custom field “post-bg” and put the color hex value in value field.

    Then you will add the following code in functions.php file

    add_action('genesis_entery_header', 'dynamic_background');
    function dynamic_background(){
      global $post;
      $post_bg = get_post_meta($post->ID, 'post-bg', true);
      if($post_bg && (get_post_type() == "post"))
         echo '<style type="text/css">.post-'  . $post->ID . '{background: ' . $post_bg . ';}</style>'  .  "\n";



    Genwrock: Very clever code.

    How might one alternate background colors on posts… say white then gray then white then gray… etc.


    Genesis Developer

    Aha.. Then I think that you do not need the above functionality. You can try this

    add_filter('post_class', 'custom_post_class');
    function custom_post_class($classes){
      global $wp_query;
      if( $wp_query->current_post % 2 == 0)
       $classes[] = "post-white";
       $classes[] = "post-grey";
     return $classes;

    Add the code in your functions.php file.

    Now add the following css in your style.css file

    .post-grey{background: #CCC;}
    .post-white{background: #FFF;}

    Note: I did not test the code. So you will keep a backup first and then you will try my code

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.