Elementor Widget Integration

Xe Plugin includes built-in auto-discovery and category management for Elementor page builder widgets.

---

Automatic Widget Discovery

The Xe_Plugin\Elementor service automatically scans the src/Elementor/ directory for any widget classes, registers them with Elementor's Widgets_Manager, and creates a dedicated widget category in the Elementor editor sidebar.

namespace Xe_Plugin;

class Elementor {

  public function register(): void {
    add_action( 'elementor/elements/categories_registered', [ $this, 'categories' ] );
    add_action( 'elementor/widgets/register', [ $this, 'widgets' ] );
  }

  public function widgets( $widgets_manager ) {
    $widget_files = glob( _xe_plugin()->path() . 'Elementor/*.php' );

    foreach ( $widget_files as $file ) {
      require_once $file;
      $class_name = '\\Xe_Plugin\\Elementor\\' . basename( $file, '.php' );

      if ( class_exists( $class_name ) ) {
        $widgets_manager->register( new $class_name() );
      }
    }
  }

  public function categories( $elements_manager ) {
    $elements_manager->add_category(
      '_xe_plugin', [
        'title' => esc_html__( 'Xe Plugin', 'xe-plugin' ),
        'icon'  => 'fa fa-cube',
      ]
    );
  }

}

---

Scaffolding New Widgets

To create a new Elementor widget, run the CLI generator:

php xe make:elementor HeroSection

This creates src/Elementor/HeroSection.php using stubs/MakeElementor.stub.

---

Widget Structure

namespace Xe_Plugin\Elementor;

class HeroSection extends \Elementor\Widget_Base {

  public function get_name() {
    return 'herosection';
  }

  public function get_title() {
    return esc_html__( 'Hero Section', 'xe-plugin' );
  }

  public function get_icon() {
    return 'fas fa-heading';
  }

  public function get_categories() {
    return ['_xe_plugin'];
  }

  protected function register_controls() {

    // Content Section
    $this->start_controls_section(
      'content_section', [
        'label' => esc_html__( 'Content', 'xe-plugin' ),
        'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
      ]
    );

    $this->add_control(
      'heading', [
        'label'   => esc_html__( 'Heading', 'xe-plugin' ),
        'type'    => \Elementor\Controls_Manager::TEXT,
        'default' => esc_html__( 'Our Services', 'xe-plugin' ),
      ]
    );

    $this->end_controls_section();

    // Style Section
    $this->start_controls_section(
      'style_section', [
        'label' => esc_html__( 'Style', 'xe-plugin' ),
        'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
      ]
    );

    $this->add_control(
      'heading_color', [
        'label'   => esc_html__( 'Heading Color', 'xe-plugin' ),
        'type'    => \Elementor\Controls_Manager::COLOR,
        'default' => '#000000',
      ]
    );

    $this->end_controls_section();

  }

  protected function render() {
    $settings      = $this->get_settings_for_display();
    $heading       = $settings['heading'];
    $heading_color = $settings['heading_color'];
    ?>
    <div class="hero-section">
      <h2 style="color: <?php echo esc_attr( $heading_color ); ?>;">
        <?php echo esc_html( $heading ); ?>
      </h2>
    </div>
    <?php
  }

}