Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Customizer Tutorial
$wp_customize->add_section( 'cd_colors' , array(
'title' => 'Colors',
'priority' => 30,
) );
<?php if( get_theme_mod( 'cd_button_display', 'show' ) == 'show' ) : ?>
<a href="" class='button'>Come On In</a>
<?php endif ?>
$wp_customize->add_section( 'cd_button' , array(
'title' => 'The Button',
'priority' => 20,
) );
$wp_customize->add_setting( 'cd_button_display' , array(
'default' => true,
'transport' => 'refresh',
) );
$wp_customize->add_control( 'cd_button_display', array(
'label' => 'Button Display',
'section' => 'cd_button',
'settings' => 'cd_button_display',
'type' => 'radio',
'choices' => array(
'show' => 'Show Button',
'hide' => 'Hide Button',
),
) );
$wp_customize->add_setting( 'cd_button_text' , array(
'default' => 'Come On In',
'transport' => 'postMessage',
) );
$wp_customize->add_control( 'cd_button_text', array(
'label' => 'Button Text',
'section' => 'cd_button',
'type' => 'text',
) );
wp.customize( 'cd_button_text', function( value ) {
value.bind( function( newval ) {
$( '#intro a' ).html( newval );
} );
} );
<a href="" class='button'><?php echo get_theme_mod( 'cd_button_text', 'Come On In' ) ?></a>
<div id='button-container'>
<?php cd_show_main_button() ?>
</div>
wp.customize( 'blogname', function( value ) {
value.bind( function( newval ) {
$( '#intro h1' ).html( newval );
} );
} );
wp.customize( 'blogdescription', function( value ) {
value.bind( function( newval ) {
$( '#intro h2' ).html( newval );
} );
} );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array(
'label' => 'Background Color',
'section' => 'cd_colors',
'settings' => 'background_color',
) ) );
$wp_customize->add_setting( 'background_color' , array(
'default' => '#43C6E4',
'transport' => 'refresh',
) );
add_action( 'wp_head', 'cd_customizer_css');
function cd_customizer_css()
{
?>
<style type="text/css">
body { background: #<?php echo get_theme_mod('background_color', '#43C6E4'); ?>; }
</style>
<?php
}
( function( $ ) {
} )( jQuery );
add_action( 'customize_register', 'cd_customizer_settings' );
function cd_customizer_settings( $wp_customize ) {
}
( function( $ ) {
wp.customize( 'background_color', function( value ) {
value.bind( function( newval ) {
$( 'body' ).css( 'background-color', newval );
} );
} );
} )( jQuery );
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
add_action( 'customize_preview_init', 'cd_customizer' );
function cd_customizer() {
wp_enqueue_script(
'cd_customizer',
get_template_directory_uri() . '/customizer.js',
array( 'jquery','customize-preview' ),
'',
true
);
}
include('customizer.php');
function cd_show_main_button() {
if( get_theme_mod( 'cd_button_display', 'show' ) == 'show' ) {
echo "<a href='' class='button'>" . get_theme_mod( 'cd_button_text', 'Come On In' ) . "</a>";
}
}
<div id='photocount'>
<span><?php echo get_theme_mod( 'cd_photocount', 0 ) ?></span> photos
</div>
$wp_customize->add_setting( 'cd_photocount' , array(
'default' => 0,
'transport' => 'postMessage',
) );
$wp_customize->add_control( new WP_Customize_Range( $wp_customize, 'cd_photocount', array(
'label' => 'Photo Count',
'min' => 10,
'max' => 9999,
'step' => 10,
'section' => 'title_tagline',
) ) );
wp.customize( 'cd_photocount', function( value ) {
value.bind( function( newval ) {
$( '#photocount span' ).html( newval );
} );
} );
if( class_exists( 'WP_Customize_Control' ) ) {
class WP_Customize_Range extends WP_Customize_Control {
public $type = 'range';
public function __construct( $manager, $id, $args = array() ) {
parent::__construct( $manager, $id, $args );
$defaults = array(
'min' => 0,
'max' => 10,
'step' => 1
);
$args = wp_parse_args( $args, $defaults );
$this->min = $args['min'];
$this->max = $args['max'];
$this->step = $args['step'];
}
public function render_content() {
?>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<input class='range-slider' min="<?php echo $this->min ?>" max="<?php echo $this->max ?>" step="<?php echo $this->step ?>" type='range' <?php $this->link(); ?> value="<?php echo esc_attr( $this->value() ); ?>" oninput="jQuery(this).next('input').val( jQuery(this).val() )">
<input onKeyUp="jQuery(this).prev('input').val( jQuery(this).val() )" type='text' value='<?php echo esc_attr( $this->value() ); ?>'>
</label>
<?php
}
}
}
$wp_customize->selective_refresh->add_partial( 'cd_button_display', array(
'selector' => '#button-container',
'render_callback' => 'cd_show_main_button',
) );
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.