Add background images to widget areas using Customizer in Genesis

How to use the customiser to upload and set images as CSS backgrounds to widgetised areas in Genesis.

Taking the Altitude Pro theme as an example as it uses a number of front page widget areas in which you can set the background image via the Customizer, this is great if you need to have a client change the background image at will. This tutorial will look at using the same technique.

The only things that need to be changed in the code are the theme name, this tutorial uses genesischild, number of images and some user notices regarding preferred image size.

First create, register and position widgets

This example is using the widget IDs of featured-background-1 and featured-background-2 you can add more on as required and it is smart to keep the naming convention in the same pattern as the customize and output  code use these names, just append a digit incrementally.

<?php
/**
* Register and unregister and position all the widgets.
*
* @package genesischild
*/
add_action( 'widgets_init', 'genesischild_extra_widgets' );
/**
* Register new Widget areas and position them.
*/
function genesischild_extra_widgets() {
genesis_register_sidebar( array(
'id' => 'featured-background-1',
'name' => __( 'Hero Home Page', 'genesischild' ),
'description' => __( 'This is the Hero Home Page area', 'genesischild' ),
) );
genesis_register_sidebar( array(
'id' => 'featured-background-2',
'name' => __( 'Optin', 'genesischild' ),
'description' => __( 'This is the optin area', 'genesischild' ),
) );
}
add_action( 'genesis_after_header','genesischild_hero_widget' );
/**
* Position the Hero Area.
*/
function genesischild_hero_widget() {
genesis_widget_area( 'featured-background-1', array(
'before' => '<section class="featured-background-1 herocontainer"><div class="wrap hero">',
'after' => '</div></section>',
));
}
add_action( 'genesis_after_header','genesischild_optin_widget' );
/**
* Position the Optin Area.
*/
function genesischild_optin_widget() {
genesis_widget_area( 'featured-background-2', array(
'before' => '<aside class="featured-background-2 optincontainer"><div class="wrap optin">',
'after' => '</div></aside>',
));
}
view raw widget-register.php hosted with ❤ by GitHub

I have output these with the hook genesis_after_header but you can position anywhere.

The key thing here is that the surrounding element of the widget also has the same class as the widget ID, e.g .featured-background-1

Call In Our customize.php & output.php

<?php
// Add Image upload and Color select to WordPress Theme Customizer.
require( get_stylesheet_directory() . '/lib/customize.php' );
// Include Customizer CSS.
require( get_stylesheet_directory() . '/lib/output.php' );
view raw functions.php hosted with ❤ by GitHub

Here we call into our functions.php our required files for the customizer and CSS output.

Create Our customize.php

So now create the directory and file /lib/customize.php and give it content

<?php
/*
* Add Background Images Via the Customizer
*/
add_action( 'customize_register', 'genesischild_customizer_register' );
/**
* Register settings and controls with the Customizer.
*
* @since 1.0.0
*
* @param WP_Customize_Manager $wp_customize Customizer object.
*/
function genesischild_customizer_register() {
/**
* Customize Background Image Control Class
*
* @package WordPress
* @subpackage Customize
* @since 3.4.0
*/
class Child_Genesischild_Image_Control extends WP_Customize_Image_Control {
/**
* Constructor.
*
* If $args['settings'] is not defined, use the $id as the setting ID.
*
* @since 3.4.0
* @uses WP_Customize_Upload_Control::__construct()
*
* @param WP_Customize_Manager $manager
* @param string $id
* @param array $args
*/
public function __construct( $manager, $id, $args ) {
$this->statuses = array( '' => __( 'No Image', 'genesischild' ) );
parent::__construct( $manager, $id, $args );
$this->add_tab( 'upload-new', __( 'Upload New', 'genesischild' ), array( $this, 'tab_upload_new' ) );
$this->add_tab( 'uploaded', __( 'Uploaded', 'genesischild' ), array( $this, 'tab_uploaded' ) );
if ( $this->setting->default )
$this->add_tab( 'default', __( 'Default', 'genesischild' ), array( $this, 'tab_default_background' ) );
// Early priority to occur before $this->manager->prepare_controls();
add_action( 'customize_controls_init', array( $this, 'prepare_control' ), 5 );
}
/**
* @since 3.4.0
* @uses WP_Customize_Image_Control::print_tab_image()
*/
public function tab_default_background() {
$this->print_tab_image( $this->setting->default );
}
}
global $wp_customize;
// Add in the correct amount of images into the array
$images = apply_filters( 'genesischild_images', array( '1', '2') );
$wp_customize->add_section( 'genesischild-settings', array(
'description' => __( 'Use the included default images or personalize your site by uploading your own images.<br /><br />The default images are <strong>1600 pixels wide and 1050 pixels tall</strong>.', 'genesischild' ),
'title' => __( 'Featured Background Images', 'genesischild' ),
'priority' => 35,
) );
foreach( $images as $image ){
$wp_customize->add_setting( $image .'-genesischild-image', array(
'default' => sprintf( '%s/images/bg-%s.jpg', get_stylesheet_directory_uri(), $image ),
'type' => 'option',
) );
$wp_customize->add_control( new Child_Genesischild_Image_Control( $wp_customize, $image .'-genesischild-image', array(
'label' => sprintf( __( 'Featured Background %s Image:', 'genesischild' ), $image ),
'section' => 'genesischild-settings',
'settings' => $image .'-genesischild-image',
'priority' => $image+1,
) ) );
}
}
view raw customize.php hosted with ❤ by GitHub

