How to Randomly Change Background Color in WordPress

Last updated Jul 10, 2019

Recently, one of our readers asked us if it was possible to randomly change background color in WordPress. Colors play an important role in how users see your website and how they engage. In this article, we will show you how to randomly change background color in WordPress.

Method 1: Add Random Background Color in WordPress Using Code

This method requires you to add code into your WordPress files. Try this method only if you are comfortable with pasting snippets from web into WordPress.

First you need to add this code to your theme’s functions.php file or a site-specific plugin.

  function wpb_bg() {   $rand = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');  $color ='#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].  $rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];  echo $color;  }

This function simply generates a random hex color value and echoes it.

Now you need to edit your theme’s header.php file. Locate the <body> tag line, it will look like this:

  <body <?php body_class(); ?>>

Replace it with this line:

  <body <?php body_class(); ?> style="background-color:<?php wpb_bg();?>">>

Save your changes and then visit your website to see the code in action.

Method 2: Add Random Color Stripes Using Fabulous Background Colors

This method is easier and is recommended for beginners who do not want to edit their WordPress theme files.

First, you need to install and activate the Fabulous Background Colors plugin. For more details, see our step by step guide on how to install a WordPress plugin.

The plugin works out of the box, and there are no settings for you to configure.

You can now visit your website, and you will see colorful stripes as background color on your website. These stripes will fade and change colors elegantly after every 5 seconds.

Method 3: Using CSS to Add Non-Random Background Colors in WordPress

Almost all standard compliant WordPress themes use body_class() function in the body tag. This tag adds a number of CSS classes to the body tag in your theme. These default WordPress generated CSS classes can be used to style individual posts, categories, tags, etc.

For example, if your blog has a category called photography, then you can find these CSS classes in the body tag of the category archive page.

You can change background color of that particular category by simply adding this CSS to your WordPress theme or by using custom css plugin.

  body.category-photography {   background-color:#faebd7;  }

Similarly you will also find the post ID class for individual posts in the body class. You can use it to style each WordPress post differently.

  body.postid-65 {   background-color:#faebd7;  }

We hope this article helped you learn how to randomly change background color in WordPress. You may also want to see our guide on how to add a full screen background image in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.