Membuat Kustom Widget Elementor Tanpa Plugin (Step by Step)

Pasti udah gak asing lagi kan dengan Plugin Elementor? Elementor adalah page builder WordPress yang sangat fleksibel. Anda dapat membangun website wordpress dengan mudah, cuma drag and drop saja.

Elementor memiliki banyak fitur, salah satunya adalah Widget. Widget ini berfungsi untuk membantu Anda menambahkan teks, video, tabel dan lainnya tanpa harus ngoding.

Namun dalam beberapa kasus, widget bawaan Elementor tidak cukup untuk memenuhi kebutuhan desain atau fitur tertentu. Apalagi kalau menggunakan elementor versi FREE tentu saja banyak widget yang gak bisa dipakai.

Solusinya adalah membuat kustom widget Elementor sendiri.

Kabar baiknya, Anda tidak selalu perlu membuat plugin baru. kustom widget Elementor juga bisa dibuat langsung melalui file functions.php di theme WordPress.

Tapi, kalau widget yang akan dibuat banyak, alangkah baiknya membuat plugin sendiri.

Pada tutorial ini kita akan membuat widget sederhana yang menampilkan Heading dan Text, sekaligus memahami fungsi setiap bagian kode widget Elementor.

1. Menambahkan Hook Register Widget

Langkah pertama adalah mendaftarkan widget ke Elementor menggunakan hook elementor/widgets/register.

Tambahkan kode berikut ke dalam file functions.php.

add_action('elementor/widgets/register', function($widgets_manager){

});

Penjelasan

Hook ini digunakan untuk memberi tahu Elementor bahwa kita ingin mendaftarkan widget baru.

Parameter $widgets_manager adalah object yang digunakan Elementor untuk mengelola semua widget. Melalui object ini kita bisa menambahkan widget custom yang kita buat.

Baca juga: Cara Cepat Migrasi Halaman Elementor tanpa Error

2. Membuat Class Widget Elementor

Setelah hook dibuat, langkah berikutnya adalah membuat class widget.

class Simple_Heading_Text_Widget extends \Elementor\Widget_Base {

}

Penjelasan

Semua widget Elementor harus menggunakan class yang extends Widget_Base. Class ini merupakan fondasi utama yang menyediakan fungsi standar seperti:

• nama widget
• kategori widget
• icon widget
• controls editor
• output HTML

Dengan mewarisi Widget_Base, widget kita akan dikenali oleh sistem Elementor.

3. Menentukan Identitas Widget

Selanjutnya kita harus menentukan identitas widget.

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

public function get_title() {
    return 'Simple Heading Text';
}

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

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

Penjelasan Fungsi

Penjelasan secara singkat dari kode diatas adalah:

get_name()

Digunakan sebagai ID unik widget. Nilai ini tidak boleh sama dengan widget lain.

get_title()

Menentukan nama widget yang muncul di panel Elementor editor.

get_icon()

Menentukan icon widget di panel Elementor. Elementor menggunakan library icon sendiri seperti eicon-heading, eicon-text, dan lain-lain.

get_categories()

Menentukan widget akan muncul di kategori mana di panel Elementor. Contohnya:

• general
• basic
• layout

4. Membuat Control di Editor Elementor

Bagian ini adalah yang paling penting dalam pembuatan widget.

protected function register_controls() {

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

    $this->add_control(
        'heading',
        [
            'label' => 'Heading',
            'type' => \Elementor\Controls_Manager::TEXT,
            'default' => 'This is heading',
        ]
    );

    $this->add_control(
        'text',
        [
            'label' => 'Text',
            'type' => \Elementor\Controls_Manager::TEXTAREA,
            'default' => 'This is description text',
        ]
    );

    $this->end_controls_section();
}

Penjelasan Fungsi

protected function register_controls()

Fungsi ini digunakan untuk membuat field pengaturan widget di panel editor Elementor.

Semua input seperti:

• text
• textarea
• color picker
• repeater
• image
• URL

didefinisikan di dalam fungsi ini.

start_controls_section()

Digunakan untuk membuat group pengaturan di panel editor.

Contohnya section:

• Content
• Style
• Advanced

add_control()

