Come creare controlli personalizzati per WP customizer

Come creare controlli personalizzati per Wp customizer? Se vuoi aggiungere funzioni personalizzate per i controlli della schermata personalizza di wordpress dovrai estendere la classe WP_Customize_Control.

Con la funzione extends puoi aggiungere codice HTML, CSS e php ai tuoi controlli custom e generare azioni personalizzate per la schermata “personalizza”.

Se stai creando un tema per wordpress o semplicemente vuoi aggiungere controlli custom al backend del personalizza, questa è la soluzione, vediamo cosa fare.

Per prima cosa apri il file functions.php del tuo tema child e inserisci questa funzione:

<?php
class Ekw_My_Custom_Control extends WP_Customize_Control{
  public $type = 'ekw_my_custom_control';
  public function render_content() {
    ?>
    <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    <?php

    <div>
      <input type="text" id="<?php echo esc_attr($this->id); ?>" name="<?php echo esc_attr($this->id); ?>_checkbox1" value="<?php echo $this->value();?>" <?php $this->link();?>>
    </div>
    <?php
  }
}
?>

Questa funzione crea un nuovo controllo personalizzato contenente un solo campo input di tipo testo ma puoi aggiungerne quanti ne vuoi.

In questa funzione dovrai far attenzione ad inserire:

• Un tipo di controllo univoco (public $type = ‘ekw_my_custom_control’;)
• la funzione render content() che genera il contenuto del tuo controllo
• I campi di input necessari
• Le variabili del punto successivo.

I parametri che puoi utilizzare sono:

• $this->id: l’id univoco assegnato dalla funzione add_control()
• $this->label: il label assegnato dalla funzione add_control()
• $this->value(): il valore del campo input da salvare nel DB
• $this->link(); necessario per far funzionare il tutto, viene assegnato al campo input di cui si vuole recuperare il valore per salvarlo nel DB

Abbiamo detto che è necessario assegnare $this->link() al campo input di cui vogliamo recuperare il valore, altrimenti non verrà salvato alcun dato.

Non serve altro codice perché il customizer crea un campo ‘theme_mod’ con il valore recuperato con $this->link().

Per recuperare il tuo valore dovrai usare questo codice:

get_theme_mod('id-univoco-assegnato-con-add-control()');

Ora che abbiamo creato il nostro controllo personalizzato dobbiamo visualizzarlo nel database.

Per questo useremo le stesse funzioni per creare pannelli nella schermata personalizza, quindi add_panel(), add_sections(), add_settings() e add_control().

    $wp_customize->add_control(new Ekw_My_Custom_Control($wp_customize, 'my-custom-id', array(
      'label'    		=> 'Testo',
      'type'     		=> 'ekw_align_items', //tipo definito nella variabile $type in precedenza
      'settings'		=> 'your-settings-name',
      'section' => 'your-section-name’,
    )));

Se utilizzi Javascript o jQuery per assegnare valori ai tuoi campi input potresti riscontrare errori di salvataggio nel database da parte del customizer.

Questo succede anche con i campi di tipo “hidden” che ricevono valori da altre fonti ma non preoccuparti, la soluzione è molto semplice.

Se i valori non vengono inseriti dall’utente allora non si attiva la funzione che effettua il reload della pagina e che recupera i nuovi valori, basta quindi usare “.trigger(‘change’)” in questo modo:

$(document).on("click", 'input[name="my-custom-elem”]', function () {
   var value = “my-custom-value”;

   /* effettua il reload della pagina e assegna un nuovo valore all’input */
   $(‘input[type=”hidden”]’).val(value).trigger('change'); 
});

Ovviamente, l’input di tipo hidden deve avere assegnato il $this->link() tramite php.

Se può esserti utile, dai uno sguardo anche a come risolvere errore $ is not a function.