Sign up ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am building a custom theme for a client in Wordpress:

She wants the background to change when you click on a gallery thumbnail in a post. It must be a solution, that doesn't involve any coding on her end.

  • create new gallery in a post
  • » user clicks thumbnail
  • » swaps background image
  • » clicks another thumbnail
  • » changes background image again

Any help is much appreciated.

share|improve this question

migrated from Oct 30 '11 at 2:53

This question came from our site for professional and enthusiast programmers.

1 Answer 1

The background image is applied to the <body> element, so using jQuery, all you really need to do is add a .click() handler to the $(' img') element, grabbing its src attribute and applying it to the body's background-image.

EDIT: I thought this would be an interesting exercise, so here is a plugin that does what you want (as far as I understood it). Go into wp-content/plugins and create a new file. Call it whatever you like. Paste this into your new file. Then go into the WordPress Admin back end and activate the new plugin.


Plugin Name: SE-32426 BackgroundGallery
Plugin URI:
Description: Click on any image of a default WP gallery, and that image is displayed in the background image.
Author: @TomAuger
Author URI:
License: GPL2

class SE32426_BackgroundGallery {
    // Make sure jQuery is loaded. If it already is, then this will do nothing.
    static function enqueue_jquery(){
        wp_enqueue_script( 'jquery' );

    // Add our own javaScript to the top of the WordPress gallery section.
    // Another way to do this would be to create a separate .js file and enqueue it like we did above.
    static function add_gallery_script( $output ){
        $output .= <<<END_JAVASCRIPT
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $(' img').click(function(event){
            // Prevent the click from actually going through and linking to the attachment post page

            // The image we clicked on is probably a thumbnail. We want the full image.
            thumbImg = $(this).attr('src');
            fullImg = thumbImg.replace(/-[^-.]+(\..+)$/, "$1");

            // Set the body's background image to the image we just clicked on.
            $('body').css('background-image', 'url(' + fullImg + ')');

        return $output;

add_action( 'init', array( 'SE32426_BackgroundGallery', 'enqueue_jquery' ) );
add_filter( 'gallery_style', array( 'SE32426_BackgroundGallery', 'add_gallery_script' ) );
share|improve this answer
It just occurred to me that perhaps you wanted the actual background image to "permanently" change for this user once she clicked on the gallery image. That's a whole different beast. Or you use cookies and run jQuery on every page to swap out the BG image, which seems a little hackish to me. –  Tom Auger Oct 30 '11 at 4:13
That would be a lot of AJAX and DB stuff... +1 –  kaiser Mar 10 '12 at 11:07

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.