Changing a WordPress themes header on every page is not as difficult as one might think, as long as they understand how basic css works, and can follow the WordPress documentation for functions.

Note: Understanding the WordPress documentation can be difficult if you don’t understand basic php.

To do this your theme must be using the body_class() function. How to check if your theme is using the body_class function? This can be done by looking at your pages source code  in the browser. If the theme is using this function it will display code similar to the following code.

<body id="homepage" class="home page-template-default page page-id-6844 logged-in admin-bar  customize-support" style=" background-image: url(https://wrightfloat.com/wp-content/themes/wrightfloat/assets/images/background.jpg);

When your theme does not display this you will need to track down the php file responsible for displaying the body of your site, and add that function to that php file. Once you have added the body_class function to the theme or have determined it’s within the theme you can edit specific pages by targeting the css.  Let’s say I wanted to change the background color of every page single page, I could do this by targeting the single-post class and the header class that is responsible for displaying the background color, just like I have done within the example below.

body.single-post .header-container {
    background: #ffffff;
}

 

Categories
PHP
Website Guides
WordPress