Ich habe bei den letzten Projekten sehr häufig für bestimmte Funktionen ein Widget geschrieben. Im heutigen Beitrag möchte ich euch kurz erklären, wie einfach es ist, ein eigenes Widget zu schreiben, welche Funktionen man dafür benötigt und worauf man dabei achten sollte.

Die Basis für jedes Widget

Ein Widget kann entweder in einem Theme oder in einem Plugin implementiert werden. Ich verwende eigentlich fast immer ein Plugin dafür, da ich das Widget dann für ein anderes Projekt wiederverwerten kann. Den CSS-Code für die Ausgabe im Frontend speichere ich hingegen meistens im Theme. Für den Artikel werden wir alles im Plugin speichern.

Ein Widget ist ganz vereinfacht gesagt eine PHP-Klasse, die die Klasse WP_Widget erweitert. Sie implementiert dabei in der Regel folgende vier Funktionen:

class My_Widget extends WP_Widget {

	public function __construct() {
		// widget actual processes
	}
	
	public function widget( $args, $instance ) {
		// outputs the content of the widget
	}
	
	public function form( $instance ) {
		// outputs the options form on admin
	}
	
	public function update( $new_instance, $old_instance ) {
		// processes widget options to be saved
	}
}

Im Konstruktor wird beispielsweise definiert, welchen Namen das Widget hat, sowie eine Beschreibung angegeben. Die Funktion widget() ist für die Ausgabe im Frontend zuständig. Die Funktion form() erstellt das Formular im Backend und die Funktion update() speichert die Änderungen in diesem Formular.

Das Widget registrieren

Ein so gestaltetes Widget muss in WordPress allerdings erst registriert werden, bevor man es benutzen kann. Hierzu verwendet man die Funktion register_widget(), die man über einen passenden Hook aufruft:

function my_widget_init() {
	register_widget( 'My_Widget' );
}
add_action( 'widgets_init', 'my_widget_init' );

Ein fertiges Widget

Das Suche-Widget ist eines der einfachsten Standard-Widgets, die WordPress im Core anbietet. Im Frontend wird ein einfaches Suchfeld dargestellt und in Backend kann man lediglich den Titel anpassen. Der Code hierzu sieht vereinfacht (ohne Kommentare) wie folgt aus:

class WP_Widget_Search extends WP_Widget {

	public function __construct() {
		$widget_ops = array('classname' => 'widget_search', 'description' => __( "A search form for your site.") );
		parent::__construct( 'search', _x( 'Search', 'Search widget' ), $widget_ops );
	}

	public function widget( $args, $instance ) {
		$title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );

		echo $args['before_widget'];

		if ( $title ) {
			echo $args['before_title'] . $title . $args['after_title'];
		}

		get_search_form();

		echo $args['after_widget'];
	}

	public function form( $instance ) {
		$instance = wp_parse_args( (array) $instance, array( 'title' => '') );
		$title = $instance['title'];
		?>
		<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></label></p>
		<?php
	}

	public function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
		$new_instance = wp_parse_args((array) $new_instance, array( 'title' => ''));
		$instance['title'] = sanitize_text_field( $new_instance['title'] );
		return $instance;
	}
}

In der widget() Funktion sehen wir Zeile 11 und 19 zwei wichtige Ausgaben. Mit diesen ist es möglich, vor und nach dem HTML-Code weiteren Inhalt auszugeben. Eine solche Ausgabe solltet ihr auch im eurem Widget verwenden, damit Plugin- oder Theme-Entwickler diese nutzen können.

Die Funktion form() erhält über die Variable $instance immer die aktuellen Eingaben aus dem Formular. Der update() Funktion werden die alten Eingaben und die neuen Übergeben. Hier sollten alle Eingaben mit den passenden Data-Validation-Funktionen behandelt werden, um beispielsweise XSS-Attacken zu verhindern.

Ein einfaches Social Media Profiles Widget

Eigentlich wollte ich ein neues Widget als Beispiel für diesen Artikel verwenden. Die Code-Beispiele wären dann aber sehr lange geworden. Aber da das Widget nun schon fertig ist, möchte ich es euch natürlich nicht vorenthalten und euch zum Experimentieren zur Verfügung stellen. Es bietet die gleiche Funktion wie das Widget, das ich auf diesem Blog verwende, um oben rechts meine Social-Media-Profile zu verlinken. Hierbei setzte ich (anders als bei dem Widget oben rechts) auf die gleiche Technik, die ich auch bei den Social Sharing Buttons an Tag 10 beschrieben habe. Das Widget bietet im Backend ein einfaches Formular mit ein paar ausgewählten Diensten an:

Im Frontend sieht es dann in etwa so aus, wie bei den Sharing Buttons:

Den Code zum Widget findet ihr natürlich wieder bei GitHub und könnt ihn euch auch als fertiges Plugin als ZIP-Datei runterladen. Viel Spaß beim Experimentieren mit Widgets. Und falls auch ihr etwas Nützliches gebastelt habt, dann hinterlasst doch einfach einen Link dazu in einem Kommentar.