Conditional Backgrounds in WordPress
Here’s the situation. You’re developing a WordPress theme. Maybe you’ve started with one of the tens of thousands of free templates available on the web or maybe you’ve started with one of the few bare bones themes like Starkers (my favorite because I hate dealing with other peoples code). You can find a great list of similar type “launch points” HERE. These save all sorts of time and effort of stripping out idle code, loops and functions you’ll never use. Awesome right? Personally, I’ve taken it one step further and created a couple of my own personal “blank” themes with a few other tidbits that I find useful including a very simple PHP conditional statement that allows for different backgrounds on different pages.
But why? Well, lets back up a bit. Back to where you’re developing a WordPress site… After finishing with the home page (or whatever page you may have started with) you move on to another page. You start laying your elements out, importing content and decide that you’d like a different background for said page(s). Then it hits you. Your html, body and, likely, your pagewrap/container div opening tags all live in your header.php file. Hmmm… It’s very likely that your theme uses only ONE header so using the “body” or “html” selector and assigning a background will in turn give you the SAME background through the whole site. boo. Like so:
[css]background: url(yourbackground.png);[/css]
So that’s cool if you’re using a solid background or actually WANT the same background throughout the whole site. But in this case we don’t so this is what you do.
The Cliff Notes:
1.) Make a WordPress template for each page you would a different background.
2.) Place a PHP conditional statement in the opening body tag.
3.) Use CSS to select the unique ids and apply your various backgrounds.
4.) Sit back and reap the wards of being an awesome designer.
The Full Version:
1.) Make a WordPress template for each page you would a different background within your theme folder. Then put the following as the first line of code in a new php file. After you do this, WordPress will see this and you can uses it in the back-end at will. Awesome – Again!
[php]<?php
/* Template Name: Your Name Here */
?>[/php]
…And finally name it “yourtemplatename-template.php”. That’s it.
So say we wanted four different backgrounds: One for the “main”, “singlepost”, “gallery” the last will be the “default”. The “default” will be any page that is NOT a “main”, “singlepost” or “page” template. So we make our three templates:
main-template.php
singlepost-template.php
gallery-template.php
Then dig into the header.php file, find the opening body tag and insert the following PHP code.
[php]<body id="<?php if (is_page_template(‘blog-tempate.php’)){
echo "blog";}
elseif (is_single()){
echo "singlepost-bg";}
elseif (is_page()){
echo "page-bg";}
elseif (is_home()){
echo "home-bg";}
else{
echo "default";
}?>">[/php]
Notice that the PHP code is inserted after the “id” attribute. When you reload each page you will notice that each one has the appropriate id applied. Awesome! Pretty trivial from here out. Simply select the the various id’s with CSS and apply the appropriate backgrounds and you’re done.
[css]
body#default {
background:url(images/default.png) fixed;
}
body#home-bg {
background:url(images/home.png) fixed;
}
body#blog {
background:url(images/blog.png) fixed;
}
body#singlepost-bg {
background:url(images/single.png) fixed;
}
body#page-bg {
background:url(images/page.png) fixed;
}
[/css]
As a bit of a post script, It’s worth mentioning that there can be a number of variations on the PHP code in the body tag depending on what you are looking to do. Anyone familiar with WordPress knows that there are already a number of predetermined “templates” (if you will) that already exist. The “page”, “home” and “single” pages already exist in the WordPress framework so there is no need to create templates for these pages.