Tự Tạo Custom Elementor Widget Trong Theme Với WPSHARE247 | Hướng Dẫn Từ A – Z (Dễ Làm Cho Người Mới)

Đây chỉ là một ví dụ về Widget Elementor cơ bản. Tuy nhiên, sau khi đọc hết bài viết này, bạn sẽ hiểu cách tự tạo bất kỳ chức năng nào cho website của mình bằng cách xây dựng các widget riêng, hoàn toàn không phụ thuộc vào những công cụ có sẵn của Elementor.

Trong bài viết này, WPSHARE247 sẽ hướng dẫn bạn:

✅ Cách tự tạo một Custom Elementor Widget tên “Hello WPSHARE247.”
✅ Gắn trực tiếp widget vào theme của bạn.
✅ Không cần tạo plugin riêng nếu không muốn.
✅ Chỉ cần thao tác trên WordPress Dashboard — không bắt buộc FTP.

Trước tiên, tôi muốn nói với các bạn rằng bài viết này được chia sẻ từ chính tôi – một người đã có nhiều kinh nghiệm về Plugin Elementor – chứ không phải là một bài viết content AI vô tri vô giác.

Xem hướng dẫn Tạo widget Elementor (Custom Elementor Widget) ngay trên website WPSHARE247.com để website của bạn trở nên khác biệt và độc đáo hơn.

1. Các cách chỉnh sửa theme

Trước tiên, bạn nên hiểu: Có nhiều cách để chỉnh code trong theme:

→ Bài này sẽ hướng dẫn dùng plugin WP File Manager, giúp bạn tạo file, folder ngay trong Dashboard WordPress.

Cài Plugin: WP File Manager

2. Tài nguyên bạn cần có

Để làm theo bài này, bạn cần:

✅ Website WordPress chạy bình thường (Hosting hoặc Localhost đều được)
✅ Theme đang dùng → NÊN LÀ CHILD THEME (tránh mất code khi update theme gốc)
✅ Đã cài Elementor (miễn phí cũng làm được)
✅ Đã cài plugin:
👉 Tải WPSHARE247 Elementor Addons
✅ Cài plugin:
👉 Tải WP File Manager
✅ Biết vào Dashboard WP

Đừng lo, tôi sẽ hướng dẫn bạn từng bước rất dễ thực hiện. Giờ thì chúng ta cùng bắt đầu nhé!

3. Cài đặt plugin cần thiết

3.1 Cài WPSHARE247 Elementor Addons

• Dashboard → Plugins → Add New
• Search: wpshare247
• Install → Activate

Tìm và cài plugin WPSHARE247 Elementor Addons

3.2 Cài WP File Manager

• Dashboard → Plugins → Add New
• Search: wp file manager
• Install → Activate

Tìm và cài plugin WP File Manager

4. Dùng WP File Manager để tạo folder & file

Bình thường Theme Editor không tạo được file mới, nên ta dùng WP File Manager:

• Vào:

  Dashboard → WP File Manager
  

• Truy cập folder:

  /wp-content/themes/your-theme/
  

• Click New Folder → tạo thư mục:

  wpshare247-custom-widgets
  

• Click New File → đặt tên:

  wpshare247_hello_wpshare247.php
  

• Double-click file wpshare247_hello_wpshare247.php → soạn thảo code ngay trong plugin.

Giao diện chỉnh sửa Theme

→ Quá tiện, không cần FTP!

Trước hết, bạn cần tạo Child Theme để bảo vệ code của mình, rồi hãy tiếp tục sang các bước tiếp theo.

Cách tạo Theme Child trong WordPress

Plugin tạo theme con: Child Theme Configurator

5. Copy code widget vào file mới

Tạo thư mục: wpshare247-custom-widgets trong theme bạn đang dùng cụ thể là theme con bước trên.
Tiếp theo tạo file wpshare247-custom-widgets/wpshare247_hello_wpshare247.php

Dán đoạn code sau:

<?php
class Wpshare247_Hello_Wpshare247 extends \Elementor\Widget_Base {

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

    public function get_title() {
        return esc_html__( 'Hello WPSHARE247', 'wpshare247' );
    }

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

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

    protected function render() {
        echo '<h2 style="color:#0073aa;">Hello WPSHARE247</h2>';
    }
}

→ Lưu file lại.

Ok tốt lắm rồi phải không vậy thì chuyển ta tiếp nhé…..

6. Khai báo widget trong functions.php

Vẫn dùng WP File Manager:

• Mở file:

  wp-content/themes/your-theme/functions.php
  

• Thêm đoạn code cuối file:

add_filter( 'wpshare247_el_addons_custom_widgets', function( $widgets ) {
    $widgets[] = [
        'file'  => get_stylesheet_directory() . '/wpshare247-custom-widgets/wpshare247_hello_wpshare247.php',
        'class' => 'Wpshare247_Hello_Wpshare247',
    ];

    /*
    // Ví dụ muốn thêm nhiều widget khác:
    $widgets[] = [
        'file'  => get_stylesheet_directory() . '/wpshare247-custom-widgets/wpshare247_my_custom_new1.php',
        'class' => 'Wpshare247_My_Custom_New1',
    ];
    */

    return $widgets;
});

→ Lưu lại.

7. Kiểm tra trong Elementor

• Vào Dashboard → Pages → Edit with Elementor
• Search:

  Hello WPSHARE247
  

• Kéo widget vào một section bất kỳ.

→ Bạn sẽ thấy chữ:

Hello WPSHARE247

→ Thành công rồi nhé!

Kết quả Widget của Bạn vừa thêm

Tuy nhiên nếu bạn muốn tạo 1 widget nâng cao, một cách chuyên nghiệp bạn có thể xem thêm video này:

👉 Video Custom Addon Widget Elementor Nâng Cao

