Crear un Widget para WordPress

Crear un Widget para WordPress

Muchas veces nos gustaría mostrar cierta información en nuestra barra lateral (o Sidebar) de WordPress, y recurrimos a añadir un Widget de texto plano con HTML. Esto está bien, es simple y cómodo, pero sólo para texto estático. En el momento en que queremos algo más dinámico, no podemos (pues no podemos insertar código PHP). Es por ello que lo ideal es crear un Widget para WordPress con el contenido que queramos.

Vamos a empezar con un ejemplo simple, y lo iremos complicando poco a poco.

Creando el Widget

Un Widget se compone de dos partes:

  • Una función que instancia al Widget.
  • Una clase para nuestro Widget, que extiende al objeto WP_Widget.

Ya hemos explicado en más de una ocasión que lo ideal es crear un plugin para nuestro Widget, pero debo decir que sí, que también podéis añadir la función que instancia el Widget en el archivo functions.php. Nosotros crearemos un nuevo plugin, cuyo código es simplemente este:

<?php

/*
Plugin Name: Mi primer Widget
Plugin URI: https://www.codigonexo.com/
Description: Crea un Widget para añadir a cualquier Sidebar.
Version: 1.0
Author: Codigonexo
Author URI: https://www.codigonexo.com/
*/

/**
 * Función que instancia el Widget
 */
function mpw_create_widget(){
    include_once(plugin_dir_path( __FILE__ ).'/includes/widget.php');
    register_widget('mpw_widget');
}
add_action('widgets_init','mpw_create_widget');

?>

Vale, ¿Esto qué hace?

Tras declarar la información del plugin, tenemos la función mpw_create_widget (mpw viene de “Mi Primer Widget”, el nombre de la función podéis cambiarlo como queráis, claro). Esta función hace dos cosas:

  1. Incluir el archivo widget.php, que crearemos en la carpeta wp-content/<nombre_de_tu_plugin>/includes/widget.php. Esta es mi forma de tener los archivos organizados, quizá vosotros prefiráis no usar la carpeta includes, o usar /includes/widget/widget.php. En nuestro caso, lo haremos así.
  2. Registrar el widget en el sistema con la función “register_widget”. Como parámetro, recibe el nombre que le daremos a la clase del Widget que vamos a crear, en este caso, mpw_widget.

La clase de nuestro Widget

Si no hemos creado el archivo widget.php, es el momento de hacerlo. Nuestra clase debe extender a la clase WP_Widget, y debe tener cuatro funciones básicas:

<?php

class mpw_widget extends WP_Widget {

    function mpw_widget(){
        // Constructor del Widget.
    }

    function widget($args,$instance){
        // Contenido del Widget que se mostrará en la Sidebar
    }

    function update($new_instance, $old_instance){
        // Función de guardado de opciones
    }

    function form($instance){
        // Formulario de opciones del Widget, que aparece cuando añadimos el Widget a una Sidebar
    }
}

?>

Esta es una plantilla válida para cualquier Widget que os planteéis crear. Ahora, detengámonos a explicarlas una a una.

La primera función debe llamarse igual que la clase. Es la función constructora, la que se instancia una vez que el Widget es llamado. En esta función, lo básico que debemos hacer es llamar al constructor de WP_Widget con las opciones del Widget:

    function mpw_widget(){
        $widget_ops = array('classname' => 'mpw_widget', 'description' => "Descripción de Mi primer Widget" );
        $this->WP_Widget('mpw_widget', "Mi primer Widget", $widget_ops);
    }

Esto hará que nuestro Widget sea visible en la zona de Widgets de WordPress.

La siguiente función es “widget”. Esta función es la que genera el contenido que se muestra en la zona del Widget, lo que verán tus usuarios en el Front End. Luego lo complicaremos, pero de momento, veamos un ejemplo simple:

    function widget($args,$instance){
        echo $before_widget;
        ?>
        <aside id='mpw_widget' class='widget mpw_widget'>
            <h3 class='widget-title'>Mi Primer Widget</h3>
            <p>¡Este es mi primer Widget!</p>
        </aside>
        <?php
        echo $after_widget;
    }

Activando el Widget

Lista de Widgets

Llegados a este punto, supongo que habéis activado el plugin desde el gestor de plugins de WordPress. Hecho esto, vamos a Apariencia > Widgets, y encontraremos nuestro Widget en la lista de Widgets disponibles. Tan solo tenemos que arrastrarlo a la Sidebar que mejor nos convenga.Widget en la Sidebar

Si no ves tu Widget en la lista, algo has pasado por alto. Revisa las instrucciones hasta aquí.

Finalmente, vamos al Front End y vemos el resultado.

Mi primer Widget

Complicando el Widget con configuración interna

