The links to demos will not work, as they were local on my computer. But you can see the customizer on your own WP site (if it's 3.4+).
Introduced in 3.4, but not really announced.
Introduced in 3.4, but not really announced.
Allows 'live preview' of installed themes with customization options
Introduced in 3.4, but not really announced.
Allows 'live preview' of installed themes with customization options
Needs theme support (but less than you'd think!)
Can also use this to change settings on your current theme [twentyeleven child demo]
Can also use this to change settings on your current theme [twentyeleven child demo]
But only if your theme uses existing WP functionality [rrn demo]
register_nav_menu('primary', __( 'Primary Menu','twentyeleven' ));
More info about navigation menus
add_theme_support( 'custom-background', $args );
More info about custom backgrounds
function twentyeleven_customize_register( $wp_customize ) {
// your code here.
}
add_action(
'customize_register',
'twentyeleven_customize_register'
);
$wp_customize->add_section(
'twentyeleven_layout',
array(
'title' => __( 'Layout', 'twentyeleven' ),
'priority' => 50,
)
);
$wp_customize->add_setting(
'twentyeleven_theme_options[theme_layout]',
array(
'type' => 'option', //or 'theme_mod'
'default' => $defaults['theme_layout'],
'sanitize_callback' => 'sanitize_key',
)
);
$wp_customize->add_control(
'twentyeleven_theme_options[theme_layout]',
array(
'section' => 'twentyeleven_layout',
'type' => 'radio',
'choices' => $choices,
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'link_color',
array(
'label' => __( 'Link Color', 'twentyeleven' ),
'section' => 'colors',
'settings' => 'twentyeleven_theme_options[link_color]',
)
)
);
$wp_customize->add_setting(
'theme_options[blurb]',
array(
'default' => '',
'type' => 'option',
'transport' => 'postMessage'
)
);
// Add Transport support
if ( $wp_customize->is_preview() && ! is_admin() )
add_action( 'wp_footer', 'theme_customize_preview', 21);
function theme_customize_preview() { ?>
<script type="text/javascript">
wp.customize( 'theme_options[blurb]', function( value ) {
value.bind(function(to) {
jQuery('#introduction').html(to);
// or whatever you need to do with the new value.
jQuery('#introduction').css('color', to ? '#' + to : '' );
});
});
</script>
<?php }
Otto's "How to leverage the Theme Customizer in your own themes"
wp-includes/class-wp-customize-manager.php for $wp_customize class
wp-includes/class-wp-customize-section.php for section info
wp-includes/class-wp-customize-setting.php for setting info
wp-includes/class-wp-customize-control.php for base control class & others (color, upload, etc) - start here if you want to create a new control