Guía básica para crear Widgets en WordPress


Guia basica para crear Widgets en WordPress, en esta parte veremos solo componentes sencillos como campos de textos, campos numericos, …  en las proximas guias veremos como crear widgets serios.

Estructura de un Widget

La mejor manera de crearse un widget es crearse un fichero con extension .php por ejemplo nombretuwidget.php donde el nombretuwidget es un nombre inventado para que pongas el tuyo.  Y este fichero lo incluiras en functions.php

Los widgets extienden de la clase WP_Widget de WordPress y están compuesto por las siguientes funciones.

  • Constructor donde definiremos el titulo , descripción,..
  • Función widget: en este función pintaremos el html que se mostrara en nuestro tema.
  • Función form: en esta función crearemos el formulario que veremos en la zona de widgets
  • Función update: En esta función actualizaremos los datos.

 

class nombretuwidget extends WP_Widget {

	public function __construct() {

	}

	public function widget( $args, $instance ) {

	}

	public function form( $instance ) {

	}

	public function update( $new_instance, $old_instance ) {

	}

}

function prefijodemowidget_register_widgets() {
	register_widget( 'nombretuwidget' );
}
add_action( 'widgets_init', 'prefijodemowidget_register_widgets' );

 

Personalizando titulo, descripción , id, clase css

Ahora que habeis visto la configuracion de un widget en WordPress vamos a personalizar el constructor.

Al extender de la clase WP_Widget vamos a llamar al constructor del padre así que os pongo el código que sustituiremos por la función constructor. Al final del articulo dejare el ejemplo completo pero quiero que vayáis parte por parte sabiendo que campos poner.

id_widget: este es el atributo id que saldrá en el widget al publicar el html
titulo del widget : este es el titulo que aparecerá en el widget
descripcion del widget: este texto es el que tendremos para explicar el widget
classname: este campo es la clase css de tu widget

 

ejemplodewidget

Como veréis los textos los pone tal que así:

Esto es para traducirlo, donde demo_domain es el nombre de vuestro tema para la traducción.

__( 'Mi primer super widget', 'demo_domain' ),

 

La Función Constructor de tu widget

	public function __construct() {

		parent::__construct(
			'id_widget',
			__( 'Mi primer super widget', 'demo_domain' ),
			array(
				'description' => __( 'Esta es una pequeña descripcion del widget', 'demo_domain' ),
				'classname'   => 'clase_css_widget',
			)
		);

	}

 

Campos personalizados en tu Widget

Vamos a ver la lista de campos que podemos utilizar en nuestros widget, desde campo de texto, textarea , selectores, ….

Cuando trabajamos con campos tenéis que saber que tenemos que recoger esa información, guardarla, editarla, pintarla o imprimirla en la web. Entonces tenemos que tocar en todas las funciones que hemos visto al comienzo de esta guía.

Para ponernos en situación vamos a ir viendo muchos tipos de campos para nuestros widget y vamos a comenzar con un ejemplo genérico el típico campo de texto.

ejemplo-de-creacion-de-widget-en-wordpress

CAMPO BASICO DE TIPO TEXTO

Vamos a añadir un campo de texto que se llame «campotexto1»

  • Tipo de campo: text
  • id del campo de texto: campotexto1
  • Etiqueta: campo de texto
  • Descripción: esto es un campo de texto
  • Placeholder: valor a modo de descripción que se suele usar sino se pone etiqueta o para indicar un formato como fechas ,…
  • Valor por defecto: Este valor por ejemplo si usas cantidades puedes poner uno, un color puedes poner el blanco #ffffff,….

Como os comentaba, vamos a ir por partes por un lado tenemos que pintar ese campo de texto en nuestro widget para eso usamos la funcion form

  1. Lo primero que hacemos es declarar nuestros campos
  2. Cargamos la información que viene la base de datos
  3. Un ejemplo de como pintar el campo . Aquí hay muchas etiquetas, se puede reducir yo he puesto todos los campos como descripción,… pero os pongo un ejemplo sin tanto código

 

public function form( $instance ) {

 // Valores por defecto
 $instance = wp_parse_args( (array) $instance, array( 
 'demowp_demo_title' => '',
 'demowp_campotexto' => '',
 ) );

 // Si existen datos en la bsae de datos los recogemos para mostrarlos
 $demowp_campotexto = !empty( $instance['demowp_campotexto'] ) ? $instance['demowp_campotexto'] : '';
 
 echo '<p>';
 echo ' <label for="' . $this->get_field_id( 'demowp_campotexto' ) . '" class="demowp_campotexto_label">' . __( 'campo texto', 'text_domain' ) . '</label>';
 echo ' <input type="text" id="' . $this->get_field_id( 'demowp_campotexto' ) . '" name="' . $this->get_field_name( 'demowp_campotexto' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $demowp_campotexto ) . '">';
 echo '</p>';

 }

 

