Featured Background Images

With this WordPress Plugin you can set a Featured Image per Post or Page, which is then used as a full background image.
You can also set a default image for your entire website.

Table of Contents

1. Installation instructions
2. Template Usage
3. Changing Featured Images and Default background image
4. PHP File functions and Structure
5. JavaScript
6. PHP Code Explanation
7. About this Plugin

A) Installation instructions – top

Just copy this plugin (the entire ‘featured-background-images’ folder) into your WordPress plugins directory.

Then go to your plugin section in the WordPress CMS and click ‘Activate’.

B) Template Usage – top

There is no need to adjust anything in your template. Just activate and run the plugin.

Note: The scripts does add piece of CSS to your theme located in the plugins directory in ‘css/background.css‘.
Here are DIVs with the ids #fbi_background and #fbi_bg_image defined.
If you have the same DIVs defined in your existing theme these might conflict eachother.

C) Changing Featured Images and Default background image – top

You can set a Featured Image for any one of your Posts or Pages.
There is more information on setting a Featured Image in the WordPress support section online here.

A new metabox is added called “Featured Image”. If you already activated this feature in your theme you will now see the extra description as well.

This plugin contains a default Background Image called default_background.jpg and is located in the plugin folder under
../wp-content/plugins/featured-background-images/images/..
This default image will be shown as a background on your website if you haven’t selected a Featured Image for a Page or Post yet.
You can Change the default image here (or manually in the plugin folder).
Accidentally removed the Default Image from this plugin? No worries, we’ve added a backup in your plugin here. 🙂

D) PHP File functions and Structure – top

Functions
The plugin consists of one simple PHP file (fbi-index.php) which contains all the necessary PHP functions and includes for this plugin.
These are the functions briefly explained;

Featured Image functions
fbi_get_featured_image($post_id);
gets the Featured image through the wordpress get_post_thumbnail_id() function

fbi_columns_head($defaults);
Adds a column to the Post and Page overview

fbi_columns_content($column_name, $post_id);
adds a thumbnail to the columns, a default one if there is no featured image

fbi_add_featured_image_text($content);
adds a text below the Featured Image explaining that the Featured Image is now
indefinitely used as a Background Image

Background functions
fbi_run_background_script();
gets the current post id on the page, checks if there is a Featured Image or not
and then sends the URL to the fbi_add_code_to_body(): function

fbi_add_code_to_body($featured_image_url);
echoes a jQuery scripts into the HEAD section of your pages. This jQuery script in turn
places a HTML code below the body tag containing the background image.
This solution is born out of necessity since there is no available “body” hook in WordPress.

fbi_get_default_image_path();
Since you are able to upload JPG, GIF or PNG pictures we need to define which one is
currently set as the default background image.
Plugin functions
fbi_admin_head();
enqueues scripts and styles in the header

fbi_add_options_page();
adds a ‘Background Image’ page under Settings.

fbi_options_page();
Runs the Options page code with a brief explanation about the plugin
and a link to this documentation page, etc.

the add_filter() and add_action() hooks are necessary to run some of the plugin scripts.
Please do not edit or extend these functions.

Structure
This is the basic structure of the plugin and the containing files, starting from the plugin folder ‘featured-background-images’.

• fbi-index.php (main plugin file)
• documentation (folder)
  • assets (folder)
    • ...blueprint css files and images for this explanation file
  • index.html (this file)
  • screenshots (folder)
    • ... (screenshots 1 to 6)
• images (folder)
  • default_background_thumbnail.jpg (file, default thumbnail shown in CMS Columns)
  • default_background.jpg (file, default Background Image)

E) JavaScript – top

This theme imports a single Javascript file and uses a few small jQuery scripts.

1. A jQuery library
2. My custom jQuery scripts
3. Some custom Javascripts

1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
2. I have written a small jQuery script to add to the Options page, which simply toggles a class in a box to open or close it.
   It looks like this;
   jQuery(document).ready( function($) {
   $(“div.postbox h3”).click(function () { $(this).parent(“.postbox”).toggleClass(“closed”); });
   });
   Another custom jQuery scripts adds generated HTML code dynamically to the body of your theme pages through the jQuery prepend() function like so:
   jQuery(document).ready( function($) {$(‘body’).prepend(‘ CUSTOM_HTML_CODE ‘);} );
3. Other Custom Javascripts are located in ‘js/functions.js’ and calculate the size of the screen and the amount of px to resize the image.

F) PHP Code explanation – top

This plugin uses the WordPress built-in Featured Image function get_post_thumbnail_id() to get the thumbnail (for the columns) like so:

<?php
function fbi_get_featured_image($post_id) {
$post_thumbnail_id = get_post_thumbnail_id($post_id);

if (!empty($post_thumbnail_id)) {
$the_post_thumbnail_img_array =
wp_get_attachment_image_src($post_thumbnail_id, ‘featured_preview’);
$the_post_thumbnail_img = $the_post_thumbnail_img_array[0];
}

return $the_post_thumbnail_img;
}
?>

To get the actual image we use a Post ID check, then check if that Post has a featured image. If not there is a default-image check.
Then the actual image will be passed on the the next function which will output a background script with the right URL.

<?php
function fbi_run_background_script(){
global $plugin_url;

$the_post_id = get_the_ID();

//check if there is a featured image
if (has_post_thumbnail( $the_post_id ) ) {
$featured_image_url_array = wp_get_attachment_image_src(
get_post_thumbnail_id( $the_post_id ), ‘single-post-thumbnail’
);
$featured_image_url = $featured_image_url_array[0];
} else {
//if there is none apply the default background image
$featured_image_url = fbi_get_default_image_path();
}
//now pass the output to the next function
fbi_add_code_to_body($featured_image_url);
}
?>

G) About this Plugin – top

type: WordPress Plugin
languages: PHP, HTML, CSS, jQuery and custom javascript
version nr: 1.0
release date: 19/09/2013
This plugin is compatible with all newer versions of WordPress from WordPress version 2.9.0 up to 3.6.1
Plugin documentation URL: http://www.atypisch.nl/plugins/featured-background-images

This plugin is entirely written by Marten Timan, owner and founder of Atypisch Webdesign & Webdevelopment currently based in Utrecht, The Netherlands.

Please feel free to make a donation to stimulate further development of this or other plugins.