Hace unos días que comence a usar WordPress para crear este mismo blog y ya me encuentro con el gusanillo de aprender a crear mis propios widgets personalizados para agregar complementos nuevos y aparte por aprender algo nuevo. Después de realizar varias lecturas e informarme un poco, he decidido crear este post resumiendo los pasos a seguir para crear nuestro propio widget personalizado para wordpress.

Los pasos a realizar son:

  1. Crear archivo del Widget
  2. Constructor. Configuración del Widget.
  3. Form. Formulario de configuración del Widget desde Panel de Control
  4. Update. Actualizando Contenido del Widget
  5. Widget. Visualización del Widget en Front-End
  6. Ejemplo Widget. Agrega iconos de tus redes sociales.
  7. Conclusión

1. Crear archivo del Widget

Para crear nuestro widget de cero vamos a crear un nuevo archivo .php en la ruta /wp-content/plugins/my-widget/ con el siguiente código:

/*
Plugin Name: My Widget
Plugin URI: http://wordpress.org/extend/plugins/#
Description: This is an example plugin 
Author: Your Name
Version: 1.0
Author URI: http://example.com/
*/

En este fichero incluiremos toda la funcionalidad del widget. Al guardar el fichero vemos que el widget ya aparece en el apartado de plugins junto al resto de plugins que tengamos instalados. Ahora hay que registrar el nuevo widget en el momento en el que wordpress inicializa todos los widgets. Para ello agregamos el siguiente código:

// register My_Widget
add_action( 'widgets_init', function(){
register_widget( 'My_Widget' );
});

“My_Widget” es la clase php que vamos a crear encargada del comportamiento del widget. Debe de extender de la clase WP_Widget.

class My_Widget extends WP_Widget {
// class constructor
public function __construct() {}

// output the widget content on the front-end
public function widget( $args, $instance ) {}

// output the option form field in admin Widgets screen
public function form( $instance ) {}

// save options
public function update( $new_instance, $old_instance ) {}
}

Las siguientes 4 funciones son necesarias  para cualquier widget que hagamos:

  • __construct es el constructor de clase y permite establecer parámetros de widget personalizados.
  • widget() repite el contenido del widget en el front-end.
  • form() tiene como salida los elementos de formulario del widget admin.
  • update() actualiza el objeto de widget actual.

2. Constructor. Configuración del Widget.

Asignamos el id y nombre del widget. También podemos agregar otros atributos como descripción, anchura, altura, etc.

    // class constructor
    public function __construct()
    {
        $widget_ops = array(
            'classname' = 'my_widget',
            'description' = 'Mi primer plugin',
        );
        parent::__construct('my_widget', 'Mi primer widget', $widget_ops);
    }
  • my_widget es la Base ID para el widget
  • ‘My Widget’ es el título del widget
  • $widget_ops es un array con los atributos del widget

3. Form. Formulario de configuración del Widget desde Panel de Control

La función form() function obtiene como argumento un array ($instance) con las opciones del widget actual.

    public function form( $instance ) {

        $title = !empty($instance['title']) ? $instance['title'] : esc_html__('Title', 'text_domain');
        ?>
            <label for="<?php echo esc_attr($this-get_field_id('title')); ?>">
                <?php esc_attr_e('Title:', 'text_domain'); ?>
            </label>

            <input
                    class="widefat"
                    id="<?php echo esc_attr($this-get_field_id('title')); ?>"
                    name="<?php echo esc_attr($this-get_field_name('title')); ?>"
                    type="text"
                    value="<?php echo esc_attr($title); ?>">
        <?php
    }

Con las funciones get_field_id y get_field_name  obtenemos el ID y el nombre para asignarlos al campo de texto.

Vamos a agregarle algo más de funcionalidad. Como mostrar los 20 ultimos post y mostrar un check por cada uno.

