Code voorbeeld

Zelf WordPress widgets maken

Leestijd: 3 minuten (574 woorden)
profile image

Rick de Jong

Strategie

14 maart 2013 08:04

Laatste update: 11 januari 2023 10:04

Zelf WordPress widgets maken

Als je nét even wat anders wil

We gaan zelf een widget aanmaken in het widgetscherm van WordPress, zodat je deze weer kunt gebruiken in je WordPress thema / sidebar.

Waarom een eigen widget 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.

De functie

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.