This code is very similar to what is used in Altitude, just some minor tweaks, the key thing here is to add in the required amount of images into the array.

Create Our output.php

So now create the file /lib/output.php and give it content

<?php
/*
* Adds the required CSS to the front end.
*/
add_action( 'wp_enqueue_scripts', 'genesischild_css' );
/**
* Checks the settings for the images and background colors for each image
* If any of these value are set the appropriate CSS is output
*
* @since 1.0
*/
function genesischild_css() {
wp_enqueue_style( 'genesischild', get_stylesheet_directory_uri() . '/style.css' );
//If your theme does not have it's name defined, don't use the $handle variable just use the actual id of the themes CSS, such as in this example 'genesischild' add it further below - wp_add_inline_style( $handle, $css );
$handle = defined( 'CHILD_THEME_NAME' ) && CHILD_THEME_NAME ? sanitize_title_with_dashes( CHILD_THEME_NAME ) : 'child-theme';
// Add in the correct amount of images into the array
$opts = apply_filters( 'genesischild_images', array( '1', '2' ) );
$settings = array();
foreach( $opts as $opt ){
$settings[$opt]['image'] = preg_replace( '/^https?:/', '', get_option( $opt .'-genesischild-image', sprintf( '%s/images/bg-%s.jpg', get_stylesheet_directory_uri(), $opt ) ) );
}
$css = '';
foreach ( $settings as $section => $value ) {
$background = $value['image'] ? sprintf( 'background-image: url(%s);', $value['image'] ) : '';
// Remove the conditional surrounding the code below if the images are appearing on pages other than the front page
if( is_front_page() ) {
$css .= ( ! empty( $section ) && ! empty( $background ) ) ? sprintf( '.featured-background-%s { %s }', $section, $background ) : '';
}
}
if ( $css ){
wp_add_inline_style( $handle, $css ); //so here instead of $handle use your themes CSS ID - which in this case is genesischild
}
}
view raw output.php hosted with ❤ by GitHub

Again keep the array in sync for the amount of images required – also remove the conditional statement surrounding the $css variable if the images are showing on pages other than the front page.

Customizer

genesis-customizer-image

 

Now you can interface with the Customizer – Appearance > Customize to upload the image, the code also allows for default images stored in your themes images folder, if you want just add some defaults with naming conventions bg-1.jpg and bg-2.jpg

And Some CSS

.featured-background-1,
.featured-background-2 {
background-color: #fff;
background-position: 50% 0;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
view raw style.css hosted with ❤ by GitHub

This should get you going just add more as required!

2 Comments

  1. chrys on February 4, 2017 at 5:57 pm

    Hi,

    I’m still learning php and I’m a bit lost here and wouldn’t mind some guidance on what to look for what I want to do..

    I’ve created my own salespage template with 8 widgets area and all the widgets area has a class.
    My wish is to use the customizer to upload a background image for the first (top) widget area only.
    As a child theme I’m using parallax pro which already has some bg customizations in customizer for the front page.
    Basically I want to add one more for my custom template..But I can’t see which code to add or which one to tweak..

    Can you put me on the right trail?

    Thanks so much.

  2. Sean Vandenberg on March 24, 2016 at 2:24 am

    Hi, Neil:

    This is a very nice feature to use for making a site easy to customize for the end user. Looking forward to applying this to one of my clients sites soon. Thanks!

    – Sean

Leave a Comment





%d bloggers like this: