5 comments

1. Example and class for usage

   You can see on my current theme, how it’s possible to use this. Also you can usage the class. See this class on Github an check the functions.php for include this.

   Start & init

   You can register your custom settings for the theme customizer via the customize_register hook:

   add_action( 'customize_register', 'themedemo_customize' );
   function themedemo_customize($wp_customize) {
   
       $wp_customize->add_section( 'themedemo_demo_settings', array(
           'title'          => 'Demonstration Stuff',
           'priority'       => 35,
       ) );
   
       $wp_customize->add_setting( 'some_setting', array(
           'default'        => 'default_value',
       ) );
   
       $wp_customize->add_control( 'some_setting', array(
           'label'   => 'Text Setting',
           'section' => 'themedemo_demo_settings',
           'type'    => 'text',
       ) );
   
       $wp_customize->add_setting( 'some_other_setting', array(
           'default'        => '#000000',
       ) );
   
       $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'some_other_setting', array(
           'label'   => 'Color Setting',
           'section' => 'themedemo_demo_settings',
           'settings'   => 'some_other_setting',
       ) ) );
   
   }
   

   In-Theme usage:

   Use it, like in the example below ↓:

   echo 'some_setting => ' .get_theme_mod( 'some_setting', 'default_value' )."n";
   echo 'some_other_setting => ' .get_theme_mod( 'some_other_setting', '#000000' )."n";
   echo 'non_existent_setting => '.get_theme_mod( 'non_existent_setting', 'default_value' )."n";
   

   Adjustments

   The you can also change the control:

   $wp_customize->add_control( 'themename_color_scheme', array(
       'label'      => __( 'Color Scheme', 'themename' ),
       'section'    => 'themename_color_scheme',
       'settings'   => 'themename_theme_options[color_scheme]',
       'type'       => 'radio',
       'choices'    => array(
           'value1' => 'Choice 1',
           'value2' => 'Choice 2',
           'value3' => 'Choice 3',
           ),
   ) );
   

   The default control-type is text. It creates a text box control. Another control-type is dropdown-pages, which creates a dropdown list of the WordPress Pages.

   But that’s not all. There’re actually several more, but because they’re so custom, they’re declared differently.

   This one makes use of OOP:

   $wp_customize->add_control(
       new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
           'label'    => __( 'Link Color', 'themename' ),
           'section'  => 'themename_color_scheme',
           'settings' => 'themename_theme_options[link_color]',
       ) )
   );
   

   Additional notes:

   • WP_Customize_Upload_Control – This gives you an upload box for files. However, you probably won’t use this directly,
     you’ll want to extend it for other things… like:
     WP_Customize_Image_Control –
     This gives you the image picker and the uploader box. It extends the
     upload controller. You can see it in action on the custom background
     piece, where a user can upload a new file to be the background image.
   • WP_Customize_Header_Image_Control – Because of the resizing action of
     the header piece, it needs a bit of special handling and display, so
     the WP_Customize_Header_Image_Control extends the
   • WP_Customize_Image_Control to add that functionality. You can see it
     in action on the custom header piece, where a user can upload a new
     file to be the header image.

   You can find more about “Theme Customizer” in ottos blog.

   Update 11/06/2012

   Live Example for read possibilities and more examples, see the open repo for the source and the doku.

   Update 01/15/2013

   We have create a repo on github with custom class to use it, easy and ready. Maybe you can only use it or advance with your ideas and solutions.

   Log in to Reply

2. Ok, here’s how to do this. Seperate your control class(es) to one or more new files.

   You have a function or method hooked on customize_register, right? In that function or method require once your new files just before adding your custom controls. Then PHP won’t complain about redefining classes.

   Note: This will not work out of the box, but shows the trick.

   add_action('customize_register', array('myAddControl', 'customize_register') );
   
   class myAddControl{
   public function customize_register()
   {
       global $wp_customize;
   
   
               //This will do the trick
       require_once(dirname(__FILE__).'/class-gctfw-theme-control.php');
   
   
       $wp_customize->add_section( 'gctfw_switch_theme' , array(
           'title'      => 'Switch theme',
           'priority'   => 25,
       ) );
   
       $wp_customize->add_setting( 'gctfw_select_theme' , array(
           'default'     => $wp_customize->theme()->get('Name'),
           'transport'   => 'refresh',
           'capabilities' => 'manage_options'
       ) );
   
       $myControl = new gctfw_Theme_Control( $wp_customize, 'gctfw_select_theme', array(
           'label'        => __( 'Select theme', 'mytheme' ),
           'section'    => 'gctfw_switch_theme',
           'settings'   => 'gctfw_select_theme',
       ) ) ;
       $wp_customize->add_control( $myControl );
       }
   }//class
   

   Log in to Reply

3. You’re never using your class. Try passing a new instance of your class to the add_control method:

   $control_args = array(
     // your args here
   ); 
   
   $my_control = new WP_Customize_Palette_Control(
                   $wp_customize, 'themename_color_scheme', $control_args);
   
   $wp_customize->add_control($my_control);
   

   Also, I don’t think WP knows that the option name for your setting is part of an array. Maybe it’s better to have themename_theme_options_color_scheme instead of themename_theme_options[color_scheme].

   The class your extending belongs to the image upload control. If you’re creating a color picker, you should probably extend the WP_Customize_Control class.

   Log in to Reply

4. Just for completeness: An example on how to add a number field to the Theme Customizer.

   class Customize_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" size="2" step="1" min="0" value="<?php echo esc_attr(  $this->value() ); ?>" />
           </label>
           <?php
       }
   }
   

   Log in to Reply

5. I think you have to add backslash before the WP_Customize. So, it will be

   class WP_Customize_Palette_Control extends WP_Customize_Image_Control
   

   , Because backslash assumed that the WP_Customize_Image_Control not from same Namespace

   Let me know if it helped

   Log in to Reply