Como actualizar los campos en un Widget

Cogemos los datos de la variable  $new_instance y los pasamos a $instance y hacemos un return. Al principio hacemos una copia de lo antiguo $old_instance porque puede ser que haya campos que no queramos actualizar.

 

// Función para actualizar la informacion
public function update( $new_instance, $old_instance ) {

 $instance = $old_instance;

 $instance['demowp_campotexto'] = !empty( $new_instance['demowp_campotexto'] ) ? strip_tags( $new_instance['demowp_campotexto'] ) : '';

 return $instance;

 }

 

Como pintar el widget

public function widget( $args, $instance ) {

	 	$text  = apply_filters( 'widget_text',  empty( $instance['demowp_campotexto']  ) ? '' : $instance['demowp_campotexto'],  $instance );

		// Before widget tag
		echo $args['before_widget']; 
		  

		// Text
		echo '<div class="textwidget">' . $text . '</div>';

		// After widget tag
		echo $args['after_widget'];

	}

 

 

Asi quedaria nuestro ejemplo completo.

class demowp_widget extends WP_Widget {

 public function __construct() {

 parent::__construct(
 'id_widget',
 __( 'Mi primer super widget', 'demo_domain' ),
 array(
 'description' => __( 'Esta es una pequeña descripcion del widget', 'demo_domain' ),
 'classname' => 'clase_css_widget',
 )
 );

 }

 public function widget( $args, $instance ) {

 $text = apply_filters( 'widget_text', empty( $instance['demowp_campotexto'] ) ? '' : $instance['demowp_campotexto'], $instance );

 // Before widget tag
 echo $args['before_widget']; 
 

 // Text
 echo '<div class="textwidget">' . $text . '</div>';

 // After widget tag
 echo $args['after_widget'];

 }
 public function form( $instance ) {

 // Valores por defecto
 $instance = wp_parse_args( (array) $instance, array( 
 'demowp_demo_title' => '',
 'demowp_campotexto' => '',
 ) );

 // Si existen datos en la bsae de datos los recogemos para mostrarlos
 $demowp_campotexto = !empty( $instance['demowp_campotexto'] ) ? $instance['demowp_campotexto'] : '';
 
 echo '<p>';
 echo ' <label for="' . $this->get_field_id( 'demowp_campotexto' ) . '" class="demowp_campotexto_label">' . __( 'campo texto', 'text_domain' ) . '</label>';
 echo ' <input type="text" id="' . $this->get_field_id( 'demowp_campotexto' ) . '" name="' . $this->get_field_name( 'demowp_campotexto' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $demowp_campotexto ) . '">';
 echo '</p>';

 }
 
 // Función para actualizar la informacion
 public function update( $new_instance, $old_instance ) {

 $instance = $old_instance;

 $instance['demowp_campotexto'] = !empty( $new_instance['demowp_campotexto'] ) ? strip_tags( $new_instance['demowp_campotexto'] ) : '';

 return $instance;

 }

}

function demowp_register_widgets() {
 register_widget( 'demowp_widget' );
}
add_action( 'widgets_init', 'demowp_register_widgets' );

 

CAMPO BASICO DE TIPO TEXTAREA

Hemos visto como crear un campo de texto en un Widget . Con todos campos aunque se pueden poner mas label , campo , placeholder.

Ahora vamos a ver como generar un TextArea y voy a dejar dos campos un input tipo text y un textarea para que veais la forma de ir añadiendo mas campos.

Como veis se van añadiendo un campo detras de otro y listo.

Pintamos los valores por defecto , si los dejarais en blanco podeis dejarlo tal que asi. El ejemplo_ es un prefijo nos sirve para para diferenciar.

Aqui tenemos dos campos con valor por defecto a nada 😛

$instance = wp_parse_args( (array) $instance, array( 
            'ejemplo_campotextarea' => '',
            'ejemplo_campotext' => '',
        ) );

Recogemos los valores de la base de datos

 $ejemplo_campotextarea = !empty( $instance['ejemplo_campotextarea'] ) ? $instance['ejemplo_campotextarea'] : '';
 $ejemplo_campotext = !empty( $instance['ejemplo_campotext'] ) ? $instance['ejemplo_campotext'] : '';

