integrated background in artisteer

Some readers asked me how to change the header image of an Artisteer 3 theme, because out of the box every page or post has the same header image. There are several ways to do this, but one way is to integrate WordPress’ Featured image in the header of your Artisteer theme. Thanks to the Featured image, it’s possible to select a different image for every page or post!

Allthough this isn’t very difficult, we will have to make some little changes in the code of the template. That’s why it’s very important that you have a copy of your original template. You can also use this solution for other (non-Artisteer) templates.

What Is The Featured Image?

The “Featured image” option allows you to select an image for each post or page, so you can use that image somewhere in your WordPress theme. Some themes use this option for selecting a thumbnail that will be used in article overviews.

You can find the Featured image option at the right side of a page or post:

Click on the “Set featured image” link. The window that opens is the same as for inserting a regular image. Select you image, but at the end, click on the “Use as a featured image” link:

In this tutorial I’ll show you how you can integrate the Featured image to use it as a header image.

Before You Start:

• Create a new theme in Artisteer or download an existing theme from the Artisteer website.
• Create your theme without radius for your header image, because this makes it much more difficult. In the following image you can see how to choose the radius of your header image:
  
• Install and activate this theme.
• Be sure you have a copy!!

You’ll need a php editor to achieve this. For this kind of stuff, I always use Coda, my favourite php editor on Mac. But there are a lot of other editors out there, free or commercial, and you can even use the built-in editor in WordPress.

Download The Sample Theme!

If you want, you can download the same Artisteer theme I used for this article: Download the sample theme

Just install and activate this theme (How to install and activate a theme?) and you’re ready to go!

Step By Step Guide

Please note, the required files can be found under wp-content/themes/name-of-your-theme.

Step 1: Change Style.css

The first thing you are going to change, is the css file. In fact, you’re going to add a css class (it’s just copy paste ). Search for the following div class: div.art-header-jpeg:

div.art-header-jpeg
{
  position: absolute;
  top: 0;
  left:0;
  width: 888px;
  height: 225px;
  background-image: url('images/header.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}

Copy paste this class and rename the new class div.art-header-jpeg-without-image. Remove the following line: background-image: url(‘images/header.jpg’);

Your new class should look like this (please note, if you use another theme, some values like height and width can differ from this example!):

div.art-header-jpeg-without-image
{
  position: absolute;
  top: 0;
  left:0;
  width: 888px;
  height: 225px;
  background-repeat: no-repeat;
  background-position: center center;
}

It’s also important to take a look at the width and the height. This width and height will be the size of the images you have to use as a Featured Image.

Save style.css.

Step 2: Add The Code For The Featured Image

Next You have to add the code for the Featured Image. Open header.php and search for the following div:

<div class="art-header-jpeg"></div>

Replace this code by the code below:

<?php
	if(has_post_thumbnail()){
		echo '<div class="art-header-jpeg-without-image">';
		the_post_thumbnail('full');
		echo '</div>';
	}
	else{
		echo '<div class="art-header-jpeg"></div>';
	}
?>

In short, this php-code means that if the post or page has a Featured image, that this Featured image has to be used in the header. Otherwise the original header image will be shown.

Now, if you select a Featured image on a page or post, this image will be used in your header! If you don’t select a Featured image, the original header image will be shown.