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 that uses the default post type, I could do this by targeting the single-post class and the header class or id that is responsible for displaying the background color. This can be applied to changing any thing on your site and not have to use that ugly !important property.

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

 

Categories
PHP
Website Guides
WordPress