Come creare un widget personalizzato per WordPress

Mentre stiamo realizzando un tema per WordPress, piuttosto che ricorrere a plugin esterni per l’inserimento di codice PHP (come ad esempio PHP Code Widget) nelle sidebar, potrebbe tornarci utile realizzare un widget per utilizzare il nostro codice in aree specifiche del sito, senza permettere a terzi (i clienti) di andare a “toccarlo” e comprometterne la funzionalità.

Ci tengo a premettere che non intendo approfondire la tematica  dal punto di vista della programmazione pura, non rientrando nelle mie competenze specifiche, bensì è mio intento indicare un sistema generale e semplice per realizzare un Widget in maniera rapida ed alla portata di tutti, derivato dalla lettura di alcune risorse online e cartacee.

Il nostro widget nel file functions

Il codice che vediamo va inserito unicamente nel file functions.php del nostro tema. Quello che andremo a fare è realizzare un semplicissimo widget con un titolo, e che stampi una frase. Il nostro widget sarà poi visibile dall’apposito pannello di WordPress e trascinabile in qualsivoglia sidebar!

La struttura funzionale

<?php 
class myWidget extends WP_Widget {
	function myWidget() {
	}
	function widget( $args, $instance ) {
	}
	function update( $new_instance, $old_instance ) {
	}
	function form( $instance ) {
	}
}
function my_register_widgets() {
	register_widget( 'myWidget' );
}
add_action( 'widgets_init', 'my_register_widgets' );
?>

Quella che possiamo vedere qui sopra è la struttura di base che permette al nostro widget di essere riconosciuto e mostrato nel backend di wordpress. Tuttavia così è privo di qualsiasi funzionalità. Sottolineo solo alcuni aspetti che a mio avviso possono interessare. Innanzitutto quello che stiamo andando a fare è estendere la class WP_Widget, ovvero la classe che permette a WP di costruire i widget. In seguito poi abbiamo 4 metodi (funzioni) che permettono di indicare il nome del widget, di eseguirlo realmente, di effettuare correttamente le operazioni di salvataggio e di gestire il campo “Titolo” che può essere modificato. Le 4 funzionalità appena elencate fanno riferimento a function myWidget(), function widget(), function update() e function form().
Infine con la funzione my_register_widgets() (che potete chiamare a vostro piacimento) andiamo a registrare a tutti gli effetti il nostro widget perchè compaia nel backend ed infine lo istanziamo usando add_action().

L’esempio completo e funzionante

< ?php 
class myWidget extends WP_Widget {
	function myWidget() {
		parent::__construct( false, 'Il mio Widget' );
	}
	function widget( $args, $instance ) {
		extract($args);
		echo $before_widget;
		echo $before_title.$instance['title'].$after_title;
		//DA QUI INIZIA IL WIDGET VERO E PROPRIO
		echo "Ciao WordPress";
		//FINE WIDGET
		echo $after_widget;
	}
	function update( $new_instance, $old_instance ) {
		return $new_instance;
	}
	function form( $instance ) {
		$title = esc_attr($instance['title']); ?>
		<p><label for="<?php echo $this->get_field_id('title');?>">
		Titolo: <input class="widefat" id="<?php echo $this-/>get_field_id('title');?>" name="< ?php echo $this->get_field_name('title');?>" type="text" value="< ?php echo $title; ?>" />
		</label></p>
		< ?php
	}
}
function my_register_widgets() {
	register_widget( 'myWidget' );
}
add_action( 'widgets_init', 'my_register_widgets' );
?>

Che si mostrerà così nel backend:

Come già anticipato non è mia competenza addentrarmi troppo nel mondo della programmazione (in particolare ad oggetti in questo caso) quindi lascio al tuo approfondimento personale lo studio di ciò che avviene in ogni passaggio. Ad ogni modo, con il codice sopra proposto in mano, sarà sufficiente (qualora non intendiate fornire ulteriori opzioni modificabili da backend) scrivere il vostro codice php normalmente al posto di:

//DA QUI INIZIA IL WIDGET VERO E PROPRIO
    echo "Ciao WordPress";
//FINE WIDGET

Potrete infatti inserirei qui tutto ciò che vi pare, ad esempio usando query_post() potreste estrarre alcuni particolari contenuti e così via. Insomma, la struttura funzionale è questa, poi il cuore dovrete farlo pulsare voi 🙂