Skip to content

Instantly share code, notes, and snippets.

@muddasirawan
Forked from danielpataki/basic-function.php
Created April 9, 2018 13:16
Show Gist options
  • Save muddasirawan/b9ff52e48bbc8aa1737842fc06fb691c to your computer and use it in GitHub Desktop.
Save muddasirawan/b9ff52e48bbc8aa1737842fc06fb691c to your computer and use it in GitHub Desktop.
Adding Theme Options With The Customization API
add_action( 'customize_register' , 'my_theme_options' );
function my_theme_options( $wp_customize ) {
// Sections, settings and controls will be added here
}
class My_Customizer {
function register() {
// Sections, settings and controls will be added here
}
function header_output() {
// The live CSS is added here
}
function live_preview() {
// The live preview is enqueued here
}
}
add_action( 'customize_register' , array( 'My_Customizer' , 'register' ) );
add_action( 'wp_head' , array( 'My_Customizer' , 'header_output' ) );
add_action( 'customize_preview_init' , array( 'My_Customizer' , 'live_preview' ) );
add_action( 'customize_preview_init' , 'my_customizer_preview' );
function my_customizer_preview() {
wp_enqueue_script(
'my_theme_customizer',
get_template_directory_uri() . '/js/theme-customizer.js',
array( 'jquery', 'customize-preview' ),
'',
true
);
}
wp.customize( 'SETTING_NAME', function( value ) {
value.bind( function( newval ) {
// Change handled here
} );
} );
( function( $ ) {
wp.customize( 'footer_bg_color', function( value ) {
value.bind( function( newval ) {
$('#footer').css( 'background-color', newval );
} );
} );
} )( jQuery );
$wp_customize->add_setting( 'footer_bg_color',
array(
'default' => 'f1f1f1',
'transport' => 'postMessage'
)
);
add_action( 'wp_head' , 'my_dynamic_css' );
function my_dynamic_css() {
?>
<style type='text/css'>
#site-footer {
background-color:#<?php echo get_theme_mod('footer_bg_color') ?> ;
}
</style>
<?php
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment