We all have seen WordPress sites with repeating backgrounds that span beautifully across the entire page. This property is usually applied in the body tag of your template. What about those portfolio websites that use a different background image in the front page? Or those magazine styled websites that apply different backgrounds for their category pages? How’d they do that?

The problem

For anyone who’s developed a WordPress theme would know how to break it up in templates: header.php, sidebar.php , footer.php etc. And as I’ve mentioned: you control the background image (if you want it to span the entire page) usually in the body tag of your HTML. The problem is – the body tag comes BEFORE any other tag in your templates.

For example, take a look at the screenshot of a typical header.php file below. It shows the body tag where you apply a different property value in the CSS file each time you want it unique from another page:

bg-tut1

The problem is, in your special template, you’ve already called the get header file:

bg-tuts2

The Answer – Conditional Tags

WordPress is built is such a way that you can control almost every aspect of your pages. One useful snippet is known as Conditional Tags. Conditional tags can be used in your templates to change what is displayed on a particular page – like the background image. Examples of conditional tags are: is_single(), is_front_page() or is_admin(). For more information on Conditional Tags – see the this link from WordPress Codex library. In our case – we’re going to use the tag is_page_template().

Step 1: Insert the PHP

Open your header.php in your text editor. You’re going to add a conditional statement in inside the opening body id tag. In my case, I’m using three different backround images. Two of them, I want to apply in two individual templates, while the rest of the pages share a default image:

1
2
3
4
5
6
7
8

<body id="
<?php if (is_page_template('template-diff-bg-demo1.php')){
       echo "template-diff-bg-demo1";} 
elseif (is_page_template('template-diff-bg-demo2.php')){
       echo "template-diff-bg-demo2";
}else{
echo "default";
}?>" >

Explanation: If the template used is named “template-diff-bg-demo1.php”, echo a body id of “template-diff-bg-demo1”, or if template used is named “template-diff-bg-demo2.php” use body id of “template-diff-bg-demo2”, otherwise – just use body id of “default”.

Step 2: The CSS

Open your styles.css. We’re going to match the body ids that are going to be called each time you switch page templates. In our case – we need three different ids:

  • body# template-diff-bg-demo1 – a different background
  • body# template-diff-bg-demo2 – another background
  • body#default – the default background
1
2
3

body#default { background:url(images/default-bg.jpg) top center no-repeat #000000; }
body#template-diff-bg-demo1 { background:url(images/default-bg2.jpg) top center no-repeat #000000;}
body#template-diff-bg-demo2 { background:url(images/default-bg3.jpg) top center no-repeat #000000; }

Conclusion

There you have it. We dynamically changed the body ids of our theme – according to specific page templates. Changing the body ids allowed us style them differently in our stylesheet. This is just one of many possibilities in displaying content (or in our case – style) by using WordPress’ conditional tags. Check out the demo using the code above from this link. Happy Coding!

bg-tuts3