Tektriks

Coding starts here
Home / Blog

How to create multiselect dropdown in WordPress Theme Customizer

Post WordPress 4 versions added superior support to manage your theme from backend. Today I am discussing on the ‘customize_register‘ action hook where you can set up various settings in your personalized or custom theme. You can add various controls like Textbox, Textarea, Radio, Checkbox, Selectbox, Image, File, Color picker etc. For more information you can take a look at Theme Customizer. Somehow you need a multi select custom dropdown (Not Page or Category), but the option is not mentioned as a control there. Hence, you have to create your own control and add it to WordPress. Now, I am going to create a multi select countries dropdown where admin user can select multiple countries when editing the theme.

1. First create a countries table in phpMyAdmin with fields ( id, country_name, capital etc. ) and import some data there.

2. Next, create a file `theme-customizer.php` and put in `inc` folder in your theme. Include the file in your `functions.php`.

// File: functions.php
require get_parent_theme_file_path( '/inc/theme-customizer.php' );

3. Create a new folder in `inc` named `controls` and create another file named `countries-dropdown.php`. So the file path is `themefolder/inc/controls/countries-dropdown.php`. Now we are going to extend `WP_Customize_Control` class.

// File: countries-dropdown.php
if (class_exists('WP_Customize_Control'))
{
  /**
  * Class to create a custom multiselect dropdown control
  */
  class Countries_Dropdown_Custom_control extends WP_Customize_Control
  {
    /**
    * Render the content on the theme customizer page
    */
    public $type = 'multiple-select';

    public function render_content() {

      if ( empty( $this->choices ) )
        return;
      ?>
        <label>
          <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
          <select <?php $this->link(); ?> multiple="multiple" size="25">
            <?php
               foreach ( $this->choices as $value => $label ) {
                 $selected = ( in_array( $value, $this->value() ) ) ? selected( 1, 1, false ) : '';
                   echo '<option value="' . esc_attr( $value ) . '"' . $selected . '>' . $label . '</option>';
               }
            ?>
          </select>
        </label>
      <?php 
    }
  }
}

4. Now add below data in your `theme-customizer.php` file.

// File: theme-customizer.php
if( ! function_exists('yourtheme_customize_register') ) {
  function yourtheme_customize_register($wp_customize) {
    global $wpdb;
    // Including custom controls
    require_once( __DIR__ . '/controls/countries-dropdown.php' );

    $countries = $wpdb->get_results("SELECT id, country_name FROM {$wpdb->prefix}countries");
    if( count( $countries ) ) {		
      foreach( $countries as $country ) {
        $choices[ $country->id ] = $country->country_name;
      }		
    }

    // Initialize new section
    $wp_customize->add_section('yourtheme_business_info', array(
      'title'    => __('Select Business Countries', 'textdomain'),
      'description' => 'You can select multiple countries',
      'priority' => 240,
    ));	

    //  =============================
    //  = Countries Dropdown        =
    //  =============================
    $wp_customize->add_setting('yourtheme_theme_options[country_ids]', array(
      'capability'     => 'edit_theme_options',
      'type'           => 'option'
    ));

    $wp_customize->add_control(
      new Countries_Dropdown_Custom_control(
        $wp_customize, 'country_ids', array(
          'label' => __( 'Select Countries', 'textdomain' ),
          'section' => 'yourtheme_business_info',
          'settings' => 'yourtheme_theme_options[country_ids]',
          'type'     => 'multiple-select',
          'choices'	=> $choices
        )
      )
    );
  }

  add_action('customize_register', 'yourtheme_customize_register');
}
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x