Recently I had to make a Wordpress based site with a custom background. A friend of mine suggested using Wordpress gallery (via attaching the images to the pages) to do it. It's possible, and I have done it, however the actual site has to be moved, and i experienced some problems
exporting and importing the posts and pages. The problem is, that when exporting, it gives some kind of error about the attached images.
So, i tried to find out another way to set background images for a Wordpress site, in a more easy and movable way. My purpose was to put all images on some sub-folder of the theme, and then use a custom field the page. This, combined with some magic code inside "functions.php" code, can make it possible.
Here are the steps!
1. Add a custom field to your pages. In my case, i called it "bgrange". (If you don't see custom fields it's because they are hidden, click "Screen options" upper right of the screen, for later Wordpress versions, after 3.2 i guess, then check "custom fields" check-box).
2. Put a value in the custom field. The code i made is able to recognize background ranges. Note that your backgrounds must be named with the same prefix and suffix, for example "my_background_XX.png", where XX is the number of the background. In the case of the image, the images selected are the named "my_background_01.png", "my_background_02.png",etc, until 8, and the final one is the image "my_background_19.png", in this case. Prefix and suffix can be set later to fit your preferences, as will be seen. Do this operation on all the pages that you want to show the custom background.
3. Let's add some PHP code in your page header, for example.
<div id="preload" style="display:none;">
<?php
$bgpath = "".get_bloginfo("template_directory")."/images/backgrounds/";
$range = "".get_post_meta($post->ID, 'bgrange', true);
echo "\n";
get_backgrounds2($bgpath, "my_background_" ,".png", $range);
?>
</div>
Ok what this code does is: put a div with an ID called "preload" that is hidden, so images won't be displayed for now. Then, the php code gets the template directory of your theme, and supposes that your backgrounds are inside "<yourthemename>/images/backgrounds". You can change that to fit your needs. The second php line gets the custom field that we just added to the page. This is a string, that will be treated afterward. After that, a simple "echo \n" to ease the readness of the code (not necessary but makes easier to read your code). The final statement uses a custom function that has to be defined on your "functions.php", a file located in your theme folder in case you don't know, that includes a lot of functions used by your theme to make it work. So, the last step is to put these functions on functions.php file!
3. Open your functions.php file and put this code:
function get_backgrounds($path, $prefix, $sufix, $start, $end) {
if($start<=$end){
for($n=$start; $n<=$end; $n++){
$nstr = trim("".$n);
if($n<=9 && $n>=0){$nstr = "0".$nstr;}
echo "<img class=\"bgimage\" src=\"".$path.$prefix.$nstr.$sufix."\"/>";
echo "\n";
}
return true;
}else{
for($n=$start; $n>=$end; $n=$n-1){
$nstr = trim("".$n);
if($n<=9 && $n>=0){$nstr = "0".$nstr;}
echo "<img class=\"bgimage\" src=\"".$path.$prefix.$nstr.$sufix."\"/>";
echo "\n";
}
return true;
}
return false;
}
function get_backgrounds2($path, $prefix, $sufix, $list) {
$data = explode(',', $list);
for($n=0; $n<count($data); $n++){
if(strpos($data[$n], '-') !== false){
$rdata = explode('-', $data[$n]);
get_backgrounds($path, $prefix, $sufix, $rdata[0], $rdata[1]);
}else{
$nstr = trim("".$data[$n]);
if(intval($data[$n])<=9 && intval($data[$n])>=0){$nstr = "0".$nstr;}
echo "<img class=\"bgimage\" src=\"".$path.$prefix.$nstr.$sufix."\"/>";
echo "\n";
}
}
return true;
}
What makes this code? Ok, let's start by the second function. Basically what it makes is to get a path (the path to your backgrounds) a prefix (remember, "my_background_" for example), a suffix (".png" for example) and a list (that is, the custom field we added to our pages). The list is "exploded" into individual elements, separated by commas. Then, if a range of backgrounds is detected, the first function is called, that in turn explodes it and generates the list of images. If no range detected, the list elements generate individual backgrounds. You finally end up with a list of "<img>" elements "echoed" (that is, generated HTML put on your page). Since the <div> element that they are in is hidden, there is no problem. We just need that code in the page , so we can use it afterward.
So, now we have our page with a hidden div, and the images on it, they are not displayed but the code is there, now what?
4. Use a jQuery or JavaScript plug-in to show the images as backgrounds. I used successfully
Supersized to do so. You just need to go to their page, i recommend you to check the demos and then download the source code. Then play with the downloaded demos locally, and check the code. It's really nice and easy to put it in your page. You will end up with a Javascript code like this:
<script type="text/javascript">
var slidelist=[];
function put_in(){
var x=$(this);
var source= ""+x.attr("src");
slidelist.push({'image': source});
}
var bgs = $(".bgimage");
bgs.each(put_in);
The code above will let you put all the elements of a certain class, in this case ".bgimage" into a list. Get a look at the php code on functions php, and you will notice that this class is added to every image. So once you have the list, you can call the Supersized plug-in like this:
$.supersized({
// Functionality
slide_interval : 3000, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 700, // Speed of transition
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : slidelist
});
</script>
I hope it helps you making your custom backgrounds easier and more movable, and without the long and boring process of attaching the images to your pages.
See you soon!
