WP Customizer API
index.php
<img src="<?php echo get_theme_mod('logo_img'); ?>" alt="Logo">
<?php if(true=== get_theme_mod('copyright_visibility')) : ?>
<h1>Copyright : <?php echo get_theme_mod('copyright_text'); ?></h1>
<?php endif; ?>
<h1 class="fruit">Fruit : <?php echo get_theme_mod('select_fruit'); ?></h1>
<img src="<?php echo get_theme_mod('logo_img'); ?>" alt="Logo">
<?php if(true=== get_theme_mod('copyright_visibility')) : ?>
<h1>Copyright : <?php echo get_theme_mod('copyright_text'); ?></h1>
<?php endif; ?>
<h1 class="fruit">Fruit : <?php echo get_theme_mod('select_fruit'); ?></h1>
functions.php
/* Customizer API*/
function customize_api($custom_val){
//Section Name : general_section {A New Section Start}
$custom_val->add_section('general_section',array(
'title' => 'General Options',
'priority' => 20
));
//For Logo Upload (general_section)
$custom_val->add_setting('logo_img',array(
'default' => '',
'transport' => 'refresh'
));
$custom_val->add_control(
new WP_Customize_Image_Control($custom_val,'logo_img',array(
'section' => 'general_section',
'label' => 'Logo Uploader',
'settings' => 'logo_img'
))
);
//For Copyright Text (general_section)
$custom_val->add_setting('copyright_text',array(
'default' => 'Copyright Text',
'transport' => 'postMessage'
));
$custom_val->add_control('copyright_text',array(
'section' => 'general_section',
'label' => 'Copyright Text',
'type' => 'text'
));
//Section Name : all_colors {A New Section Start}
$custom_val->add_section('all_colors',array(
'title' => 'Colors Section',
'priority' => 40
));
//For Select Color (all_colors Section)
$custom_val->add_setting('copyright_color',array(
'default' => '#000000',
'transport' => 'postMessage'
));
$custom_val->add_control(
new WP_Customize_Color_Control($custom_val,'copyright_color',array(
'section' => 'all_colors',
'label' => 'Copyright Text Color',
'settings' => 'copyright_color'
))
);
//Section Name : visibility_option {A New Section Start}
$custom_val->add_section('visibility_option',array(
'title' => 'Visibility',
'priority' => 41
));
//Check Box for h1 visibility (visibility_option Section)
$custom_val->add_setting('copyright_visibility',array(
'default' => true,
'transport' => 'postMessage'
));
$custom_val->add_control('copyright_visibility',array(
'section' => 'visibility_option',
'label' => 'Show copyright text',
'type' => 'checkbox'
));
//Select Option (visibility_option Section)
$custom_val->add_setting('select_fruit',array(
'default' => 'Mango',
'transport' => 'postMessage'
));
$custom_val->add_control('select_fruit',array(
'section' => 'visibility_option',
'label' => 'Select Fruit',
'type' => 'select',
'choices' => array(
'Mango' => 'aam',
'Lichi' => 'Lecho',
'Jackfruit' => 'Kathal'
)
));
}
add_action('customize_register','customize_api');
/*JS file enqueue (customizer-scripts.js)*/
function scripts_for_customizer(){
wp_enqueue_script('customizer-scripts',get_template_directory_uri().'/js/customizer-scripts.js',array('jquery','customize-preview'));
}
add_action('customize_preview_init','scripts_for_customizer');
/*Inline CSS in header area Code should be in functions.php*/
function inline_style(){?>
<style type="text/css">
h1{
color:<?php echo get_theme_mod('copyright_color'); ?>;
}
</style>
<?php
}
add_action('wp_head','inline_style');
/*customizer-scripts.js*/
(function($){
$(document).ready(function(){
//h1 Text edit
wp.customize('copyright_text',function(value){
value.bind(function(to){
$('h1').text(to);
});
});
//h1 Text Color Change
wp.customize('copyright_color',function(value){
value.bind(function(to){
$('h1').css('color',to);
});
});
//h1 Text Visibility by checkbox
wp.customize('copyright_visibility',function(value){
value.bind(function(to){
// false===to ? $('h1').hide() : $('h1').show();
if(to==false){
$('h1').hide();
}else{
$('h1').show();
}
});
});
//Select Option
wp.customize('select_fruit',function(value){
value.bind(function(go){
$('.fruit').text('Fruit : '+go);
});
});
})
})(jQuery)
Comments
Post a Comment