Digunakan untuk membuat field input di Elementor editor.

Contoh di atas membuat dua field:

Heading

Input teks satu baris.

Text

Textarea untuk paragraf.

end_controls_section()

Menutup section yang sebelumnya dibuat dengan start_controls_section().

5. Menampilkan Output Widget di Frontend

Setelah control dibuat, kita perlu menampilkan data tersebut di halaman website.

protected function render() {

            $settings = $this->get_settings_for_display();

            ?>
            <div class="simple-heading-text-widget">
                <h3 class="heading">
                    <?php echo esc_html($settings['heading']); ?>
                </h3>

                <p class="text">
                    <?php echo esc_html($settings['text']); ?>
                </p>
            </div>
            <?php
}

Penjelasan

render()

Fungsi ini digunakan untuk menampilkan HTML widget di frontend website.

get_settings_for_display()

Fungsi ini mengambil semua data yang diisi user di Elementor editor.

Misalnya:

$settings['heading']
$settings['text']

Nilai tersebut kemudian ditampilkan ke dalam HTML.

6. Mendaftarkan Widget ke Elementor

Langkah terakhir adalah mendaftarkan class widget ke Elementor. Tambahkan kode ini:

$widgets_manager->register(new \Simple_Heading_Text_Widget());

Penjelasan

Baris ini memberitahu Elementor untuk mengaktifkan widget yang baru dibuat agar muncul di editor.

Copy & Paste [Full Code]

Berikut full kode lengkap dari tutorial yang tadi dijelaskan. Kode ini bisa langsung kamu masukkan ke functions.php theme atau custom file yang di-include.

Artikel lainnya: Cara Nonaktifkan Google Font di Elementor

Widget ini akan membuat Simple Heading Text Widget di Elementor dengan field:

• Heading
• Text

/**
 * Register Simple Heading Text Widget
 */
add_action('elementor/widgets/register', function($widgets_manager){

    class Simple_Heading_Text_Widget extends \Elementor\Widget_Base {

        // Widget unique name
        public function get_name() {
            return 'simple_heading_text';
        }

        // Widget title in Elementor panel
        public function get_title() {
            return 'Simple Heading Text';
        }

        // Widget icon
        public function get_icon() {
            return 'eicon-heading';
        }

        // Widget category
        public function get_categories() {
            return ['general'];
        }

        /**
         * Register controls (Elementor editor fields)
         */
        protected function register_controls() {

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

            // Heading field
            $this->add_control(
                'heading',
                [
                    'label' => 'Heading',
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'default' => 'This is heading',
                    'label_block' => true,
                ]
            );

            // Text field
            $this->add_control(
                'text',
                [
                    'label' => 'Text',
                    'type' => \Elementor\Controls_Manager::TEXTAREA,
                    'default' => 'This is description text.',
                ]
            );

            $this->end_controls_section();
        }

        /**
         * Render widget output on frontend
         */
        protected function render() {

            $settings = $this->get_settings_for_display();

            ?>
            <div class="simple-heading-text-widget">
                <h3 class="heading">
                    <?php echo esc_html($settings['heading']); ?>
                </h3>

                <p class="text">
                    <?php echo esc_html($settings['text']); ?>
                </p>
            </div>
            <?php
        }
    }

    // Register widget
    $widgets_manager->register(new \Simple_Heading_Text_Widget());

});

Hasil & Output

Setelah menambahkan kode tersebut maka hasil dan outputnya seperti ini di elementor:

Untuk style bisa Anda kustom menggunakan CSS sendiri atau bisa menggunakan style editor dari elementor sendiri.

Kesimpulan

Membuat kustom widget Elementor sebenarnya cukup sederhana jika memahami struktur dasarnya. Secara umum prosesnya terdiri dari:

1. Membuat hook register widget
2. Membuat class widget Elementor
3. Menentukan identitas widget
4. Membuat control di editor
5. Menampilkan output HTML
6. Mendaftarkan widget ke Elementor

Dengan teknik ini Anda bisa membuat berbagai jenis widget custom seperti:

• card layout
• slider
• pricing table
• testimonial
• mega menu component

yang sepenuhnya dapat dikontrol melalui Elementor editor.