Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Use a Background Gradient in WP Customizer + Various other Customizer functions
/**
* Make the WP Customizer also recognize and adjust pseudo- elements like :before and :hover
* Non-instantaneous update - requires partial page refresh
*/
// Highlight colors
wp.customize( 'highlight_color', function( value ) {
value.bind( function( to ) {
$( 'a:visited, a:hover, a:focus, a:active, .entry-content a, .entry-summary a' ).css( {
'color': to
} );
$( '.search-toggle, .search-box-wrapper' ).css( {
'background-color': to
} );
// For Sticky Posts headers (using :before pseudo-class)
// @see http://wpgothemes.com/add-customizer-color-pickers-for-hover-styles/
var style, el;
style = '<style class="sticky-post-label">.sticky:before { background: ' + to + '; }</style>';
el = $( '.sticky-post-label' ); // look for a matching style element
// add the style element into the DOM or replace the matching style element
if( el.length ) {
el.replaceWith( style );
} else {
$( 'head' ).append( style ); // style element doesn't exist so add it
}
} );
} );
// Custom Customizer Functions
// Header Gradient color
// Set default colors
grad1_color = '#085078';
grad2_color = '#85d8ce';
grad3_color = '#f8fff3';
wp.customize( 'grad1_color', function( value ) {
value.bind( function( to ) {
grad1_color = to;
$( '.custom-header' ).css( {
'background': 'radial-gradient( ellipse farthest-side at 100% 100%, '
.concat( grad3_color ).concat( ' 10%, ' )
.concat( grad2_color ).concat( ' 50%, ' )
.concat( grad1_color ).concat( ' 120% )' )
} );
} );
} );
wp.customize( 'grad2_color', function( value ) {
value.bind( function( to ) {
grad2_color = to;
$( '.custom-header' ).css( {
'background': 'radial-gradient( ellipse farthest-side at 100% 100%, '
.concat( grad3_color ).concat( ' 10%, ' )
.concat( grad2_color ).concat( ' 50%, ' )
.concat( grad1_color ).concat( ' 120% )' )
} );
} );
} );
wp.customize( 'grad3_color', function( value ) {
value.bind( function( to ) {
grad3_color = to;
$( '.custom-header' ).css( {
'background': 'radial-gradient( ellipse farthest-side at 100% 100%, '
.concat( grad3_color ).concat( ' 10%, ' )
.concat( grad2_color ).concat( ' 50%, ' )
.concat( grad1_color ).concat( ' 120% )' )
} );
} );
} );
<?php
/* ///////////////// GRADIENT ////////////////// */
/*
* Use Gradient Checkbox
*/
// Use Gradient Setting
$wp_customize->add_setting( 'use_gradient', array(
'default' => 0,
) );
// Use Gradient Control
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'use_gradient',
array(
'label' => __( 'Use Header Gradient?', 'jin' ),
'type' => 'checkbox',
'section' => 'header_image',
)
) );
/*
* Gradient Color #1
*/
// Gradient #1 Color Setting
$wp_customize->add_setting( 'grad1_color', array(
'default' => '#085078',
'type' => 'theme_mod',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage'
) );
// Gradient #1 Color Control
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'grad1_color', array(
'label' => __( 'Header Gradient: Top-Left Color', 'jin' ),
'description' => __( 'Set or change the upper left gradient starting color.', 'jin' ),
'section' => 'header_image',
)
) );
/*
* Gradient Color #2
*/
// Gradient #2 Color Setting
$wp_customize->add_setting( 'grad2_color', array(
'default' => '#85D8CE',
'type' => 'theme_mod',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage'
) );
// Gradient #2 Color Control
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'grad2_color', array(
'label' => __( 'Header Gradient: Center Color', 'jin' ),
'description' => __( 'Set or change the center gradient color.', 'jin' ),
'section' => 'header_image',
)
) );
/*
* Gradient Color #3
*/
// Gradient #3 Color Setting
$wp_customize->add_setting( 'grad3_color', array(
'default' => '#F8FFF3',
'type' => 'theme_mod',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage'
) );
// Gradient #3 Color Control
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'grad3_color', array(
'label' => __( 'Header Gradient: Bottom-Right Color', 'jin' ),
'description' => __( 'Set or change the lower right gradient ending color.', 'jin' ),
'section' => 'header_image',
)
) );
?>
<?php
/**
* Support for Custom Background
*/
// Set up the WordPress core custom background feature.
add_theme_support( 'custom-background', apply_filters( 'jkl_custom_background_args', array(
'default-color' => 'ffffff',
'default-image' => '',
'wp-head-callback' => 'jkl_custom_background_cb'
) ) );
/**
* Custom Background Callback to style an ADDITIONAL element(s) with
* the chosen custom background color in body.custom-background
*
* @link http://wordpress.stackexchange.com/questions/189361/add-custom-background-to-div-in-home-page
*/
function jkl_custom_background_cb() {
ob_start();
_custom_background_cb(); // Default WordPress handler
$style = ob_get_clean();
$style = str_replace( 'body.custom-background', 'body.custom-background, .site-logo-housing, .site-logo', $style );
echo $style;
}
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.