0

I wonder if there exists a quick way to register custom background images as simple as we do with the custom headers.

$header_images = array(
  'ferrari' => array(
    'url'           => get_template_directory_uri() . '/img/ferrari.jpg',
    'thumbnail_url' => get_template_directory_uri() . '/img/ferrari.jpg',
    'description'   => 'Ferrari',
  ),
  'harley-davidson' => array(
    'url'           => get_template_directory_uri() . '/img/harley-davidson.jpg',
    'thumbnail_url' => get_template_directory_uri() . '/img/harley-davidson.jpg',
    'description'   => 'Harley Davidson',
  ),
);
register_default_headers( $header_images );

Google fetched me nothing but this, couldn't get anything meaningful out of it. Is anyone doing this? Thoughts?

1

Here is code for it! As explained by Progostech

$defaults = array(
    'default-color'          => '',
    'default-image'          => '',
    'default-repeat'         => 'repeat',
    'default-position-x'     => 'left',
        'default-position-y'     => 'top',
        'default-size'           => 'auto',
    'default-attachment'     => 'scroll',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );  
1

We can add Custom background images support to theme in WordPress using the process similar to registering default headers. Here is your quick way!

$defaults = array(
    'default-color'          => '',
    'default-image'          => '%1$s/images/background.jpg',
    'default-repeat'         => 'repeat',
    'default-position-x'     => 'left',
        'default-position-y'     => 'top',
        'default-size'           => 'auto',
    'default-attachment'     => 'scroll',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

There are two more ways to implement it:

1 - We can do this by playing some tricks and load preset of images.

add_filter('body_class','random_background_images'); function random_background_images($classes) {

// Generate Random number from 1 to 10.  
$background_class = 'background_' . rand(1,10);

$classes[] = $background_class;

return $classes;

}

Add the code above to your wordpress themes functions.php file. It will add a random body class from background_1 to background_10

now you can add css for them as you want.

body.background_1 { background-image: url("images/home-bg/website-background1.jpg"); } body.background_2 { background-image: url("images/home-bg/website-background2.jpg"); } body.background_3 { background-image: url("images/home-bg/website-background3.jpg"); }

2 - jQuery example:

var images = [ "http://static1.squarespace.com/static/53453ebbe4b0d46770eb7505/5345482be4b01730378288f7/54b3a45de4b0d7856db8059e/1421059173445/", "http://static1.squarespace.com/static/53453ebbe4b0d46770eb7505/5345482be4b01730378288f7/54c5f3c8e4b0d7a7fa84acc2/1422274046633/", "http://static1.squarespace.com/static/53453ebbe4b0d46770eb7505/5345482be4b01730378288f7/54a78e9ae4b00f7c5fb39c4a/1421997719378/" ];

 var imgCount = images.length;

 var randNumber=Math.floor((Math.random() * imgCount) + 1);

 imgURL = "url('" + images[randNumber-1] + "')";

 var body=document.getElementById('collection-542ba4a1e4b032a0dde82b31');
 body.style.backgroundImage=imgURL;
 body.style.backgroundSize="100% auto";
 body.style.backgroundRepeat="no-repeat";

}());

If you need any further assistance, please let us know! Happy coding

  • Well, I am already doing this, and thinking of something a step further to it. I am looking for presets, as we do with the custom header images. register_default_headers is the function in question here. – Bheemsen Aug 17 '18 at 7:46
  • 1
    Please see the updated solution above. It has been edited. – PROGOSTECH Aug 28 '18 at 0:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.