Come creare pannelli meta box nella schermata admin di WordPress

Come creare pannelli Meta Box con funzioni personalizzate nella schermata admin di backend delle pagine e articoli di WordPress?

Se stai sviluppando un tema è giunto il momento di creare le funzioni che ti servono per ogni elemento del tuo sito, anche per i campi personalizzati.

In questa guida utilizzeremo la funzione add_meta_box() del core di WordPress che ti consente di aggiungere pannelli personalizzati al backend di ogni pagina.

Per prima cosa apri il file functions.php del tuo tema o tema child, lì inserirai il codice.

Per creare Meta Box personalizzati useremo la funzione add_meta_box() del core di WordPress, in questo modo:

function custom_meta_box() {
	add_meta_box(
		"custom", //$id
		"Nuovo Metabox", //$title
		"meta_box_function", //$callback
		"post", //$screen
		"side" //$context
	);
}
add_action( "add_meta_boxes", "custom_meta_box" );

• Questo codice crea un pannello custom nella barra laterale del backend degli articoli di WordPress
• Agganciamo l’hook “add_meta_boxes” per creare nuovi pannelli
• Per adesso questo box non esegue nessuna azione.

I parametri che si possono inserire per creare pannelli Meta Box sono:

• $id: (Obbligatorio) ID univoco del pannello, di tipo stringa (string)
• $title: (Obbligatorio) Nome che comparirà nel pannello,  di tipo stringa (string)
• $callback: (Obbligatorio) nome della funzione che genera il contenuto del pannello (string)
• $screen: indica dove viene mostrato il tuo pannello, accetta diversi parametri, i più usati sono ‘page’, e ‘post’.
• $context: è la posizione del pannello nella schermata e accetta 3 parametri di tipo stringa: ‘side’, ‘normal’ e ‘advanced’.
• $priority: è la priorità di posizionamento e accetta ‘high’, ‘core’, ‘default’, e ‘low’.
• $callback_args: è un array contenente gli argomenti da passare alla funzione che esegue l’azione del pannello

Abbiamo finora creato un pannello vuoto che non esegue nessuna azione. Vediamo ora come inserire elementi personalizzati e azioni.

Per questo useremo la funzione che abbiamo definito nel parametro $callback, in questo modo:

function meta_box_function() {
   ?>
  <input type="text" name="my-custom-input" id=”my-custom-input” value="">
  //resto del codice
  <?php
}

In questo codice possiamo inserire caselle di testo, input e pulsanti ma anche un elenco di post, pagine o campi personalizzati.

Questa funzione non necessita di codice aggiuntivo perché viene richiamata dal Meta Box.

Per salvare le impostazioni del nostro Meta Box personalizzato utilizzeremo l’hook ‘save_post’ che si attiva quando premiamo sul tasto “salva” di WordPress.

Di base, i campi di input sono contenuti in una form con method=”post”, quindi non dovrebbero necessitare di ulteriori modifiche.

function ekw_save_meta_box($post_id) {
	set_theme_mod(‘mod-name’, $_POST["my-custom-input"]);

	//oppure

	update_post_meta($post_id, ‘post-meta-name’, $_POST["my-custom-input"]);
}

I valori di questa funzione possono essere richiamati grazie alle funzioni.

get_theme_mod(‘mod-name’, false);
//oppure
get_post_meta($post_id, ‘post-meta-name’);