Como programar widgets de WordPress

Los que trabajamos con WordPress sencillamente lo adoramos, sabemos las muchas ventajas que tiene y lo muy bien pensado que está en todos sus aspectos, sencillamente una gran aplicación.

Entre las muchas cosas que nos gusta de WordPress, una de las que a mi particularmente más me gustan es la posibilidad de utilizar "widgets" para modificar la apariencia de nuestro sitio.

Los widgets en resumen son pequeñas "secciones" de nuestro sitio que podemos moverlas de un lado a otro, para hacerlo simple, el listado de mensajes de Twitter o el listado de posts que tengo en mi sitio son widgets, y lo bueno de ellos es que puedo ponerlos en cualquier parte de mi plantilla desde un administrador muy práctico que wordpress tiene.

Lo que hoy voy a contarles es cómo desarrollar su propio widget para WordPress, no es muy complicado pero arranquemos por decir que necesitamos saber PHP y necesitamos conocer algo de WordPress (sientanse libres de preguntar sobre ambas cosas), también, me voy a tomar la libertad de utilizar WordPress 2.8 como base, remarco esto porque hubo cambios a partir de esa versión que hacen que este código no funcione en versiones previas.

Entonces, como primer medida a partir de WordPress 2.8 tenemos una API basada en objetos, siendo así, vamos a trabajar con la clase WP_Widget, heredando de ella el comportamiento básico de un widget y vamos a trabajar sobre el constructor y tres métodos que esta clase nos ofrece:

• widget(): es el responsable de mostrar el contenido real del widget en cuestión. O sea, esta función define lo que se va a ver en la página del blog.
• form(): muestra el formulario de opciones que se ve en el área de configuración de wordpress.
• update(): se encarga de procesar las opciones a ser guardadas, por ejemplo el título del widget (tiene que ver con lo que se hizo en form()).

En resumen:

class Mi_Widget_Ejemplo extends WP_Widget {
    function Mi_Widget_Ejemplo() { // Constructor
    }

    function widget($args, $instance) { // muestra el widget
    }

    function update($new_instance, $old_instance) { //guarda las opciones
    }

    function form($instance) { //muestra el form de opciones
    }
}

register_widget('Mi_Widget_Ejemplo');

El toque final es la funcion register_widget que hace lo que su nombre indica, le informa a WordPress que hay un widget nuevo al que prestar atención.

Ahora que ya vimos el esqueleto y estamos confiados escribamos un ejemplo sencillo:

class Mi_Widget_Ejemplo extends WP_Widget {
    function Mi_Widget_Ejemplo() {
        parent::WP_Widget(false, $name = 'Mi_Widget_Ejemplo');
    }

    function widget($args, $instancia) {
        extract( $args );
        $title = apply_filters('widget_title', $instancia['title']);
        echo $before_widget;
        if ( $title )
            echo $before_title . $title . $after_title;
        echo ("Hola Mundo! Hice mi primer widget");
        echo $after_widget;
    }

    function update($nueva_instancia, $vieja_instancia) {
        return $nueva_instancia;
    }

    function form($instancia) {
        $title = esc_attr($instancia['title']);
    ?>
        <label for="<?php echo $this->get_field_id('title'); ?>">
        <input id="<?php echo $this->get_field_id('title'); ?>" class="widefat" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
        </label>
    <?php
    }
} // class Mi_Widget_Ejemplo

Ahora sí, tenemos un widget que funciona a la perfección, tratemos de comprender el código un poco:

1. En el constructor lo único que hacemos es invocar al constructor de la clase padre
2. La función que muestra el widget lo único que hace es mostrar el archiconocido "Hola Mundo", pero, para que esto funcione de forma correcta un widget debe tener un título y WordPress define un par de variables que tienen contenido a mostrar antes y después de nuestro título. De la misma forma hay contenido que obligatoriamente hay que mostrar antes y después de los widgets para asegurarnos que "encajan" en el template de la forma correcta (sí, hay código HTML).
3. La grabación es prácticamente de manual, la función recibe dos parámetros que identifican a los arrays de opciones de la instancia nueva y la vieja, no hay que nada nada especial para grabar como se puede apreciar, pero esta función sirve para hacer algunos cambios de último momento, por ejemplo, sacar caracteres prohibidos de los campos de formulario que el usuario ingresó durante la configuración del widget.
4. Mostrar el formulario es bastante sencillo, tan sólo tenemos que escribir código HTML correcto, que muestre el input correspondiente, con su nombre y sus valores, nada más.

Falta una aclaración fundamental para el recién iniciado y es que todo lo que escribamos de ir, o estar relacionado de alguna forma (lease, un "include") con el archivo functions.php de nuestra plantilla.

Ahora sí, no hay excusas, a tomar coraje y adentrarse en el desarrollo de sus propios widgets.