Por ultimo crearmos los campos de texto en html

Lo normal seria haer un echo no 6 😛  pero asi lo podeis ver mejor .

 echo '<p>';
 echo '    <textarea id="' . $this->get_field_id( 'ejemplo_campotextarea' ) . '" name="' . $this->get_field_name( 'ejemplo_campotextarea' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '">' . $ejemplo_campotextarea . '</textarea>';
 echo '</p>';

 echo '<p>';
 echo '    <input type="text" id="' . $this->get_field_id( 'ejemplo_campotext' ) . '" name="' . $this->get_field_name( 'ejemplo_campotext' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $ejemplo_campotext ) . '">';
 echo '</p>';

 

CAMPO TIPO NUMERO

En este ejemplo vereis como mostrar un tipo numero en la funcion form y en el update

public function form( $instance ) {

	 
		$instance = wp_parse_args( (array) $instance, array(  
			'custom_numero' => '5', 
		) );

	 	$custom_numero = !empty( $instance['custom_numero'] ) ? $instance['custom_numero'] : '';
	 

		echo '<p>';
		echo '	<input type="number" id="' . $this->get_field_id( 'custom_numero' ) . '" name="' . $this->get_field_name( 'custom_numero' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $custom_numero ) . '">';
		echo '</p>'; 
		 
	}

	public function update( $new_instance, $old_instance ) {

		$instance = $old_instance;

	 	$instance['custom_numero'] = !empty( $new_instance['custom_numero'] ) ? strip_tags( $new_instance['custom_numero'] ) : '';
	 
		return $instance;

	}

 

 

CAMPO TIPO PASSWORD

public function form( $instance ) {

	 	$instance = wp_parse_args( (array) $instance, array(  
			'custom_password' => '', 
		) );

	 	$custom_password = !empty( $instance['custom_password'] ) ? $instance['custom_password'] : ''; 

	 
		echo '<p>';
		echo '	<input type="password" id="' . $this->get_field_id( 'custom_password' ) . '" name="' . $this->get_field_name( 'custom_password' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $custom_password ) . '">';
		echo '</p>';

		 

	}

	public function update( $new_instance, $old_instance ) { 
		$instance = $old_instance; 
		$instance['custom_password'] = !empty( $new_instance['custom_password'] ) ? strip_tags( $new_instance['custom_password'] ) : '';
	  	return $instance; 
	}

 

 

CAMPO TIPO BOOLEAN

         public function form( $instance ) {

	 	$instance = wp_parse_args( (array) $instance, array( 
	         'custom_booleano' => '',
		) );

		 	 $custom_booleano = !empty( $instance['custom_booleano'] ) ? $instance['custom_booleano'] : '';

	 
		echo '<p>';
		echo '	<label>';
		echo '		<input type="checkbox" id="' . $this->get_field_id( 'custom_booleano' ) . '" name="' . $this->get_field_name( 'custom_booleano' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="1" ' . checked( $custom_booleano, true, false ) . '>' . __( '', 'text_domain' );
		echo '	</label><br>';
		echo '</p>';

	}

	public function update( $new_instance, $old_instance ) { 
		$instance = $old_instance;
        $instance['custom_booleano'] = !empty( $new_instance['custom_booleano'] ) ? true : false; 
		return $instance; 
	}

 

 

CAMPO TIPO EMAIL

Campo email es igual solo cambia type=»email» frente a un text o un url ,…

echo '<p>';
	echo '	<input type="email" id="' . $this->get_field_id( 'custom_email' ) . '" name="' . $this->get_field_name( 'custom_email' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $custom_email ) . '">';
echo '</p>';

 

CAMPO TIPO URL

Campo Url lo unico que cambiamos es el type que es de tipo url

echo '<p>';
   echo '	<input type="url" id="' . $this->get_field_id( 'custom_url' ) . '" name="' . $this->get_field_name( 'custom_url' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $custom_url ) . '">';
echo '</p>';

 

 CAMPO SELECT, RADIO, CHECKBOX

Voy a poner un ejemplo con los tres tipos que tenemos, selector o select , radiobutton y con checkbox en las funciones .

Para ello he cogido como tematica el sexo y tenemos dos valores hombre y mujer.  Cada variable es diferente para que no me de problema en las capturas.

  • radiobutton la variable es $ejemplo_sexoradio
  • checkbox la variable es $ejemplo_sexocheckbox
  • select la varaible es $ejemplo_sexoselect

 

public function form( $instance ) {

		// valores por defecto
		$instance = wp_parse_args( (array) $instance, array( 
			'ejemplo_sexocheckbox' => array(),
			'ejemplo_sexoradio' => '',
			'ejemplo_sexoselect' => '',
		) );

		// recogemos los datos del checkbox
		$ejemplo_sexocheckbox = isset( $instance['ejemplo_sexocheckbox'] ) ? $instance['ejemplo_sexocheckbox'] : array();
		
		// recogemos los datos del radiobutton
		$ejemplo_sexoradio = !empty( $instance['ejemplo_sexoradio'] ) ? $instance['ejemplo_sexoradio'] : '';
		
		// recogemos los datos en el select
		$ejemplo_sexoselect = !empty( $instance['ejemplo_sexoselect'] ) ? $instance['ejemplo_sexoselect'] : '';

		// Ejemplo de mostrar el checkbox
		echo '<p>';
		echo '	<label for="' . $this->get_field_id( 'ejemplo_sexocheckbox' ) . '" class="ejemplo_sexocheckbox_label">' . __( 'Elige una opcion', 'text_domain' ) . '</label><br>';
		echo '	<label>';
		echo '		<input type="checkbox" name="' . $this->get_field_name( 'ejemplo_sexocheckbox' ) . '[]" value="hombre" ' . ( in_array( 'hombre', $ejemplo_sexocheckbox )? 'checked="checked"' : '' ) . '> ' . __( 'hombre', 'text_domain' );
		echo '	</label><br>';
		echo '	<label>';
		echo '		<input type="checkbox" name="' . $this->get_field_name( 'ejemplo_sexocheckbox' ) . '[]" value="mujer" ' . ( in_array( 'mujer', $ejemplo_sexocheckbox )? 'checked="checked"' : '' ) . '> ' . __( 'mujer', 'text_domain' );
		echo '	</label><br>';
		echo '</p>';

		
		// ejemplo de mostrar el radiobutton
		echo '<p>';
		echo '	<label for="' . $this->get_field_id( 'ejemplo_sexoradio' ) . '" class="ejemplo_sexoradio_label">' . __( 'tipo sexo', 'text_domain' ) . '</label><br>';
		echo '	<label>';
		echo '		<input type="radio" name="' . $this->get_field_name( 'ejemplo_sexoradio' ) . '" value="ejemplo_hombre" ' . checked( $ejemplo_sexoradio, 'ejemplo_hombre', false ) . '> ' . __( 'hombre', 'text_domain' );
		echo '	</label><br>';
		echo '	<label>';
		echo '		<input type="radio" name="' . $this->get_field_name( 'ejemplo_sexoradio' ) . '" value="ejemplo_mujer" ' . checked( $ejemplo_sexoradio, 'ejemplo_mujer', false ) . '> ' . __( 'mujer', 'text_domain' );
		echo '	</label><br>';
		echo '</p>';

		// ejemplo de mostrar el select
		echo '<p>';
		echo '	<label for="' . $this->get_field_id( 'ejemplo_sexoselect' ) . '" class="ejemplo_sexoselect_label">' . __( 'sexo con select', 'text_domain' ) . '</label>';
		echo '	<select id="' . $this->get_field_id( 'ejemplo_sexoselect' ) . '" name="' . $this->get_field_name( 'ejemplo_sexoselect' ) . '" class="widefat">';
		echo '		<option value="hombre" ' . selected( $ejemplo_sexoselect, 'hombre', false ) . '> ' . __( 'hombre', 'text_domain' ) . '</option>';
		echo '		<option value="mujer" ' . selected( $ejemplo_sexoselect, 'mujer', false ) . '> ' . __( 'mujer', 'text_domain' ) . '</option>';
		echo '	</select>';
		echo '</p>';

	}

	public function update( $new_instance, $old_instance ) {

		$instance = $old_instance;

		// actualizamos el checkbox
		$instance['ejemplo_sexocheckbox'] = !empty( $new_instance['ejemplo_sexocheckbox'] ) ? array_map( 'strip_tags', $new_instance['ejemplo_sexocheckbox'] ) : array();
		
		// actualizamos el radiobutton
		$instance['ejemplo_sexoradio'] = !empty( $new_instance['ejemplo_sexoradio'] ) ? $new_instance['ejemplo_sexoradio'] : '';
	
		// actualizamos el select
    	        $instance['ejemplo_sexoselect'] = !empty( $new_instance['ejemplo_sexoselect'] ) ? strip_tags( $new_instance['ejemplo_sexoselect'] ) : '';

		return $instance;

	}