Si nuestro Widget está hecho sólo para mostrar información concreta, y no requiere de configuración interna, habríamos acabado aquí, no serían necesarias más funciones. En el caso de que requiera configuración, entonces debemos crear las funciones update y form.

    function update($new_instance, $old_instance){
        $instance = $old_instance;
        $instance["mpw_texto"] = strip_tags($new_instance["mpw_texto"]);
        // Repetimos esto para tantos campos como tengamos en el formulario.
        return $instance;
    }

La función update se encarga de guardar en la base de datos la configuración establecida para el Widget. Suele seguir una estructura similar a la que vemos siempre, cambiando los parámetros de los campos.

La función form es la que muestra el formulario de configuración del Widget en el Back End de WordPress. Por ejemplo, vamos a mostrar un texto:

    function form($instance){
        ?>
         <p>
            <label for="<?php echo $this->get_field_id('mpw_texto'); ?>">Texto del Widget</label>
            <input class="widefat" id="<?php echo $this->get_field_id('mpw_texto'); ?>" name="<?php echo $this->get_field_name('mpw_texto'); ?>" type="text" value="<?php echo esc_attr($instance["mpw_texto"]); ?>" />
         </p>
         <?php
    }

Las funciones get_field_id y get_field_name las usamos para que el guardado del Widget sea correcto y coherente en cuanto a parámetros.

Widget con formulario de opciones

Ahora debemos adaptar nuestra función widget para que acepte y muestre este texto:

    function widget($args,$instance){
        echo $before_widget;
        ?>
        <aside id='mpw_widget' class='widget myp_widget'>
            <h3 class='widget-title'>Mi Primer Widget</h3>
            <p><?=$instance["mpw_texto"]?></p>
        </aside>
        <?php
        echo $after_widget;
    }

Y podemos comprobar que, efectivamente, aparece el texto que hemos colocado:

Widget con texto personalizable

Y hasta aquí nuestra clase básica sobre cómo crear un Widget para WordPress. Evidentemente, podemos complicar mucho más el Widget, introducir más opciones y campos, pero como suelo decir, eso ya es parte de nuestra imaginación y nuestras necesidades.

Si necesitáis más información, no dudéis en recurrir al Codex de WordPress, o publicad un comentario y os responderemos lo antes posible.

“Hacer lo simple complicado es bastante corriente;
hacer lo complicado simple, sorprendentemente simple, eso es la creatividad”

    — Charles Mingus

Si necesitas una página web en wordpress, no dudéiss en contactar con nosotros. Descubre más,somos expertos en wordpress.

Si necesitas una página web en wordpress, no dudes en contactar con nosotros. Descubre más,somos expertos en wordpress

¿Te ha gustado el artículo?
1 Star2 Stars3 Stars4 Stars5 Stars (1 votos, promedio: 4,00 sobre 5)
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

24 Comentarios

Miguel Jordan

Excelente entrada, super entendible y al punto, muchas gracias!!!... Me trae por aquí un comportamiento a mi parecer extraños de los "Widgets Disponibles", apenas estoy inciandome en el mundo de wordpress y estoy siguiendo algún tutorial que conseguí, en este momento voy por los widgets, pero lo que me sucede, creo que es algo mas básico que lo que Ruben, el autor, esta plantea en esta entrada, apenas cree el nombre de mi zona de widgets, como les muestro a continuación: if ( function_exists( 'register_sidebar' ) ) : $args = array( 'name' => __( 'Sidebar name', 'theme_text_domain' ), 'id' => 'unique-sidebar-id', 'description' => '', 'class' => '', 'before_widget' => '<li id="%1" class="widget %2">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>' ); register_sidebar( $args ); El problema que tengo es que cuando entro en el panel de admin de Worpress-Apariencia-Widgets, y arrastro alguno de los ya disponible "Widgets Disponibles" como por ejemplo "Entradas Recientes" a mi zona de widgets que tal como se ve en el código de arriba se llama "Sidebar name", en un primer momento muestra todo el contenido (los datos de formulario), de dicho widgets pero enseguida todos los campos se colocan oculto Type=Hidden y ya no puedo hacer nada. Caso contrario me pasa con una lista de widgets que aparece justo debajo de "Widgets Disponibles", esta parte se llama "Barra lateral inactiva (no utilizada)", arrastro widgets de esta ultima a mi zona de widgets y se muestran todos los campos de configuración sin ningún problema. Que estoy haciendo mal?. Alguna vez les ha sucedido?   Agradecido de antemano por toda la orientación que puedan brindarme  

Alejandro

Hola Rubén muy buen tutorial, básico pero muy práctico. El llegar hasta aquí es por la necesidad de crear un widget para que muestre ciertos datos de woocommerce, pero no consigo mostrar los datos. Podrías indicarme a partir de tu ejemplo que necesitaría para mostrar por ejemplo la variable $cart_contents_total de la clase WC_Cart de woocommerce? Gracias, un saludo!

Emilio

Excelente tutorial, muy claro. Gracias amigo por compartir :)