public function form( $instance ) {
        $posts = get_posts(array(
            'posts_per_page' = 20,
            'offset' = 0
        ));
        $selected_posts = !empty($instance['selected_posts']) ? $instance['selected_posts'] : array();
        ?>  
    
        <div style="max-height: 120px; overflow: auto;">
        <ul>
            <?php foreach ($posts as $post) { ?>
                  <li>
                       <input
                          type="checkbox"
                          name="<?php echo esc_attr($this-get_field_name('selected_posts')); ?>[]"
                          value="<?php echo $post-ID; ?>"
                          <?php checked((in_array($post-ID, $selected_posts)) ? $post-ID : '', $post-ID); ?> />
                          <?php echo get_the_title($post-ID); ?>
                 </li>
            <?php } ?>
        </ul>
        </div>

        <?php
}

Con lo hecho hasta ahora debemos tener un formulario de administración del widget como se muestra en la siguiente imagen

widget wordpress desde cero

4. Update. Actualizando Contenido del Widget

    // save options
    public function update($new_instance, $old_instance)
    {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';

        $selected_posts = (!empty ($new_instance['selected_posts'])) ? (array)$new_instance['selected_posts'] : array();
        $instance['selected_posts'] = array_map('sanitize_text_field', $selected_posts);

        return $instance;
    }

La funcion  update() actualiza una instancia de un widget. Los dos argumentos que obtiene son:

  • $new_instance es un array de configuraciones tal como fue presentada por el usuario
  • $old_instance es un array de configuraciones almacenadas en la base de datos

5. Widget. Visualización del Widget en Front-End

Para mostrar el contenido del widget en el front-end usamos la funcion  widget() .

    // output the widget content on the front-end
    public function widget($args, $instance)
    {
        echo $args['before_widget'];
        if (!empty($instance['title'])) {
            echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
        }

        if (!empty($instance['selected_posts'])  is_array($instance['selected_posts'])) {
            $selected_posts = get_posts(array('post__in' = $instance['selected_posts']));
            ?>
        <ul>
            <?php foreach ($selected_posts as $post) { ?>
            <li>
                 <a href="<?php echo get_permalink($post-ID); ?>"
                    <?php echo $post-post_title; ?>
                 </a>
            </li>
            <?php } ?>
        </ul>
        <?php>

        } else {
            echo esc_html__('No posts selected!', 'text_domain');
        }

        echo $args['after_widget'];
    }

Los argumentos de la función widget():

  • $args es un array de argumentos incluyendo ‘before_title’‘after_title’‘before_widget’, y ‘after_widget’
  • $instance es un array de configuraciones de widget

En esta función contamos con variables como $before_widget, $after_widget,  $before_title $after_titleSon argumentos que podemos pasar cuando registramos un área de Widgets. Si buscamos en el código de cualquier plantilla la zona donde se agregan los widgets nos encontraremos con un código similar al siguiente:

// Main
register_sidebar( array (
  'name'        => __( 'Main Sidebar','wpex'),
  'id'        => 'sidebar',
  'description'    => __( 'Widgets in this area are used in the default sidebar. This sidebar will be used for your standard blog posts.','wpex' ),
  'before_widget'  => '
<div class="sidebar-box %2$s clr">',
  'after_widget'    => '</div>

',
  'before_title'    => '<'. $wpex_sidebar_headings .' class="widget-title">',
  'after_title'    => '</'. $wpex_sidebar_headings .'>',
) );

6. Ejemplo Widget. Agrega iconos de tus Redes Sociales.

Como veis el procedimiento seguido para crear nuestros propios widgets personalizados en wordpress es bastante sencillo. A continuación os dejo un widget de lo más sencillo que he hecho de ejemplo aplicando lo explicado en este post.

El widget nos permite introducir las url de nuestras redes sociales y mostrar los iconos de cada una con su correspondiente enlace. En la siguiente imagen vemos el formulario de edición.

widget wordpress desde cero

Si dejamos vacio el campo url de alguna de las redes sociales, esta no aparecerá en la vista.

El código del widget es el siguiente

Tanto el código php como el del css de este widget lo podeis descargar desde mi GitHub aqui.

7. Conclusión

Con lo visto en este post sobre como crear un widget desde cero ya deberias ser capaz de realizar cualquier tipo de widget. De ti depende crear uno más o menos complejo (agregandole librerias, consultas a APIs, etc,).

Cualquier duda o sugerencia no dudeis en comentar! ^^

Comparte el post