WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
  • Deals
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Randomly Change Background Color in WordPress

How to Randomly Change Background Color in WordPress

Last updated on July 29th, 2016 by Editorial Staff
143 Shares
Share
Tweet
Share
Special WordPress Hosting offer for WPBeginner Readers
How to Randomly Change Background Color in WordPress

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.

Adding random background colors 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.

Random background colors

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.

Random background stripes

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.

CSS classes added by WordPress

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.

143 Shares
Share
Tweet
Share
Popular on WPBeginner Right Now!
  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Why Build Your Email List Today

    Revealed: Why Building Your Email List is so Important Today!

  • Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Step by Step Guide: How to Start a Podcast with WordPress

    How to Start Your Own Podcast (Step by Step)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

The Ultimate WordPress Toolkit

5 Comments

Leave a Reply
  1. Janis Martin says:
    Mar 3, 2018 at 2:44 am

    I would like a pink, lilac, blue and pale green background on different pages on a word press website but my web designer says it is not possible. Is there any way of creating this?

    Reply
    • Kenny says:
      Mar 25, 2018 at 5:53 am

      The instructions are in the article: Method 3

      Reply
  2. Nankunda Justine says:
    May 17, 2017 at 5:34 am

    i need to change my background color and am trying themes and widgets. Its not coming out well.

    Reply
  3. sanayar says:
    Apr 25, 2017 at 7:55 am

    hi there,
    actually, I need to change the whole default color of my background articles from while to black. so I couldn’t able to find a suitable plugin or code doing that such job.

    Reply
    • Masih Dindar says:
      Aug 19, 2017 at 4:36 pm

      Hi,
      you can use function and conditional ” is_singular() ” to ECHO some colors in Single posts!
      Try it :)

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 600,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
MonsterInsights
MonsterInsights
Google Analytics made easy for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2018 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2018)
    • Which is the Best WordPress Slider? Performance + Quality Compared
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • 5 Best VPN Services for WordPress Users (Compared)
    • HostGator Review - An Honest Look at Speed & Uptime (2018)
    • SiteGround Reviews from 1032 Users & Our Experts (2018)
    • Bluehost Review from Real Users + Performance Stats (2018)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2018 – Step by Step Guide
Deals & Coupons (view all)
CSSIgniter
CSSIgniter Coupon
Get 30% off on the entire CSSIgniter Themes collection.
HostGator
HostGator Coupon
Get 60% OFF HostGator (the same company that WPBeginner uses).
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • List25
  • Awesome Motive
  •  

Copyright © 2009 - 2018 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.