Cuando queremos desarrollar nuestro wordpress tenemos varías opciones. Una es comprar o descargar una plantilla con todo definido y si tenemos suerte y sabemos buscar bien, quizás encontremos una que satisfaga todas nuestras necesidades y sea suficientemente customizable para diseñarla a nuestro gusto. La otra sería dedicar parte de nuestro tiempo a buscar la solución que requerimos y crearla. En este tutorial, vamos a mostrar como crear un Widget personalizado en WordPress.

Yo personalmente opto por las dos. Descargar una plantilla que proporcione gran parte de tus necesidades y desarrollarla para completar las deficiencias o carencias. Y no es por dudar del trabajo de otros, pero evidentemente no vamos a encontrar la plantilla perfecta que hace todo por nosotros.

El objetivo que me planteo para escribir en esta sección es la suscripción de usuarios de forma dinámica en mi wordpress por motivos que comentaré en post sucesivos. Pero suponiendo que tengo una serie de usuarios, necesito que su acceso sea claro a través de un widget.

Mi lista de necesidades es la siguiente:

  1. Asociar un widget a la barra lateral para que aparezca un formulario de Log In.
  2. En caso de no estar registrado, crear un botón para acceder a una página de registro que introduzca datos del usuario dentro de WordPress como suscriptor.
  3. Si hay un fallo en alguno de los campos volver a la misma página.
  4. Si el usuario se loguea satisfactoriamente, informar a WordPress de que el usuario entra en su sesión, ofrecer otro tipo de servicios y un botón de para salir de la sesión.

Por partes vamos a explicar la manera de creación de un widget y poco a poco explicaremos los siguientes pasos. Realmente vamos a hacer lo mismo si accedieramos a la carpeta wp-admin de WordPress que te introduce en la sesión de usuario. Pero a diferencia de ésta no queremos ir directamente al menú de configuración de WordPress, sino que nos mantendremos en la misma página, pero existirán algunos cambios que ya vendrán definidos en la sesión por entrar en la sesión.

Para crear un widget, podemos leer en la API de Widgets  la manera de hacerlo. Suponiendo que tenemos conocimientos PHP y bases de programación orientada a objetos quizás podamos comprender algo de lo que aquí nos dicen. Al fin y al cabo no son más que una serie de funciones y métodos ya creados que llamamos sin necesidad de saber cómo están implementados o desde que página son llamados. Lo complicado es que no nos dicen en que fichero hemos de escribir nuestro widget.

Algunas plantillas ya tienen algunos widgets redirigidos a un archivo que suelen llamar widgets.php escondido en algún directorio de carpetas. Pero si no nos queremos liar, lo mejor es crear nuestro Widget al final del fichero functions.php que ya está creada en el directorio de la plantilla y siempre se ejecuta.

Si copiamos el código que nos ofrecen en el link anterior crearemos un widget de forma rápida. La primera parte es la declaración del widget como extensión de un objeto de WordPress “WP_Widget” , en un rato explicaré el modo de definición de constructor y funciones. La segunda parte es la más importante, “add_action()” es una función que sirve para ejecutar cambios de desarrollador, no solo widgets, sino también opciones de configuración en el menú, customización,etc… definidas en el submundo wordpress también denominado Action Reference. Sin la ejecución de add_action no se verán aplicados los cambios y para crear un elemento como widget se deberá de especificar como ‘widgets_init’.

/**
 * FooWidget Class
 */
class FooWidget extends WP_Widget {
    /** constructor */
    function FooWidget() {
        parent::WP_Widget(false, $name = 'FooWidget');
    }

    /** @see WP_Widget::widget */
    function widget($args, $instance) {
        extract( $args );
        $title = apply_filters('widget_title', $instance['title']);
        ?>
              <?php echo $before_widget; ?>
                  <?php if ( $title )
                        echo $before_title . $title . $after_title; ?>
                  Hello, World!
              <?php echo $after_widget; ?>
        <?php
    }

    /** @see WP_Widget::update */
    function update($new_instance, $old_instance) {
	$instance = $old_instance;
	$instance['title'] = strip_tags($new_instance['title']);
        return $instance;
    }

    /** @see WP_Widget::form */
    function form($instance) {
        $title = esc_attr($instance['title']);
        ?>
            <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></label></p>
        <?php
    }

} // clase FooWidget

 

// registrar el widget FooWidget
add_action('widgets_init', create_function('', 'return register_widget("FooWidget");'));