Zelf WordPress widgets maken

Het maken van custom widgets kan vooral handig zijn als je meerdere elementen hebt in WordPress, zoals bijvoorbeeld tekst-widgets die beginnen met een element als

<div class="tekstwidget">

en knoppen die beginnen met

<div class="widgetbutton">

Door gebruik te maken van zelf ontwikkelde widgets hoef je geen harde code over te houden in je thema en hoef je niet legio sidebars aan te maken met bijvoorbeeld code om een div te openen en te sluiten.

We beginnen direct met de functie in zijn geheel.

class TSDWidget extends WP_Widget
{
	public function __construct()
	{
		$widget_ops = array(
			'classname' 	=> 'TSDWidget',
			'description' 	=> 'Voeg een voorbeeld sidebar toe met een titel, ondertitel en een link.'
		);
		parent::__construct('TSDWidget', 'TSD Sidebar', $widget_ops);
	}

	public function form($waarde)
	{
		$waarde = wp_parse_args((array) $waarde, array('title' => ''));
		$title = $waarde['title'];
		$ondertitel = $waarde['ondertitel'];
		$linkurl = $waarde['linkurl']; ?>

		<label for="<?php echo $this->get_field_id('title'); ?>">Titel: <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_html($title); ?>" /></label>
		
		<label for="<?php echo $this->get_field_id('ondertitel'); ?>">Ondertitel: <input class="widefat" id="<?php echo $this->get_field_id('ondertitel'); ?>" name="<?php echo $this->get_field_name('ondertitel'); ?>" type="text" value="<?php echo esc_html($ondertitel); ?>" /></label>
		
		<label for="<?php echo $this->get_field_id('linkurl'); ?>">URL: <input class="widefat" id="<?php echo $this->get_field_id('linkurl'); ?>" name="<?php echo $this->get_field_name('linkurl'); ?>" type="text" value="<?php echo esc_html($linkurl); ?>" /></label>
<?php }

	public function update($new, $old)
	{
		$value	= $old;
		$value['title']	= $new['title'];
		$value['ondertitel'] = $new['ondertitel'];
		$value['linkurl'] = $new['linkurl'];
		return $value;
	}

	public function widget($args, $value)
	{
		extract($args, EXTR_SKIP);

		echo $before_widget;

		$title = empty($value['title']) ? ' ' : esc_html($value['title']);
		$ondertitel = empty($value['ondertitel']) ? ' ' : esc_html($value['ondertitel']);
		$linkurl = empty($value['linkurl']) ? ' ' : esc_url($value['linkurl']);

		// WIDGET HTML KOMT HIER
		echo $before_title . $title . $after_title;
		echo $ondertitel;
		echo $linkurl;

		echo $after_widget;
	}
}

function register_tsd_widget()
{
	return register_widget("TSDWidget");
}

add_action('widgets_init', 'register_tsd_widget');

Zoek de widget onder de naam “TSD Sidebar”. Je zult zien dat er 3 invoervelden beschikbaar zijn. Voor titel, ondertitel en voor een URL die je eventueel in een link kunt plaatsen. Voor de frontend kun je eigen HTML schrijven waar we de comment “Widget HTML komt hier” hebben geplaatst. Door de juiste values te echo-en in de HTML kan je de ingevoerde data in de widget op de frontend tonen.