Còn đây là danh sách các trường Control bạn nên tham khảo.

Tổng hợp các Editor Control của plugin Elementor để tạo Addon – Widget

8. Tạo thêm widget mới?

Muốn tạo thêm widget:

• Duplicate file:

  wpshare247_my_custom.php
  

  → đổi tên, ví dụ:

  wpshare247_my_custom_new1.php
  

• Trong file mới:
  • Đổi tên class:

    class Wpshare247_My_Custom_New1 extends Widget_Base { ... }
    

• Thêm vào filter trong functions.php:

$widgets[] = [
    'file'  => get_stylesheet_directory() . '/wpshare247-custom-widgets/wpshare247_my_custom_new1.php',
    'class' => 'Wpshare247_My_Custom_New1',
];

9. Lưu ý cực kỳ quan trọng

• NÊN dùng Child Theme.
  Nếu chỉnh theme chính → khi update theme sẽ mất hết code.
• Luôn đổi tên class widget mới để tránh trùng lặp.
• Nếu code sai → web có thể trắng trang. Khi đó:
  • Vào WP File Manager → xóa code lỗi.
  • Hoặc restore bản backup.
• Không thấy widget?
  • Clear cache Elementor.
  • Kiểm tra plugin WPSHARE247 Elementor Addons đã kích hoạt chưa.

Ưu điểm của cách làm này

✅ Chạy ngay trong theme → nhẹ, gọn, không cần plugin riêng
✅ Tối ưu tốc độ website (chỉ load widget bạn cần)
✅ Dễ quản lý code → dễ maintain sau này
✅ WP File Manager giúp thao tác dễ dàng cho cả người không rành FTP

Bạn thấy đó, chỉ với vài bước đơn giản, bạn đã tự tạo Custom Elementor Widget chạy ngay trong theme.

Nếu bạn muốn website:

• Khác biệt hoàn toàn với thiên hạ
• Tối ưu tốc độ, ít phụ thuộc plugin ngoài
• Tích hợp tính năng đặc biệt (AI, API, dữ liệu động…)

→ Đây là cách làm cực kỳ nên áp dụng.

Nếu bạn gặp khó khăn, muốn nâng cấp widget phức tạp hơn (gọi API, xử lý AI), đừng ngần ngại bình luận hoặc liên hệ WPSHARE247 nhé!

👉 Link tham khảo

• WP File Manager – WordPress Plugin
• WPSHARE247 Elementor Addons Plugin
• Child Theme WordPress – Hướng dẫn tạo

10. Những lưu ý quan trọng về cách làm này

🛡 WPSHARE247 Elementor Addons hoàn toàn an toàn

Trước hết, bạn hoàn toàn có thể yên tâm rằng:

• Plugin WPSHARE247 Elementor Addons không gây rủi ro bảo mật cho website.
• Plugin chỉ bổ sung các widget hoặc tính năng mới cho Elementor, không can thiệp sâu vào hệ thống file WordPress.
• Bạn có thể yên tâm kích hoạt và sử dụng lâu dài mà không lo ảnh hưởng đến bảo mật website.

→ Tất cả lưu ý dưới đây chỉ liên quan đến việc quản lý file, không phải plugin WPSHARE247 Elementor Addons.

❗ Nhược điểm khi dùng WP File Manager

Dù rất tiện lợi, WP File Manager vẫn tiềm ẩn những rủi ro quan trọng mà bạn cần chú ý:

✅ Ưu điểm:

• Giúp bạn tạo file/folder ngay trong Dashboard WP
• Không cần FTP hay cPanel → phù hợp người không rành kỹ thuật
• Giao diện giống Windows Explorer → dễ dùng

❌ Nhược điểm:

• Rủi ro bảo mật rất lớn nếu để plugin kích hoạt lâu dài:
  • Nếu hacker chiếm được quyền Admin → họ cũng có quyền chỉnh sửa hoặc xóa file web qua File Manager.
• Nếu không cẩn thận, bạn dễ sửa nhầm file quan trọng → gây lỗi trắng trang hoặc sập web.
• Một số hosting bảo mật cao có thể không cho phép WP File Manager chỉnh các file hệ thống.

→ Lời khuyên:

• Chỉ kích hoạt plugin WP File Manager khi thật sự cần dùng.
• Sửa xong → nên deactivate hoặc gỡ bỏ plugin.
• Luôn backup website trước khi chỉnh sửa bất kỳ file nào.

✅ Nên dùng Hosting / cPanel nếu có thể

Cách an toàn nhất vẫn là chỉnh sửa file qua hosting control panel, đặc biệt cPanel, vì:

• Giao diện dễ thao tác, có sẵn trong hầu hết các hosting
• Bảo mật hơn → hacker khó lợi dụng hơn plugin bên ngoài
• Có tính năng backup, restore ngay nếu chỉnh sai
• Cho phép upload/download file hàng loạt rất nhanh

→ Nếu bạn dùng cPanel:

• Vào:

  cPanel → File Manager → public_html/wp-content/themes/your-theme/

• Tạo thư mục hoặc file PHP ngay tại đó
• Chỉnh file code bằng code editor có sẵn trong cPanel
• Sau khi lưu → refresh web để kiểm tra kết quả

Video hướng dẫn chi tiết:

Tóm lại

• WPSHARE247 Elementor Addons hoàn toàn an toàn để sử dụng.
• Nếu bạn cần chỉnh file code:
  • WP File Manager rất tiện nhưng hãy dùng cẩn thận, chỉ khi cần thiết.
  • Cách an toàn nhất vẫn là dùng FTP hoặc cPanel.
• Luôn tạo Child Theme để tránh mất code khi update theme.
• Và luôn backup website trước khi chỉnh sửa bất kỳ file code nào!