Zelf WordPress widgets maken

Vandaag een wat uitdagendere tutorial dan normaal. We gaan namelijk zelf een widget aanmaken in het widgetscherm van WordPress, zodat je deze weer kunt gebruiken in je WordPress thema / sidebar. Dit 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 bijvoorbeeld code om een div te openen en te sluiten:

</div></div>

De functie

We beginnen direct met de functie in zijn geheel.

class TSDWidget extends WP_Widget
{
  function TSDWidget()
  {
    $widget_ops = array('classname' => 'TSDWidget', 'description' => 'Voeg een knop in, in de sidebar met een logo, titel, link & omschrijving.' );
    $this->WP_Widget('TSDWidget', 'Sidebar button', $widget_ops);
  }

  function form($waarde)
  {
    $waarde = wp_parse_args( (array) $waarde, array( 'title' => '') );
    $title = $waarde['title'];
?>
  <p><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 attribute_escape($title); ?>" /></label></p>
<?php
  }

  function update($nieuwe_waarde, $oude_waarde)
  {
    $waarde = $oude_waarde;
    $waarde['title'] = $nieuwe_waarde['title'];
    return $waarde;

  }

  function widget($args, $waarde)
  {
    extract($args, EXTR_SKIP);

    echo $before_widget;
    $title = empty($waarde['title']) ? ' ' : apply_filters('widget_title', $waarde['title']);
	$ondertitel = empty($waarde['ondertitel']) ? ' ' : apply_filters('widget_title', $waarde['ondertitel']);
	$logourl = empty($waarde['logourl']) ? ' ' : apply_filters('widget_title', $waarde['logourl']);
	$linkurl = empty($waarde['linkurl']) ? ' ' : apply_filters('widget_title', $waarde['linkurl']);

    if (!empty($title))
      echo $before_title . $title . $after_title;;

    // WIDGET CODE KOMT HIER
    echo $title;
    echo $after_widget;
  }

}
add_action( 'widgets_init', create_function('', 'return register_widget("TSDWidget");') );

In deze widget is het mogelijk om een titel aan te geven. Dit is erg simpel en zet een goede basis neer. Als je deze code opslaat in je functions.php, zal je direct de widget zien verschijnen. Stel je wilt dit uitbreiden met een ondertitel en een link (voor de titel), dan doe je dit als volgt. Je voegt eerst nieuwe labels en inputvelden toe. De regel:

<p><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 attribute_escape($title); ?>" /></label></p>

Vervang je door

<p><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 attribute_escape($title); ?>" /></label></p>
  <p><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 attribute_escape($ondertitel); ?>" /></label></p>
  <p><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 attribute_escape($linkurl); ?>" /></label></p>

Je zult nu zien dat er - zodra je functions weer opslaat - twee velden bij zijn gekomen, alleen gebeurt er nog niks als je deze opslaat. Dit gaan we namelijk doen in onderstaande uitbreidingen.

Opslaan

Vervang de voglende regel:

$title = $waarde['title'];

Voor de volgende regels:

    $title = $waarde['title'];
	$ondertitel = $waarde['ondertitel'];
	$linkurl = $waarde['linkurl'];

Vervolgens pas je nog de voglende regel aan:

	$waarde['title'] = $nieuwe_waarde['title'];

Deze pas je aan in:

    $waarde['title'] = $nieuwe_waarde['title'];
	$waarde['ondertitel'] = $nieuwe_waarde['ondertitel'];
	$waarde['linkurl'] = $nieuwe_waarde['linkurl'];

Dit geheel sla je op. De volledige functie is nu als volgt:

class TSDWidget extends WP_Widget
{
  function TSDWidget()
  {
    $widget_ops = array('classname' => 'TSDWidget', 'description' => 'Voeg een knop in, in de sidebar met een logo, titel, link & omschrijving.' );
    $this->WP_Widget('TSDWidget', 'Sidebar button', $widget_ops);
  }

  function form($waarde)
  {
    $waarde = wp_parse_args( (array) $waarde, array( 'title' => '') );
    $title = $waarde['title'];
    $ondertitel = $waarde['ondertitel'];
    $linkurl = $waarde['linkurl'];
?>
  <p><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 attribute_escape($title); ?>" /></label></p>
  <p><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 attribute_escape($ondertitel); ?>" /></label></p>
  <p><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 attribute_escape($linkurl); ?>" /></label></p>
<?php
  }

  function update($nieuwe_waarde, $oude_waarde)
  {
    $waarde = $oude_waarde;
    $waarde['title'] = $nieuwe_waarde['title'];
    $waarde['ondertitel'] = $nieuwe_waarde['ondertitel'];
    $waarde['linkurl'] = $nieuwe_waarde['linkurl'];
    return $waarde;

  }

  function widget($args, $waarde)
  {
    extract($args, EXTR_SKIP);

    echo $before_widget;
    $title = empty($waarde['title']) ? ' ' : apply_filters('widget_title', $waarde['title']);
	$ondertitel = empty($waarde['ondertitel']) ? ' ' : apply_filters('widget_title', $waarde['ondertitel']);
	$linkurl = empty($waarde['linkurl']) ? ' ' : apply_filters('widget_title', $waarde['linkurl']);

    if (!empty($title))
      echo $before_title . $title . $after_title;;

    // WIDGET CODE KOMT HIER
    echo $title;
    echo $ondertitel;
    echo $linkurl;

    echo $after_widget;
  }

}
add_action( 'widgets_init', create_function('', 'return register_widget("TSDWidget");') );

De hele output (de code die de widget genereert) kun je aanpassen onder het stukje "// Widget code komt hier".

That's it

Een wat lastigere functie, vooral als je 'm helemaal eigen wilt maken en uit wilt breiden, maar zeker de moeite waard!

Vind je dit bericht interessant?

Vind je dit bericht interessant? Dan zou ik het erg waarderen als je een like of andere "social-share" achter laat ;)