Crear un widget personalizado para Elementor paso a paso

Si trabajas con Elementor en WordPress, seguramente ya sabes lo útil que es para diseñar páginas de forma visual. Pero si eres desarrollador o estás aprendiendo, también puedes crear tus propios widgets personalizados para ampliar sus funcionalidades.

En este artículo te explico cómo crear un widget básico para Elementor desde cero. Ideal para añadirlo en un plugin o en tu tema.

Estructura del plugin

Primero, vamos a crear una carpeta para nuestro plugin con la siguiente estructura:

/mi-widget-elementor/
│
├── mi-widget-elementor.php
└── widgets/
    └── saludo-widget.php

El archivo principal (mi-widget-elementor.php) se encargará de inicializar el plugin y registrar el widget personalizado.

<?php
/**
 * Plugin Name: Mi Widget Elementor
 * Description: Un widget personalizado para Elementor que muestra un saludo.
 * Version: 1.0
 * Author: Tu Nombre
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

function cargarWidgetPersonalizadoElementor( $widgetsManager ) {
    require_once plugin_dir_path( __FILE__ ) . 'widgets/saludo-widget.php';

    $widgetsManager->register( new \SaludoWidget() );
}
add_action( 'elementor/widgets/register', 'cargarWidgetPersonalizadoElementor' );

Crear el widget: saludo-widget.php

Ahora vamos a crear un widget simple que muestre un saludo. Este widget te permitirá escribir un mensaje desde Elementor y mostrarlo donde quieras en tu página.

<?php

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

class SaludoWidget extends Widget_Base {

    public function getName() {
        return 'saludoWidget';
    }

    public function getTitle() {
        return 'Saludo Personalizado';
    }

    public function getIcon() {
        return 'eicon-person';
    }

    public function getCategories() {
        return [ 'general' ];
    }

    protected function registerControls() {
        $this->startControlsSection(
            'contenidoSeccion',
            [
                'label' => 'Contenido',
                'tab'   => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->addControl(
            'textoSaludo',
            [
                'label'       => 'Mensaje',
                'type'        => Controls_Manager::TEXT,
                'default'     => '¡Hola, mundo!',
                'placeholder' => 'Escribe un mensaje...',
            ]
        );

        $this->endControlsSection();
    }

    protected function render() {
        $config = $this->getSettingsForDisplay();
        echo '<div class="mi-saludo-widget">' . esc_html( $config['textoSaludo'] ) . '</div>';
    }
}

Activar y probar el widget

1. Sube la carpeta mi-widget-elementor al directorio wp-content/plugins/.
2. Activa el plugin desde el panel de administración de WordPress.
3. Abre cualquier página con Elementor y busca el widget llamado “Saludo Personalizado”.
4. Agrégalo a tu diseño y escribe el mensaje que desees mostrar.

Resultado

Este widget mostrará el texto que hayas escrito desde Elementor, justo donde lo insertes. Es una buena base para crear widgets más avanzados con más campos y opciones.

Crear widgets personalizados para Elementor te permite tener un control total sobre lo que muestras en tu sitio. Este ejemplo es básico, pero puedes expandirlo fácilmente con más controles, estilos o funcionalidades.

Related posts:

Crear un admin AJAX personalizado y más ligero en WordPress Crear campo personalizado en el checkout de WooCommerce Cómo Construir un Endpoint Personalizado en WordPress Crear un shortcode para mostrar el SKU de un producto en WooCommerce