Carlos Lizarraga

Ruben disculpa que tipo de API externa recomiendas? los datos los tomaria de la pagina de Banxico Saludos

Rubén Muñoz Autor

Hola Carlos: Lo normal es que tengas una API externa en la que poder hacer las peticiones necesarias y así poder publicar la información financiera o de cualquier otro tipo que quieras.

Carlos Lizarraga

Que tal, genial el post muchas gracias, como puedo hacer para que en este widget se visualice información de tipo de cambio y otra de tipo financiera que se publica en un portal oficial. Mil Gracias

Jesús Uzcátegui

Hola, gracias por el post. Tengo una duda y es por que ando aprendiendo aun, en que archivos hago esos código es que no comprendí esa parte y me disculpan la ignorancia :( pero no comprendí esa parte por favor, ayuda a mi email

José Luís

A mi me ha funcionado pero el plugin no me sale en la lista de plugins instalados de Wordpress. Lo he tenido que subir comprimido (zip) y activarlo. Veo el widget pero el plugin no está en el listado. ¿Alguna idea de qué pasa? Muchas gracias

Paolo

Super interesante! gracias por el aporte...muy claro, seria interesante quizas hacer un widget que incluya hacer un post de un formulario para guardarlo a la BD o algo similar. Saludos!

marcos

Muy bueno. He probado y todo funcionando a la primera. Muchas Gracias.

Ivan

ME SIRVIO MUCHO! APENAS ESTOY COMENZANDO CON WORDPRESS Y QUERIA PONER UN WIDGET DE NOTICIAS DE UNA PAGINA Y CON ESTO FUNCIONO, GRACIAS!!!

julio

Hola maestro , genial tu tutorial . Me gustaria saber como puedo poner mi estacion de radio en Wordpress Realmenteg no tengo ninguna idea e tratado todo pero no puedo pegar el codigo html de mi radio en listen2myradio a wordpress

Juan Esteban Jaramillo

Hola, mi pregunta es la siguiente: ¿Como hacer para poner en una opcion que me permita escoger una pagina especifica y que el texto que muestre sea un extract de esa pagina, al lado de una imagen que sea la imagen principal de esa pagina? Espero recibir una respuesta, muchas gracias.

Reynaldo

GENIO! Muchas gracias! Me sirvió perfectamente.

leonardo martinez

Hola, Necesito crear un widget que muestre el proximo juego de futbol que se llevara a cabo, que muestre la insigna de cada club, asi como la fecha y el lugar donde se jugará, ademas de el resultado. No me queda claro donde pueda guardar esa informacion (tabla) será necesario crear una nueva? Atento a tips que me puedan dar Gracias

Pablo

Vale, me contesto yo solo: Lo de duplicar no vale, provoca "cosas raras". Lo mejor es registrar dentro de la misma función todos los widgets y meter todas las clases de cada widget en el archivo del include.

Pablo

Está genial el post muy ilustrativo me ha servido mucho. :-) Para registrar dos o más widgets ¿bastaría con duplicar la función y cambiarle el nombre a esta y al widget?  

Juan Viñas

Bueno, a decir verdad no sé cómo meter un formulario de login dentro de un Widget, pero antes de ponerte a programar algo así, ¿has pensado en que quizá ya exista un plugin que permita esa funcionalidad? Seguro que antes que a ti a alguien le ha surgido ese problema y ha creado un plugin. Y de hecho, así es. Hay varios plugins que implementan formularios de login en widgets, lo que soluciona tu problema en un primer momento. Y si sigues queriendo hacer uno propio, prueba a descargar uno de los ya existentes y a leer su código. Entiende cómo lo hace, y hazlo parecido pero adaptado a tus necesidades :)

ruiz

Muy interesante, te voy a plantear lo que quiero hacer, me gustaria meter un formulario de login dentro de un widge, me podras ayudar con eso?. saludos   y muy buen tutorial

Daniel P Z

Muchas gracias por al información, me sirvio muchisimo!!!, eres un kapo!!!, personas como tu no deberian morir jamas!!!

Juan Viñas

De nada, me alegro de que te haya gustado. ¿A qué te refieres con más complicado? ¿Tienes alguna duda concreta o hay algo que quieras saber?

iLen

Hola, gracias por el tutorial, más claro no puede estar. Si me gustaria que hagas otro de widget pero más complicado.   Salu2.

Juan Viñas

Me alegra mucho que te haya gustado mi tutorial. He revisado el Codex, y ya hay una entrada sobre creación de Widgets en este enlace, asi que poner dos sobre el mismo tema puede resultar redundante. Lo que sí podrías hacer es enlazar este tutorial en la sección de enlaces. ¡Gracias!

Fabian Delgado

Estimado tu tutorial me sirvió mucho para crear mi primer widget y quisiera compartirlo con la comunidad podría compartirlo en codex? Gracias y saludos