Crear un Widget para WordPress

Los Widgets de WordPress son un elemento imprescindible en cualquier proyecto, por defecto este CMS cuenta con varios WIdgets predefinidos que podemos utilizar desde el panel de administración solamente con arrastrar y soltar en una sidebar o un elemento creado para tal fin. WordPress nos permite crear nuestros propios widget, seguramente en ocasiones vamos a necesitar crear widgets específicos para nuestros proyectos, para ello utilizamos la clase WP_Widget, que cuenta con más de 20 funciones, podemos crear el widget en nuestro archivo functions.php o crear un plugin.

Vamos a crear un Widget sencillo con un título y un formulario de búsqueda, algo muy sencillo de entender y que nos puede ser útil para crear un formulario de búsqueda personalizado que busque post-types específicos en nuestra base de datos.

Se puede hacer de varías formas, yo habitualmente me creo una carpeta widgets para incluir todos los widgets en esa carpeta, en esta carpeta creamos un archivo php con el nombre del Widget, que por defecto tendrá el mismo nombre que la clase, lo llamamos desde functions y lo registramos en el sistema.

require get_template_directory() . '/widgets/DideswebSearchForm.php';
register_widget('Didesweb_Search_Form');

En el archivo DideswebSearchForm.php lo primero que tenemos que hacer es crear la clase que extenderá del objeto WP_Widget

class Dideswebdidesweb_Search_Form extends WP_Widget {
 
}

Dentro crearemos cuatro funciones, las básicas para crear cualquier widget, utilizaremos los métodos form(), update() y widget() de la clase WP_Widget.

La primera función será el nombre de nuestra función y será la encargada de crear el widget.

function didesweb_search_form() {
	    $options = array(
	    	'classname' => 'didesweb-search-form',
	    	'description' => 'Guv Search form');
	    	$this->WP_Widget('didesweb_search_form', 'Didesweb Search form', $options
	    );
	}

A continuación utilizaremos form() y update() para crear el formulario con el que daremos un título al widget

	function form($instance) {
		$opcion  = strip_tags( $instance['opcion']); ?>
		<p>
			<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:') ?></label>
			<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php if (isset ( $instance['title'])) {echo esc_attr( $instance['title'] );} ?>" />
		</p>
	    <?php 
    }
    function update($new_instance, $old_instance) {
		$instance = array();
		$instance = $old_instance;
		$instance['title'] = strip_tags(stripslashes($new_instance['title']));
		return $instance;
    }

Por último con widget() creamos el código que vamos a ver en el front

   function widget($args, $instance) { ?>
      <form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <input type="search" value="" name="s" aria-required="true" aria-invalid="false" required>
        <input type="hidden" name="post_type" value="MY_CUSTOM_POST_TYPE" />
        <label>Buscar</label>
        <span class="focus-border"></span>
        <input type="submit" class="search-submit" value="Buscar">
      </form>
    <?php
   }

Y ya está, ya tenemos nuestro formulario personalizado con el que podemos buscar en nuestros post-types, solo tienes que sustituir “MY_CUSTOM_POST_TYPE” por lo que quieras buscar, por último os dejo el código completo para copiar y pegar, que siempre viene bien ¿verdad?

functions.php

require get_template_directory() . '/widgets/DideswebSearchForm.php';
register_widget('Didesweb_Search_Form');

DideswebSearchForm.php

class Didesweb_Search_Form extends WP_Widget {
	function didesweb_search_form() {
	    $options = array(
	    	'classname' => 'didesweb-search-form',
	    	'description' => 'Didesweb Search form');
	    	$this->WP_Widget('didesweb_search_form', 'Didesweb Search form', $options
	    );
	}
	function form($instance) {
		$opcion  = strip_tags( $instance['opcion']); ?>
		<p>
			<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:') ?></label>
			<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php if (isset ( $instance['title'])) {echo esc_attr( $instance['title'] );} ?>" />
		</p>
	    <?php 
    }
    function update($new_instance, $old_instance) {
		$instance = array();
		$instance = $old_instance;
		$instance['title'] = strip_tags(stripslashes($new_instance['title']));
		return $instance;
    }
   function widget($args, $instance) { ?>
      <form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <input type="search" value="" name="s" aria-required="true" aria-invalid="false" required>
        <input type="hidden" name="post_type" value="MY_CUSTOM_POST_TYPE" />
        <label>Buscar</label>
        <span class="focus-border"></span>
        <input type="submit" class="search-submit" value="Buscar">
      </form>
    <?php
   }
}