Crear widget en WordPress

Un widget en WordPress es un componente que nos permite añadir una funcionalidad determinada dentro de un sidebar. Puede que el ejemplo más clásico de esto sea probablemente la caja de últimos artículos en del lateral de un blog o quizá el listado de categorías del mismo.

Para su desarrollo, tenemos la posibilidad de decidir si queremos crearlo como parte de un tema o si lo vamos a implementar como un plugin. En este artículo veremos cómo hacerlo directamente en el tema utilizando el archivo functions.php, pero es aplicable también a incorporarlo del otro modo, para ello tendrás que tener en cuenta los pasos adecuados en la creación de un plugin.

Tenemos que tener claro que la limitación sobre lo que podemos crear como widget está en nosotros. La flexibilidad de WordPress nos da margen para integrar cualquier cosa que requiera nuestro proyecto web. Si estamos haciendo el desarrollo de un tema, de nosotros dependerá elegir si esa funcionalidad que necesitamos la ofreceremos en forma de widget o no.

Lo primero que haremos será registrar el nuevo widget, para lo que usaremos la función register_widget y después lo lanzaremos usando el hook widgets_init.

<?php

// Registramos un nuevo widget en WordPress
function registrar_widgets() {
    register_widget( 'nombre_widget_ejemplo' );
}
add_action( 'widgets_init', 'nombre_widget_ejemplo' );

Una vez registrado con el nombre que nosotros queramos, es cuando podemos pasar a crear el widget de WordPress en sí. Nosotros vamos a ver cómo lo haríamos si quisiéramos hacer uno que nos permitiera meter un texto corto, por ejemplo para usarlo en el pie de la página.

<?php

// Usamos una nueva clase para extender WP_Widget de WordPress
class nombre_widget_ejemplo extends WP_Widget {
 
	function __construct() {
		parent::__construct(
		 
		// ID del widget
		'nombre_widget_ejemplo', 
		 
		// nombre del widget en el backend
		__('Texto breve', 'dominio_traduccion'), 
		 
		// descripción del widget en el backend
		array( 'description' => __( 'Widget para añadir un breve texto.', 'dominio_traduccion' ), ) 
		);
	}
 
	// front-end del widget
	public function widget( $args, $instance ) {
		$title = apply_filters( 'widget_title', $instance['title'] );
		 
		// los argumentos before y after los definimos en el sidebar
		echo $args['before_widget'];
		if ( ! empty( $title ) )
			echo $args['before_title'] . $title . $args['after_title'];
			echo $args['after_widget'];
	}
         
	// back-end del widget
	public function form( $instance ) {
		if ( isset( $instance[ 'title' ] ) ) {
			$title = $instance[ 'title' ];
		}
		else {
			$title = __( 'Aquí tu texto', 'dominio_traduccion' );
		}
		// input en el back-end
		?>
		<p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Texto:' ); ?></label> 
		<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 ); ?>" /></p>
		<?php 
	}
     
	// actualizamos las instancias
	public function update( $new_instance, $old_instance ) {
		$instance = array();
		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
		return $instance;
	}

}

Guardado el script en el archivo de funciones, podemos pasar a verlo en acción. Pero recuerda que, como comentaba al principio, para poder ubicar nuestro widget en una posición determinada de la página web tendremos que hacerlo dentro de un sidebar. En caso de que el tema donde vayamos a crearlo no tenga y no sabes cómo añadir un sidebar a un tema de WordPress, puedes consultar la esta entrada donde detallo los pasos.

Si el tema ya tiene sidebars, solo te queda que ir al panel de administración y acceder al apartado de «Widgets» que se encuentra en el menú de «Apariencia». Una vez dentro, ya deberías poder usar el widget que has creado.