rodica-andronache · August 29, 2015 13:57
diff --git a/Customizer b/Customizer
 !!!!!!!!!!!!!!!!!!!!!!

 Valori default:

 - trebuie sa pun si default la setting-ul respectiv

 - cat si sa pun valoare default atunci cand iau valoarea cu get_theme_mod

 $wp_customize->add_setting( 'ti_frontpage_boxthree_content',
        	array(
        		'sanitize_callback' => 'plumbelt_lite_sanitize_text',
        		'default'=>'Go to Appearance - Customize, to add content.') );

 		$wp_customize->add_control( new Example_Customize_Textarea_Control( $wp_customize, 'ti_frontpage_boxthree_content', array(

 		            'label' 	=> __( 'Box Three - Content:', 'plumbelt-lite' ),

 		            'section' 	=> 'frontpage_customizer',

 		            'settings' 	=> 'ti_frontpage_boxthree_content',

 		            'priority' 	=> '6'

 		        )

 		    )

 		);



 get_theme_mod( 'ti_frontpage_boxthree_content','Go to Appearance - Customize, to add content.' )


 ********************************************************************
 !!!!! Daca vreau sa includ un script sau un style in customizer:
 function zerif_registers() {
    	wp_register_script( 'zerif_jquery_ui', '//code.jquery.com/ui/1.10.4/jquery-ui.js', array("jquery"), '20120206', true  );
 	wp_enqueue_script( 'zerif_jquery_ui' );
 	
 	wp_register_style( 'zerif_jquery_ui_css', '//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css');
 	wp_enqueue_style( 'zerif_jquery_ui_css' );

 }
 add_action( 'customize_controls_enqueue_scripts', 'zerif_registers' );


 !!!!!!!!!!!Daca vreau ca o sectiune cu un mesaj sau buton in ea:
 $wp_customize->add_section( 'itek_theme_notes' , array(
 		'title'      => __('ThemeIsle theme notes','itek'),
 		'description' => sprintf( __( 'Welcome & thank you for choosing iTek as your site theme. In this section you\'ll find some helpful hints and tips to help you configure your site quickly and easily.
 		<br/><br/> <b>Social Icons</b> are configurable via a custom menu. To set up your social profile visit the Appearance >><a href="%1$s"> Menu section</a>, enter your profile urls and add them to the "Social" Menu Location.
 		<br/><br/><a href="%2$s" target="_blank" />View Theme Demo</a> | <a href="%3$s" target="_blank" />Get Theme Support</a> ', 'itek' ), admin_url( '/nav-menus.php' ), esc_url('http://www.wpstrapcode.com/itek/'), esc_url('http://wordpress.org/support/theme/itek') ),
 		'priority'   => 30,
   ) );
 $wp_customize->add_setting(
        'itek_theme_notice'
 );
 	
 $wp_customize->add_control(
    'itek_theme_notice',
    array(
        'section' => 'itek_theme_notes',
 	'type'  => 'read-only',
 ));


 !!!! valoarea default se pune la add_setting

 Includ in functions.php:

 /**
 * Bind JS handlers to make Theme Customizer preview reload changes asynchronously.
 */
 function cwp_customize_preview_js() {
 	wp_enqueue_script( 'customizerJS', get_template_directory_uri() . '/js/customizer.js', array( 'jquery' ), '20131205', true );
 }
 add_action( 'customize_preview_init', 'cwp_customize_preview_js' );

 SI in customizer.js:

 /**
 * Contains handlers to make Theme Customizer preview reload changes asynchronously.
 */
 ( 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 );
 		} );
 	} );
 	// Header text color.
 	wp.customize( 'header_textcolor', function( value ) {
 		value.bind( function( to ) {
 			if ( 'blank' === to ) {
 				$( '.site-title, .site-description' ).css( {
 					'clip': 'rect(1px, 1px, 1px, 1px)',
 					'position': 'absolute'
 				} );
 			} else {
 				$( '.site-title,  .site-description' ).css( {
 					'clip': 'auto',
 					'position': 'static'
 				} );

 				$( '.site-title a' ).css( {
 					'color': to
 				} );
 			}
 		} );
 	} );
 } )( jQuery );


 SI:

 add_action( 'customize_register', 'cwp_customize_register' );

 Si in functia cwp_customize_register:

 Astea sunt default:
 	$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
 	$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
 	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
 	  
 Si pot adauga:
  
    -trebuie add_section, add_setting, add_control
  
  
 Imagine:
 	$wp_customize->add_section( 'cwp_logo_section' , array(
 		'title'       => __( 'Footer logo', 'cwp' ),
    	  	'priority'    => 100,
    	  	'description' => __('Upload an image for the footer logo','cwp'),
 	));
 	    
 	$wp_customize->add_setting( 'footer_logo', array(
 	      	'default' => get_template_directory_uri()."/images/footer-logo.png" 
 	));
 	    
 	$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'themeslug_logo', array(
 	      	'label'    => __( 'Footer logo', 'cwp' ),
 	      	'section'  => 'cwp_logo_section',
 	      	'settings' => 'footer_logo',
 	)));
 	    
 Text field:
 	$wp_customize->add_section( 'codeinwp_footer_info_section' , array(
    		'title'       => __( 'Footer contact info', 'codeinwp' ),
    		'priority'    => 130,
 	));

 	$wp_customize->add_setting( 'codeinwp_footer_info_email' );
 	$wp_customize->add_control( 'codeinwp_footer_info_email', array(
 		'label'    => __( 'Email', 'codeinwp' ),
 	      	'section'  => 'codeinwp_footer_info_section',
 	      	'settings' => 'codeinwp_footer_info_email',
 		'priority'    => 5,
 	));
 	
 Number:
 	class Zerif_Customizer_Number_Control extends WP_Customize_Control {

 		public $type = 'number';
 		
 		public function render_content() {
 		?>
 			<label>
 				<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
 				<input type="number" <?php $this->link(); ?> value="<?php echo intval( $this->value() ); ?>" />
 			</label>
 		<?php
 		}
 		
 	}
 	
 	$wp_customize->add_setting( 'zerif_aboutus_feature1_nr', array('sanitize_callback' => 'zerif_sanitize_number'));
 	$wp_customize->add_control(
 		new Zerif_Customizer_Number_Control(
 			$wp_customize,
 			'zerif_aboutus_feature1_nr',
 			array(
 				'type' => 'number',
 				'label' => __( 'Feature no1 percentage', 'zerif' ),
 				'section' => 'zerif_aboutus_section',
 				'settings' => 'zerif_aboutus_feature1_nr',
 				'priority'    => 4
 			)
 		)
 	); 
 	function zerif_sanitize_number( $input ) {
 	    return force_balance_tags( $input );
 	}
 	
 !!!!!!!!!!!!!!!!
 !!!!!!!!!!!!!!!!
 Pt titlul si descrierea din header, ca sa se modifice instantaneu in customizer, trebuie sa am fix clasele astea:

 echo '<h1 class="site-title"><a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home">'.get_bloginfo( 'name' ).'</a></h1>';
 echo '<h2 class="site-description"><a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home">'.get_bloginfo( 'description' ).'</a></h2>';

 -----------------------------------------------------------------
 !!!! Buton in customizer:

 In functions.php:
 add_action( 'customize_controls_print_scripts', 'add_customizer_button' );
 function add_customizer_button()
 {
    wp_register_script( 'cwp_customizer_script', get_template_directory_uri().'/js/customizer_button.js', array('jquery'), 'v1.0', true);
    wp_enqueue_script( 'cwp_customizer_script' );
 }

 In customizer_button.js:

 jQuery( document ).ready(function() {
    jQuery('.wp-full-overlay-sidebar-content').prepend('<a href="http://themeisle.com/themes/caresland-pro/" class="button" target="_blank">View PRO version</a>');
 });



 -----------------------------

 Afisare:

 $tmp = get_theme_mod(nume_setting); echo $tmp;

 -----------------------------

 SANITIZARE:

 Pentru linkuri:
 	$wp_customize->add_section( 'zerif_socials_section' , array(
 			'title'       => __( 'Social links', 'zerif' ),
    	  	'priority'    => 31
 	));
 	    
 	$wp_customize->add_setting( 'zerif_socials_facebook', array('sanitize_callback' => 'esc_url_raw'));
 	    
 	$wp_customize->add_control( 'zerif_socials_facebook', array(
 			'label'    => __( 'Facebook', 'zerif' ),
 	      	'section'  => 'zerif_socials_section',
 	      	'settings' => 'zerif_socials_facebook',
 			'priority'    => 1,
 	));
 Pentru adrese de email:
 	$wp_customize->add_section( 'zerif_contact_section' , array(
 			'title'       => __( 'Contact details', 'zerif' ),
    	  	'priority'    => 32
 	));
 	    
 	$wp_customize->add_setting( 'zerif_email', array('sanitize_callback' => 'is_email'));
 	    
 	$wp_customize->add_control( 'zerif_email', array(
 			'label'    => __( 'Email', 'zerif' ),
 	      	'section'  => 'zerif_contact_section',
 	      	'settings' => 'zerif_email',
 			'priority'    => 1,
 	));
      
 -------------------------------------------------------------------

 CUSTOM CONTROLS

 https://github.com/paulund/Wordpress-Theme-Customizer-Custom-Controls

 Ex: select cu categorii

 in functions.php:
 require get_template_directory() . '/inc/category-dropdown-custom-control.php';

 $wp_customize->add_section( 'zerif_portofolio_section' , array(
 	'title'       => __( 'Portofolio section', 'zerif' ),
    	'priority'    => 34
 ));
 	   
 $wp_customize->add_setting( 'zerif_portofolio', array(
        'default'        => '',
 ));
 $wp_customize->add_control( new Category_Dropdown_Custom_Control( $wp_customize, 'zerif_portofolio', array(
        'label'   => 'Choose posts category',
        'section' => 'zerif_portofolio_section',
        'settings'   => 'zerif_portofolio',
        'priority' => 1
 ) ) );

 ------------------------------------------

 Pentru widgeturi, sa se vada in customizer:

 http://wordpress.org/plugins/widget-customizer/






 ----------------------------------------------
 WORDPRESS 4.0
 ----------------------------------------------

 function prefix_customizer_register( $wp_customize ) {
 
 	$wp_customize->add_panel( 'panel_id', array(
 	    'priority' => 10,
 	    'capability' => 'edit_theme_options',
 	    'theme_supports' => '',
 	    'title' => __( 'Example Panel', 'textdomain' ),
 	    'description' => __( 'Description of what this panel does.', 'textdomain' ),
 	) );
 
 	$wp_customize->add_section( 'section_id', array(
 	    'priority' => 10,
 	    'capability' => 'edit_theme_options',
 	    'theme_supports' => '',
 	    'title' => __( 'Example Section', 'textdomain' ),
 	    'description' => '',
 	    'panel' => 'panel_id',
 	) );
 
 	$wp_customize->add_setting( 'url_field_id', array(
 		'default' => '',
 		'type' => 'theme_mod',
 		'capability' => 'edit_theme_options',
 		'transport' => '',
 		'sanitize_callback' => 'esc_url',
 	) );
 
 	$wp_customize->add_control( 'url_field_id', array(
 	    'type' => 'url',
 	    'priority' => 10,
 	    'section' => 'section_id',
 	    'label' => __( 'URL Field', 'textdomain' ),
 	    'description' => '',
 	) );
 
 	$wp_customize->add_setting( 'email_field_id', array(
 		'default' => '',
 		'type' => 'theme_mod',
 		'capability' => 'edit_theme_options',
 		'transport' => '',
 		'sanitize_callback' => 'sanitize_email',
 	) );
 
 	$wp_customize->add_control( 'email_field_id', array(
 	    'type' => 'email',
 	    'priority' => 10,
 	    'section' => 'section_id',
 	    'label' => __( 'Email Field', 'textdomain' ),
 	    'description' => '',
 	) );
 
 	$wp_customize->add_setting( 'password_field_id', array(
 		'default' => '',
 		'type' => 'theme_mod',
 		'capability' => 'edit_theme_options',
 		'transport' => '',
 		'sanitize_callback' => 'sanitize_text_field',
 	) );
 
 	$wp_customize->add_control( 'password_field_id', array(
 	    'type' => 'password',
 	    'priority' => 10,
 	    'section' => 'section_id',
 	    'label' => __( 'Password Field', 'textdomain' ),
 	    'description' => '',
 	) );
 
 	$wp_customize->add_setting( 'textarea_field_id', array(
 		'default' => '',
 		'type' => 'theme_mod',
 		'capability' => 'edit_theme_options',
 		'transport' => '',
 		'sanitize_callback' => 'esc_textarea',
 	) );
 
 	$wp_customize->add_control( 'textarea_field_id', array(
 	    'type' => 'textarea',
 	    'priority' => 10,
 	    'section' => 'section_id',
 	    'label' => __( 'Textarea Field', 'textdomain' ),
 	    'description' => '',
 	) );
 
 	$wp_customize->add_setting( 'date_field_id', array(
 		'default' => '',
 		'type' => 'theme_mod',
 		'capability' => 'edit_theme_options',
 		'transport' => '',
 		'sanitize_callback' => ''
 	) );
 
 	$wp_customize->add_control( 'date_field_id', array(
 	    'type' => 'date',
 	    'priority' => 10,
 	    'section' => 'section_id',
 	    'label' => __( 'Date Field', 'textdomain' ),
 	    'description' => '',
 	) );
 
 	$wp_customize->add_setting( 'range_field_id', array(
 		'default' => '',
 		'type' => 'theme_mod',
 		'capability' => 'edit_theme_options',
 		'transport' => '',
 		'sanitize_callback' => 'intval',
 	) );
 
 	$wp_customize->add_control( 'range_field_id', array(
 	    'type' => 'range',
 	    'priority' => 10,
 	    'section' => 'section_id',
 	    'label' => __( 'Range Field', 'textdomain' ),
 	    'description' => '',
 	    'input_attrs' => array(
 	        'min' => 0,
 	        'max' => 100,
 	        'step' => 1,
 	        'class' => 'example-class',
 	        'style' => 'color: #0a0',
 	    ),
 	) );
 
 }
 add_action( 'customize_register', 'prefix_customizer_register' );

 http://wptheming.com/2014/09/customizer-panels-field-types/
 http://make.wordpress.org/core/2014/07/08/customizer-improvements-in-4-0/

 ------------------------------------------------------------------------
 Culori cu opacitate:

 http://pluto.kiwi.nz/2014/07/how-to-add-a-color-control-with-alphaopacity-to-the-wordpress-theme-customizer/

 <?php
 
 // See full blog post here
 // http://pluto.kiwi.nz/2014/07/how-to-add-a-color-control-with-alphaopacity-to-the-wordpress-theme-customizer/
 
 function pluto_add_customizer_custom_controls( $wp_customize ) {
 
    class Pluto_Customize_Alpha_Color_Control extends WP_Customize_Control {
    
        public $type = 'alphacolor';
        //public $palette = '#3FADD7,#555555,#666666, #F5f5f5,#333333,#404040,#2B4267';
        public $palette = true;
        public $default = '#3FADD7';
    
        protected function render() {
            $id = 'customize-control-' . str_replace( '[', '-', str_replace( ']', '', $this->id ) );
            $class = 'customize-control customize-control-' . $this->type; ?>
            <li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>">
                <?php $this->render_content(); ?>
            </li>
        <?php }
    
        public function render_content() { ?>
            <label>
                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
                <input type="text" data-palette="<?php echo $this->palette; ?>" data-default-color="<?php echo $this->default; ?>" value="<?php echo intval( $this->value() ); ?>" class="pluto-color-control" <?php $this->link(); ?>  />
            </label>
        <?php }
    }
 
 }
 add_action( 'customize_register', 'pluto_add_customizer_custom_controls' );


 -----------------------------------------------------------------------

 <?php
 
 function pluto_register_customizer_options( $wp_customize ) {
 
 /*-----------------------------------------------------------*
 * Defining our own section called "It's Alpha time"
 *-----------------------------------------------------------*/
 $wp_customize->add_section(
    'alpha_color_category',
    array(
        'title'     => 'It\'s Alpha time',
        'priority'  => 202
    )
 );
 
 /*-----------------------------------------------------------*
 * Hook our control into the section above
 *-----------------------------------------------------------*/
 $wp_customize->add_setting(
    'pluto_color_control_one'
 );
 
 $wp_customize->add_control(
    new Pluto_Customize_Alpha_Color_Control(
        $wp_customize,
        'pluto_color_control_one',
        array(
            'label'    => 'Alpha Color',
            'palette' => true,
            'section'  => 'alpha_color_category'
        )
    )
 );
 
 }
 
 add_action( 'customize_register', 'pluto_register_customizer_options' );

 ------------------------------------------------------------------------

 jQuery(document).ready(function($) {
 
 Color.prototype.toString = function(remove_alpha) {
 	if (remove_alpha == 'no-alpha') {
 		return this.toCSS('rgba', '1').replace(/\s+/g, '');
 	}
 	if (this._alpha < 1) {
 		return this.toCSS('rgba', this._alpha).replace(/\s+/g, '');
 	}
 	var hex = parseInt(this._color, 10).toString(16);
 	if (this.error) return '';
 	if (hex.length < 6) {
 		for (var i = 6 - hex.length - 1; i >= 0; i--) {
 			hex = '0' + hex;
 		}
 	}
 	return '#' + hex;
 };
 
  $('.pluto-color-control').each(function() {
 	var $control = $(this),
 		value = $control.val().replace(/\s+/g, '');
 	// Manage Palettes
 	var palette_input = $control.attr('data-palette');
 	if (palette_input == 'false' || palette_input == false) {
 		var palette = false;
 	} else if (palette_input == 'true' || palette_input == true) {
 		var palette = true;
 	} else {
 		var palette = $control.attr('data-palette').split(",");
 	}
 	$control.wpColorPicker({ // change some things with the color picker
 		 clear: function(event, ui) {
 		// TODO reset Alpha Slider to 100
 		 },
 		change: function(event, ui) {
 			// send ajax request to wp.customizer to enable Save & Publish button
 			var _new_value = $control.val();
 			var key = $control.attr('data-customize-setting-link');
 			wp.customize(key, function(obj) {
 				obj.set(_new_value);
 			});
 			// change the background color of our transparency container whenever a color is updated
 			var $transparency = $control.parents('.wp-picker-container:first').find('.transparency');
 			// we only want to show the color at 100% alpha
 			$transparency.css('backgroundColor', ui.color.toString('no-alpha'));
 		},
 		palettes: palette // remove the color palettes
 	});
 	$('<div class="pluto-alpha-container"><div class="slider-alpha"></div><div class="transparency"></div></div>').appendTo($control.parents('.wp-picker-container'));
 	var $alpha_slider = $control.parents('.wp-picker-container:first').find('.slider-alpha');
 	// if in format RGBA - grab A channel value
 	if (value.match(/rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/)) {
 		var alpha_val = parseFloat(value.match(/rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/)[1]) * 100;
 		var alpha_val = parseInt(alpha_val);
 	} else {
 		var alpha_val = 100;
 	}
 	$alpha_slider.slider({
 		slide: function(event, ui) {
 			$(this).find('.ui-slider-handle').text(ui.value); // show value on slider handle
 			// send ajax request to wp.customizer to enable Save & Publish button
 			var _new_value = $control.val();
 			var key = $control.attr('data-customize-setting-link');
 			wp.customize(key, function(obj) {
 				obj.set(_new_value);
 			});
 		},
 		create: function(event, ui) {
 			var v = $(this).slider('value');
 			$(this).find('.ui-slider-handle').text(v);
 		},
 		value: alpha_val,
 		range: "max",
 		step: 1,
 		min: 1,
 		max: 100
 	}); // slider
 	$alpha_slider.slider().on('slidechange', function(event, ui) {
 		var new_alpha_val = parseFloat(ui.value),
 			iris = $control.data('a8cIris'),
 			color_picker = $control.data('wpWpColorPicker');
 		iris._color._alpha = new_alpha_val / 100.0;
 		$control.val(iris._color.toString());
 		color_picker.toggler.css({
 			backgroundColor: $control.val()
 		});
 		// fix relationship between alpha slider and the 'side slider not updating.
 		var get_val = $control.val();
 		$($control).wpColorPicker('color', get_val);
 	});
 }); // each
 
 });

 -------------------------------------------------------------------------------

 <?php
 
 function pluto_enqueue_customizer_admin_scripts() {
 
  wp_register_script( 'customizer-admin-js', get_template_directory_uri() . '/js/admin/customizer-admin.js', array( 'jquery' ), NULL, true );
  wp_enqueue_script( 'customizer-admin-js' );
 
  }
 
 add_action( 'admin_enqueue_scripts', 'pluto_enqueue_customizer_admin_scripts' );

 ---------------------------------------------------------------------------------

 .pluto-alpha-container .transparency {
    height:24px;
    width:100%;
    background-color:#FFF;
    background-image:url(../../images/transparency-grid.png);
    box-shadow:0 0 5px rgba(0,0,0,0.4) inset;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding:0;
 }
 
 .pluto-alpha-container .ui-slider-handle {
    color:#777;
    background-color:#FFF;
    text-shadow:0 1px 0 #FFF;
    text-decoration:none;
    position:absolute;
    z-index:2;
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
    border:1px solid #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    opacity:0.9;
    margin-top:-2px;
    height:20px;
    cursor:ew-resize;
    font-size:12px;
    padding:3px;
 }
 
 .pluto-alpha-container .ui-slider {
    position:relative;
    text-align:center;
    width:88%;
 }
 
 .wp-picker-container a.wp-picker-open ~ div.pluto-alpha-container {
    display:block;
 }
 
 .pluto-alpha-container {
    box-sizing:padding-box;
    display:none;
    border:1px solid #dfdfdf;
    border-top:none;
    background:#FFF;
    padding:0 11px 6px;
 }
 
 .customize-control-alphacolor .wp-picker-container .iris-picker {
    border-bottom:none;
 }

 ---------------------------
 https://github.com/paulund/Wordpress-Theme-Customizer-Custom-Controls
	!!!!!!!!!!!!!!!!!!!!!!

	Valori default:

	- trebuie sa pun si default la setting-ul respectiv

	- cat si sa pun valoare default atunci cand iau valoarea cu get_theme_mod

	$wp_customize->add_setting( 'ti_frontpage_boxthree_content',
	array(
	'sanitize_callback' => 'plumbelt_lite_sanitize_text',
	'default'=>'Go to Appearance - Customize, to add content.') );

	$wp_customize->add_control( new Example_Customize_Textarea_Control( $wp_customize, 'ti_frontpage_boxthree_content', array(

	'label' => __( 'Box Three - Content:', 'plumbelt-lite' ),

	'section' => 'frontpage_customizer',

	'settings' => 'ti_frontpage_boxthree_content',

	'priority' => '6'

	)

	)

	);



	get_theme_mod( 'ti_frontpage_boxthree_content','Go to Appearance - Customize, to add content.' )


	********************************************************************
	!!!!! Daca vreau sa includ un script sau un style in customizer:
	function zerif_registers() {
	wp_register_script( 'zerif_jquery_ui', '//code.jquery.com/ui/1.10.4/jquery-ui.js', array("jquery"), '20120206', true );
	wp_enqueue_script( 'zerif_jquery_ui' );

	wp_register_style( 'zerif_jquery_ui_css', '//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css');
	wp_enqueue_style( 'zerif_jquery_ui_css' );

	}
	add_action( 'customize_controls_enqueue_scripts', 'zerif_registers' );


	!!!!!!!!!!!Daca vreau ca o sectiune cu un mesaj sau buton in ea:
	$wp_customize->add_section( 'itek_theme_notes' , array(
	'title' => __('ThemeIsle theme notes','itek'),
	'description' => sprintf( __( 'Welcome & thank you for choosing iTek as your site theme. In this section you\'ll find some helpful hints and tips to help you configure your site quickly and easily.
	<br/><br/> <b>Social Icons</b> are configurable via a custom menu. To set up your social profile visit the Appearance >><a href="%1$s"> Menu section</a>, enter your profile urls and add them to the "Social" Menu Location.
	<br/><br/><a href="%2$s" target="_blank" />View Theme Demo</a> \| <a href="%3$s" target="_blank" />Get Theme Support</a> ', 'itek' ), admin_url( '/nav-menus.php' ), esc_url('http://www.wpstrapcode.com/itek/'), esc_url('http://wordpress.org/support/theme/itek') ),
	'priority' => 30,
	) );
	$wp_customize->add_setting(
	'itek_theme_notice'
	);

	$wp_customize->add_control(
	'itek_theme_notice',
	array(
	'section' => 'itek_theme_notes',
	'type' => 'read-only',
	));


	!!!! valoarea default se pune la add_setting

	Includ in functions.php:

	/**
	* Bind JS handlers to make Theme Customizer preview reload changes asynchronously.
	*/
	function cwp_customize_preview_js() {
	wp_enqueue_script( 'customizerJS', get_template_directory_uri() . '/js/customizer.js', array( 'jquery' ), '20131205', true );
	}
	add_action( 'customize_preview_init', 'cwp_customize_preview_js' );

	SI in customizer.js:

	/**
	* Contains handlers to make Theme Customizer preview reload changes asynchronously.
	*/
	( 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 );
	} );
	} );
	// Header text color.
	wp.customize( 'header_textcolor', function( value ) {
	value.bind( function( to ) {
	if ( 'blank' === to ) {
	$( '.site-title, .site-description' ).css( {
	'clip': 'rect(1px, 1px, 1px, 1px)',
	'position': 'absolute'
	} );
	} else {
	$( '.site-title, .site-description' ).css( {
	'clip': 'auto',
	'position': 'static'
	} );

	$( '.site-title a' ).css( {
	'color': to
	} );
	}
	} );
	} );
	} )( jQuery );


	SI:

	add_action( 'customize_register', 'cwp_customize_register' );

	Si in functia cwp_customize_register:

	Astea sunt default:
	$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
	$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';

	Si pot adauga:

	-trebuie add_section, add_setting, add_control


	Imagine:
	$wp_customize->add_section( 'cwp_logo_section' , array(
	'title' => __( 'Footer logo', 'cwp' ),
	'priority' => 100,
	'description' => __('Upload an image for the footer logo','cwp'),
	));

	$wp_customize->add_setting( 'footer_logo', array(
	'default' => get_template_directory_uri()."/images/footer-logo.png"
	));

	$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'themeslug_logo', array(
	'label' => __( 'Footer logo', 'cwp' ),
	'section' => 'cwp_logo_section',
	'settings' => 'footer_logo',
	)));

	Text field:
	$wp_customize->add_section( 'codeinwp_footer_info_section' , array(
	'title' => __( 'Footer contact info', 'codeinwp' ),
	'priority' => 130,
	));

	$wp_customize->add_setting( 'codeinwp_footer_info_email' );
	$wp_customize->add_control( 'codeinwp_footer_info_email', array(
	'label' => __( 'Email', 'codeinwp' ),
	'section' => 'codeinwp_footer_info_section',
	'settings' => 'codeinwp_footer_info_email',
	'priority' => 5,
	));

	Number:
	class Zerif_Customizer_Number_Control extends WP_Customize_Control {

	public $type = 'number';

	public function render_content() {
	?>
	<label>
	<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
	<input type="number" <?php $this->link(); ?> value="<?php echo intval( $this->value() ); ?>" />
	</label>
	<?php
	}

	}

	$wp_customize->add_setting( 'zerif_aboutus_feature1_nr', array('sanitize_callback' => 'zerif_sanitize_number'));
	$wp_customize->add_control(
	new Zerif_Customizer_Number_Control(
	$wp_customize,
	'zerif_aboutus_feature1_nr',
	array(
	'type' => 'number',
	'label' => __( 'Feature no1 percentage', 'zerif' ),
	'section' => 'zerif_aboutus_section',
	'settings' => 'zerif_aboutus_feature1_nr',
	'priority' => 4
	)
	)
	);
	function zerif_sanitize_number( $input ) {
	return force_balance_tags( $input );
	}

	!!!!!!!!!!!!!!!!
	!!!!!!!!!!!!!!!!
	Pt titlul si descrierea din header, ca sa se modifice instantaneu in customizer, trebuie sa am fix clasele astea:

	echo '<h1 class="site-title"><a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home">'.get_bloginfo( 'name' ).'</a></h1>';
	echo '<h2 class="site-description"><a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home">'.get_bloginfo( 'description' ).'</a></h2>';

	-----------------------------------------------------------------
	!!!! Buton in customizer:

	In functions.php:
	add_action( 'customize_controls_print_scripts', 'add_customizer_button' );
	function add_customizer_button()
	{
	wp_register_script( 'cwp_customizer_script', get_template_directory_uri().'/js/customizer_button.js', array('jquery'), 'v1.0', true);
	wp_enqueue_script( 'cwp_customizer_script' );
	}

	In customizer_button.js:

	jQuery( document ).ready(function() {
	jQuery('.wp-full-overlay-sidebar-content').prepend('<a href="http://themeisle.com/themes/caresland-pro/" class="button" target="_blank">View PRO version</a>');
	});



	-----------------------------

	Afisare:

	$tmp = get_theme_mod(nume_setting); echo $tmp;

	-----------------------------

	SANITIZARE:

	Pentru linkuri:
	$wp_customize->add_section( 'zerif_socials_section' , array(
	'title' => __( 'Social links', 'zerif' ),
	'priority' => 31
	));

	$wp_customize->add_setting( 'zerif_socials_facebook', array('sanitize_callback' => 'esc_url_raw'));

	$wp_customize->add_control( 'zerif_socials_facebook', array(
	'label' => __( 'Facebook', 'zerif' ),
	'section' => 'zerif_socials_section',
	'settings' => 'zerif_socials_facebook',
	'priority' => 1,
	));
	Pentru adrese de email:
	$wp_customize->add_section( 'zerif_contact_section' , array(
	'title' => __( 'Contact details', 'zerif' ),
	'priority' => 32
	));

	$wp_customize->add_setting( 'zerif_email', array('sanitize_callback' => 'is_email'));

	$wp_customize->add_control( 'zerif_email', array(
	'label' => __( 'Email', 'zerif' ),
	'section' => 'zerif_contact_section',
	'settings' => 'zerif_email',
	'priority' => 1,
	));

	-------------------------------------------------------------------

	CUSTOM CONTROLS

	https://github.com/paulund/Wordpress-Theme-Customizer-Custom-Controls

	Ex: select cu categorii

	in functions.php:
	require get_template_directory() . '/inc/category-dropdown-custom-control.php';

	$wp_customize->add_section( 'zerif_portofolio_section' , array(
	'title' => __( 'Portofolio section', 'zerif' ),
	'priority' => 34
	));

	$wp_customize->add_setting( 'zerif_portofolio', array(
	'default' => '',
	));
	$wp_customize->add_control( new Category_Dropdown_Custom_Control( $wp_customize, 'zerif_portofolio', array(
	'label' => 'Choose posts category',
	'section' => 'zerif_portofolio_section',
	'settings' => 'zerif_portofolio',
	'priority' => 1
	) ) );

	------------------------------------------

	Pentru widgeturi, sa se vada in customizer:

	http://wordpress.org/plugins/widget-customizer/






	----------------------------------------------
	WORDPRESS 4.0
	----------------------------------------------

	function prefix_customizer_register( $wp_customize ) {

	$wp_customize->add_panel( 'panel_id', array(
	'priority' => 10,
	'capability' => 'edit_theme_options',
	'theme_supports' => '',
	'title' => __( 'Example Panel', 'textdomain' ),
	'description' => __( 'Description of what this panel does.', 'textdomain' ),
	) );

	$wp_customize->add_section( 'section_id', array(
	'priority' => 10,
	'capability' => 'edit_theme_options',
	'theme_supports' => '',
	'title' => __( 'Example Section', 'textdomain' ),
	'description' => '',
	'panel' => 'panel_id',
	) );

	$wp_customize->add_setting( 'url_field_id', array(
	'default' => '',
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'transport' => '',
	'sanitize_callback' => 'esc_url',
	) );

	$wp_customize->add_control( 'url_field_id', array(
	'type' => 'url',
	'priority' => 10,
	'section' => 'section_id',
	'label' => __( 'URL Field', 'textdomain' ),
	'description' => '',
	) );

	$wp_customize->add_setting( 'email_field_id', array(
	'default' => '',
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'transport' => '',
	'sanitize_callback' => 'sanitize_email',
	) );

	$wp_customize->add_control( 'email_field_id', array(
	'type' => 'email',
	'priority' => 10,
	'section' => 'section_id',
	'label' => __( 'Email Field', 'textdomain' ),
	'description' => '',
	) );

	$wp_customize->add_setting( 'password_field_id', array(
	'default' => '',
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'transport' => '',
	'sanitize_callback' => 'sanitize_text_field',
	) );

	$wp_customize->add_control( 'password_field_id', array(
	'type' => 'password',
	'priority' => 10,
	'section' => 'section_id',
	'label' => __( 'Password Field', 'textdomain' ),
	'description' => '',
	) );

	$wp_customize->add_setting( 'textarea_field_id', array(
	'default' => '',
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'transport' => '',
	'sanitize_callback' => 'esc_textarea',
	) );

	$wp_customize->add_control( 'textarea_field_id', array(
	'type' => 'textarea',
	'priority' => 10,
	'section' => 'section_id',
	'label' => __( 'Textarea Field', 'textdomain' ),
	'description' => '',
	) );

	$wp_customize->add_setting( 'date_field_id', array(
	'default' => '',
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'transport' => '',
	'sanitize_callback' => ''
	) );

	$wp_customize->add_control( 'date_field_id', array(
	'type' => 'date',
	'priority' => 10,
	'section' => 'section_id',
	'label' => __( 'Date Field', 'textdomain' ),
	'description' => '',
	) );

	$wp_customize->add_setting( 'range_field_id', array(
	'default' => '',
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'transport' => '',
	'sanitize_callback' => 'intval',
	) );

	$wp_customize->add_control( 'range_field_id', array(
	'type' => 'range',
	'priority' => 10,
	'section' => 'section_id',
	'label' => __( 'Range Field', 'textdomain' ),
	'description' => '',
	'input_attrs' => array(
	'min' => 0,
	'max' => 100,
	'step' => 1,
	'class' => 'example-class',
	'style' => 'color: #0a0',
	),
	) );

	}
	add_action( 'customize_register', 'prefix_customizer_register' );

	http://wptheming.com/2014/09/customizer-panels-field-types/
	http://make.wordpress.org/core/2014/07/08/customizer-improvements-in-4-0/

	------------------------------------------------------------------------
	Culori cu opacitate:

	http://pluto.kiwi.nz/2014/07/how-to-add-a-color-control-with-alphaopacity-to-the-wordpress-theme-customizer/

	<?php

	// See full blog post here
	// http://pluto.kiwi.nz/2014/07/how-to-add-a-color-control-with-alphaopacity-to-the-wordpress-theme-customizer/

	function pluto_add_customizer_custom_controls( $wp_customize ) {

	class Pluto_Customize_Alpha_Color_Control extends WP_Customize_Control {

	public $type = 'alphacolor';
	//public $palette = '#3FADD7,#555555,#666666, #F5f5f5,#333333,#404040,#2B4267';
	public $palette = true;
	public $default = '#3FADD7';

	protected function render() {
	$id = 'customize-control-' . str_replace( '[', '-', str_replace( ']', '', $this->id ) );
	$class = 'customize-control customize-control-' . $this->type; ?>
	<li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>">
	<?php $this->render_content(); ?>
	</li>
	<?php }

	public function render_content() { ?>
	<label>
	<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
	<input type="text" data-palette="<?php echo $this->palette; ?>" data-default-color="<?php echo $this->default; ?>" value="<?php echo intval( $this->value() ); ?>" class="pluto-color-control" <?php $this->link(); ?> />
	</label>
	<?php }
	}

	}
	add_action( 'customize_register', 'pluto_add_customizer_custom_controls' );


	-----------------------------------------------------------------------

	<?php

	function pluto_register_customizer_options( $wp_customize ) {

	/-----------------------------------------------------------
	* Defining our own section called "It's Alpha time"
	-----------------------------------------------------------/
	$wp_customize->add_section(
	'alpha_color_category',
	array(
	'title' => 'It\'s Alpha time',
	'priority' => 202
	)
	);

	/-----------------------------------------------------------
	* Hook our control into the section above
	-----------------------------------------------------------/
	$wp_customize->add_setting(
	'pluto_color_control_one'
	);

	$wp_customize->add_control(
	new Pluto_Customize_Alpha_Color_Control(
	$wp_customize,
	'pluto_color_control_one',
	array(
	'label' => 'Alpha Color',
	'palette' => true,
	'section' => 'alpha_color_category'
	)
	)
	);

	}

	add_action( 'customize_register', 'pluto_register_customizer_options' );

	------------------------------------------------------------------------

	jQuery(document).ready(function($) {

	Color.prototype.toString = function(remove_alpha) {
	if (remove_alpha == 'no-alpha') {
	return this.toCSS('rgba', '1').replace(/\s+/g, '');
	}
	if (this._alpha < 1) {
	return this.toCSS('rgba', this._alpha).replace(/\s+/g, '');
	}
	var hex = parseInt(this._color, 10).toString(16);
	if (this.error) return '';
	if (hex.length < 6) {
	for (var i = 6 - hex.length - 1; i >= 0; i--) {
	hex = '0' + hex;
	}
	}
	return '#' + hex;
	};

	$('.pluto-color-control').each(function() {
	var $control = $(this),
	value = $control.val().replace(/\s+/g, '');
	// Manage Palettes
	var palette_input = $control.attr('data-palette');
	if (palette_input == 'false' \|\| palette_input == false) {
	var palette = false;
	} else if (palette_input == 'true' \|\| palette_input == true) {
	var palette = true;
	} else {
	var palette = $control.attr('data-palette').split(",");
	}
	$control.wpColorPicker({ // change some things with the color picker
	clear: function(event, ui) {
	// TODO reset Alpha Slider to 100
	},
	change: function(event, ui) {
	// send ajax request to wp.customizer to enable Save & Publish button
	var _new_value = $control.val();
	var key = $control.attr('data-customize-setting-link');
	wp.customize(key, function(obj) {
	obj.set(_new_value);
	});
	// change the background color of our transparency container whenever a color is updated
	var $transparency = $control.parents('.wp-picker-container:first').find('.transparency');
	// we only want to show the color at 100% alpha
	$transparency.css('backgroundColor', ui.color.toString('no-alpha'));
	},
	palettes: palette // remove the color palettes
	});
	$('<div class="pluto-alpha-container"><div class="slider-alpha"></div><div class="transparency"></div></div>').appendTo($control.parents('.wp-picker-container'));
	var $alpha_slider = $control.parents('.wp-picker-container:first').find('.slider-alpha');
	// if in format RGBA - grab A channel value
	if (value.match(/rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/)) {
	var alpha_val = parseFloat(value.match(/rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/)[1]) * 100;
	var alpha_val = parseInt(alpha_val);
	} else {
	var alpha_val = 100;
	}
	$alpha_slider.slider({
	slide: function(event, ui) {
	$(this).find('.ui-slider-handle').text(ui.value); // show value on slider handle
	// send ajax request to wp.customizer to enable Save & Publish button
	var _new_value = $control.val();
	var key = $control.attr('data-customize-setting-link');
	wp.customize(key, function(obj) {
	obj.set(_new_value);
	});
	},
	create: function(event, ui) {
	var v = $(this).slider('value');
	$(this).find('.ui-slider-handle').text(v);
	},
	value: alpha_val,
	range: "max",
	step: 1,
	min: 1,
	max: 100
	}); // slider
	$alpha_slider.slider().on('slidechange', function(event, ui) {
	var new_alpha_val = parseFloat(ui.value),
	iris = $control.data('a8cIris'),
	color_picker = $control.data('wpWpColorPicker');
	iris._color._alpha = new_alpha_val / 100.0;
	$control.val(iris._color.toString());
	color_picker.toggler.css({
	backgroundColor: $control.val()
	});
	// fix relationship between alpha slider and the 'side slider not updating.
	var get_val = $control.val();
	$($control).wpColorPicker('color', get_val);
	});
	}); // each

	});

	-------------------------------------------------------------------------------

	<?php

	function pluto_enqueue_customizer_admin_scripts() {

	wp_register_script( 'customizer-admin-js', get_template_directory_uri() . '/js/admin/customizer-admin.js', array( 'jquery' ), NULL, true );
	wp_enqueue_script( 'customizer-admin-js' );

	}

	add_action( 'admin_enqueue_scripts', 'pluto_enqueue_customizer_admin_scripts' );

	---------------------------------------------------------------------------------

	.pluto-alpha-container .transparency {
	height:24px;
	width:100%;
	background-color:#FFF;
	background-image:url(../../images/transparency-grid.png);
	box-shadow:0 0 5px rgba(0,0,0,0.4) inset;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding:0;
	}

	.pluto-alpha-container .ui-slider-handle {
	color:#777;
	background-color:#FFF;
	text-shadow:0 1px 0 #FFF;
	text-decoration:none;
	position:absolute;
	z-index:2;
	box-shadow:0 1px 2px rgba(0,0,0,0.2);
	border:1px solid #aaa;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	opacity:0.9;
	margin-top:-2px;
	height:20px;
	cursor:ew-resize;
	font-size:12px;
	padding:3px;
	}

	.pluto-alpha-container .ui-slider {
	position:relative;
	text-align:center;
	width:88%;
	}

	.wp-picker-container a.wp-picker-open ~ div.pluto-alpha-container {
	display:block;
	}

	.pluto-alpha-container {
	box-sizing:padding-box;
	display:none;
	border:1px solid #dfdfdf;
	border-top:none;
	background:#FFF;
	padding:0 11px 6px;
	}

	.customize-control-alphacolor .wp-picker-container .iris-picker {
	border-bottom:none;
	}

	---------------------------
	https://github.com/paulund/Wordpress-Theme-Customizer-Custom-Controls
No results found