One of our subscribers asked us if it was possible to randomly change the background color of WordPress. Background colors play an important role on your audience. They can change the way users interact with your website. In this tutorial, we will show you how to randomly change the background color of your WordPress blog.

1 Method: How to Add Random Colors Manually

This method is intended for developers. It will require you to add a portion of code in your plugins or themes. Remember you were shown how to create a WordPress plugin.

All you have to do is add the following piece of code in your plugin, or in your theme's “functions.php” file.

function bpc_bg () {$ rand = array ('0', '1', '2', '3', '4', '5', '6', '7' 'a B C D E F'); $ rand [rand (8)] $ rand [rand (9)] $ rand [rand (0,15)]. $ Rand [rand (0,15)] $ rand [rand (0,15)] $ rand [rand (0,15)].. echo $ color; }

This function displays only the hexadecimal colors that it generates beforehand.

You will therefore need to modify the header.php file of your theme, where the boy tag is located as in the following image:

>

You must replace it with the following code:

style = "background-color: ">>

Save your file and refresh your page, you will notice that there is a color change every time.

random WordPress background

You have no limit on the colors you can choose. It is even possible to do the same thing with colors that you have predefined.

Method 2: how to modify the background colors with a plugin

the rendering of this method is better. Because it allows you to display several colors at the same time and dynamically. All you have to do is install and activate the plugin faboulous background colors. You can read our guide on installing and activating WordPress plugins.

animated background

By accessing  your blog, you will notice that the latter has background colors represented as stripes which change in a gradient transition.

3 Method: How to add a custom color by playing with CSS classes

Presque tous lesson WordPress themes standard use the function " body_class » from WordPress on the “body” tag. This function adds CSS classes generated by WordPress or plugins to the body tag of your blog. Each class varies depending on the location one is in. The class of categories will therefore be different from that of archives or authors.

For example, if you have a blog with a category called " photography“, Then you can find the corresponding class in the blog archives page.

class blog articles

From this moment on, you can apply a specific style to this tag.

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

Similarly, you can apply a specific code for a particular category

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

That's about all there is to know. I hope this tutorial will allow you to add custom classes on your WordPress blog. Feel free to share this article with your friends on your favorite social networks.