WordPress Tutorials

We’ve discussed about creating simple random background in WordPress, including its cons which has no back-end interface, on the previous post. Some people are okay with having no backend interface since they have access to put the image directly on the server’s directory. However, for less-geeky person, this can be a trouble. This post will show you the fix of this issue: we’re going to create a more manageable random background feature which has a backend interface.

Basically, these are what to do to create this feature:

  1. Open functions.php file of your theme
  2. Create a new custom post-type with post-thumbnail support enabled. Let’s name it random-background
  3. Modify its post column edit page to make it more neat
  4. Create a function which generates stylesheet that modified the background using random-background‘s post-thumbnail
  5. Hook the function which generates stylesheet into wp_head()

That’s all. Here are the functions:

1. Create a new custom post-type with post-thumbnail support enabled. Let’s name it random-background

Open your functions.php and paste this function. This function will create new post-type called random-background and generate the dashboard interface.

// Add custom post type called random-background
add_action('init', 'ess_manageable_random_background_posttype');
function ess_manageable_random_background_posttype()
{
$labels = array(
'name' => _x('Backgrounds', 'post type general name'),
'singular_name' => _x('Background', 'post type singular name'),
'add_new' => _x('Add New', 'book'),
'add_new_item' => __('Add New Background'),
'edit_item' => __('Edit Background'),
'new_item' => __('New Background'),
'view_item' => __('View Background'),
'search_items' => __('Search Background'),
'not_found' =>  __('No background found'),
'not_found_in_trash' => __('No background found in Trash'),
'parent_item_colon' => ''
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title', 'excerpt', 'thumbnail')
);
register_post_type('random-background',$args);
}

2. Modify its post column edit page to make it more neat

Since we’re only use the title, excerpt, and post thumbnail, let’s modify the post column to show only those three things. Paste these functions below the previous function:

// Modifying the edit page
add_filter("manage_edit-random-background_columns", "title_ess_manageable_random_background");
add_action("manage_posts_custom_column", "ess_manageable_random_background_columns");

function title_ess_manageable_random_background($columns) //this function display the columns headings
{
$columns = array(
"cb" => "<input type="checkbox" />",
"title" => "Background Title",
"description" => "Description",
"thumbnail" => "Thumbnail"
);
return $columns;
}

function ess_manageable_random_background_columns($column)
{
global $post;
switch ($column)
{
case "description":
the_excerpt();
break;

case "thumbnail":
the_post_thumbnail('home-thumb');
break;
}
}

3. Create a function which generates stylesheet that modified the background using random-background’s post-thumbnail

Select one random post and pull its post-thumbnail. Print it as a stylesheet. Paste this function below the previous functions.

// Printing the background
function ess_manageable_random_background(){

$backgrounds = get_posts('post_type=random-background&numberposts=1&orderby=rand');
foreach( $backgrounds as $post ) :
setup_postdata($post);

$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'home-main' );
echo '<style type="text/css"> body{background:url(' . $image[0] . ');}</style>';

endforeach;
wp_reset_query();

}

4. Hook it into the wp_head!

Hook it into wp_head so it appears on the head section. Paste this function below the previous functions:

// Hook ess_manageable_random_background() into wp_head()
add_action("wp_head", "ess_manageable_random_background");

*****

background columns

Kudos! Now manageable random background feature for your WordPress theme has been created. To use it, go to Dashboard > Backgrounds > Add New. Type the title and description, then set the featured image. This featured image is the one that will be pulled by ess_manageable_random_background() function. After you’ve set the featured image, hit the publish button. Voila! It’s all done. Repeat the task to add more backgrounds.

FYI, If you’d like see how does it work, as usual i’ve made the TwentyTen Child Theme which uses this feature. Download the demo here.

Share Your Thought