Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to use WordPress Customizer for setting up Background Image of a section in Genesis. https://sridharkatakam.com/how-to-use-wordpress-customizer-for-setting-up-background-image-of-a-section-in-genesis/
/**
* Theme Options Customizer Implementation.
*
* @link http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/
*
* @param WP_Customize_Manager $wp_customize Object that holds the customizer data.
*/
function sk_register_theme_customizer( $wp_customize ){
/*
* Failsafe is safe
*/
if ( ! isset( $wp_customize ) ) {
return;
}
/**
* Add 'Home Top' Section.
*/
$wp_customize->add_section(
// $id
'sk_section_home_top',
// $args
array(
'title' => __( 'Home Top', 'theme-slug' ),
// 'description' => __( 'Some description for the options in the Home Top section', 'theme-slug' ),
'active_callback' => 'is_front_page',
)
);
/**
* Add 'Home Top Background Image' Setting.
*/
$wp_customize->add_setting(
// $id
'sk_home_top_background_image',
// $args
array(
'default' => get_stylesheet_directory_uri() . '/images/minimography_005_orig.jpg',
'sanitize_callback' => 'esc_url_raw',
'transport' => 'postMessage'
)
);
/**
* Add 'Home Top Background Image' image upload Control.
*/
$wp_customize->add_control(
new WP_Customize_Image_Control(
// $wp_customize object
$wp_customize,
// $id
'sk_home_top_background_image',
// $args
array(
'settings' => 'sk_home_top_background_image',
'section' => 'sk_section_home_top',
'label' => __( 'Home Top Background Image', 'theme-slug' ),
'description' => __( 'Select the image to be used for Home Top Background.', 'theme-slug' )
)
)
);
}
// Settings API options initilization and validation.
add_action( 'customize_register', 'sk_register_theme_customizer' );
/**
* Writes the Home Top background image out to the 'head' element of the document
* by reading the value from the theme mod value in the options table.
*/
function sk_customizer_css() {
?>
<style type="text/css">
<?php
if ( get_theme_mod( 'sk_home_top_background_image' ) ) {
$home_top_background_image_url = get_theme_mod( 'sk_home_top_background_image' );
} else {
$home_top_background_image_url = get_stylesheet_directory_uri() . '/images/minimography_005_orig.jpg';
}
// if ( 0 < count( strlen( ( $home_top_background_image_url = get_theme_mod( 'sk_home_top_background_image', sprintf( '%s/images/minimography_005_orig.jpg', get_stylesheet_directory_uri() ) ) ) ) ) ) { ?>
.home-top {
background-image: url( <?php echo $home_top_background_image_url; ?> );
}
<?php // } // end if ?>
</style>
<?php
} // end sk_customizer_css
add_action( 'wp_head', 'sk_customizer_css');
/**
* Registers the Theme Customizer Preview with WordPress.
*
* @package sk
* @since 0.3.0
* @version 0.3.0
*/
function sk_customizer_live_preview() {
wp_enqueue_script(
'sk-theme-customizer',
get_stylesheet_directory_uri() . '/js/theme-customizer.js',
array( 'customize-preview' ),
'0.1.0',
true
);
} // end sk_customizer_live_preview
add_action( 'customize_preview_init', 'sk_customizer_live_preview' );
.home-top {
background: url("images/picjumbo.com_IMG_6424-1600.jpg") no-repeat;
border-top: 1px solid #333;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.home-top {
/*background-image: url("images/minimography_005_orig.jpg");*/
background-repeat: no-repeat;
border-top: 1px solid #333;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
(function( $ ) {
"use strict";
// Home Top Background Image - Image Control
wp.customize( 'sk_home_top_background_image', function( value ) {
value.bind( function( to ) {
$( '.home-top' ).css( 'background-image', 'url( ' + to + ')' );
} );
});
})( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.