Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Some basic Customizer examples
/*
Include this file in your theme and enqueue it like this in PHP:
function my_customize_preview_js() {
wp_enqueue_script( 'customizer-preview', get_template_directory_uri() . '/path/to/customizer.js', array( 'customize-preview' ), '20170422', true );
}
add_action( 'customize_preview_init', 'my_customize_preview_js' );
*/
( function( $ ) {
// Site title and description.
wp.customize( 'blogname', function( value ) {
value.bind( function( to ) {
$( '.site-title a' ).text( to );
} );
} );
wp.customize( 'blogdescription', function( value ) {
value.bind( function( to ) {
$( '.site-description' ).text( to );
} );
} );
// Update footer address live
wp.customize( 'footer_address', function( value ) {
value.bind( function( to ) {
$( '#js-footer-address' ).text( to );
})
} );
// Update header colour live
// Adjust the selector and styles according to your theme markup.
wp.customize( 'header_color', function( value ) {
value.bind( function( to ) {
$( '.site-header' ).css( 'background', to );
});
} );
} )( jQuery );
<?php
/*
Include this file in your theme functions.php
*/
function my_customizer_controls( $wp_customize ) {
// Add support for instant previewing of the built-in 'blogname' and 'blogdescription' options
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
//
// RELATED POSTS: allow changing the number of related posts
//
// Create a section for related posts
$wp_customize->add_section( 'related_posts_section', array(
'title' => __( 'Related posts' ), // required
'priority' => 160, // optional (default is 160)
// Display this only on single posts
'active_callback' => function() {
return is_single(); // is_single(), is_page() type checks need to be inside a callback function
}
) );
// Add the setting for the number of related posts
$wp_customize->add_setting( 'related_posts_number', array(
'transport' => 'postMessage', // required for selective refresh, default is 'refresh'
'sanizite_callback' => 'absint', // this can be the name of a function or an anonymous function
'default' => 3,
) );
// Add a control for the related posts setting
$wp_customize->add_control( 'related_posts_number', array(
'type' => 'number', // any HTML5 input type, select, textarea, dropdown-pages
'section' => 'related_posts_section', // Required, core or custom.
'label' => __( 'Number of posts to show' ),
) );
// Register a partial for selectively updating the related posts component
$wp_customize->selective_refresh->add_partial( 'related_posts_number', array(
'selector' => '.related-posts-container',
'container_inclusive' => false,
'render_callback' => function() {
my_display_related_posts(); // you can use this same function in your template
},
) );
//
// ADDRESS IN THE FOOTER
//
$wp_customize->add_section( 'footer_address_section', array(
'title' => 'Footer address',
) );
$wp_customize->add_setting( 'footer_address', array(
'transport' => 'postMessage', // required for live updating via JS
'sanizite_callback' => 'esc_html',
) );
//
// CHANGE HEADER COLOUR
//
$wp_customize->add_setting( 'header_color', array(
'default' => '#ffff00',
'transport' => 'postMessage',
) );
// This is a core custom control, you can also make your own by extending WP_Customize_Control
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize, // WP_Customize_Manager
'header_color', // Setting id
array( // Args, including any custom ones.
'label' => __( 'Header Color' ),
'section' => 'colors', // built-in
)
)
);
//
// Want to learn more? Head to https://developer.wordpress.org/themes/customize-api/
//
}
add_action( 'customize_register', 'my_customizer_controls' );
/**
* Hook into wp_head to dynamically set the background color of our heading.
* Adjust the selector and styles according to your theme markup.
*/
function my_custom_header_color() {
$header_color = get_theme_mod( 'header_color' );
?>
<style type="text/css">
.site-header {
background: <?php echo esc_html( $header_color ); ?>;
}
</style>
<?php
}
add_action( 'wp_head', 'my_custom_header_color' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment