Hướng dẫn tạo custom widget cho plugin WPBakery

class WaTextBoxWidgets extends WPBakeryShortCode {
        //Initialize Component
        function __construct() {
            add_action( 'init', array( $this, 'create_shortcode' ), 999 );            
            add_shortcode( 'wa_text_box', array( $this, 'render_shortcode' ) );
        }        
        //Map Component
        public function create_shortcode() {
        
            //Code in the next steps
            if ( !defined( 'WPB_VC_VERSION' ) ) {
                return;
            }
            
            vc_map( array(
                'name'          => __('Wa TextBox ', 'wa-add-on-wp-bakery'), //Tên Widgets,tên Plugin
                'base'          => 'wa_text_box', // tên shortcode mà bạn sẽ gọi ở add_shortcode trong construct()
                'description'   => __( 'Text Box wa', 'wa-add-on-wp-bakery' ),
                'category'      => __( 'wa module', 'wa-add-on-wp-bakery'),                
                'params' => array(
                    array(
                        "type" => "textfield",
                        "class" => "",
                        "heading" => __( "Heading", "wa-add-on-wp-bakery" ), //Label của textfield
                        "param_name" => "wa_textbox_heading", //tên param
                        "value" => __( "", "wa-add-on-wp-bakery" ),
                        "description" => __( "Enter description.", "wa-add-on-wp-bakery" )
                    ),
                    array(
                        "type" => "vc_link",
                        "class" => "",
                        "heading" => __( "Links", 'wa-add-on-wp-bakery' ),
                        "param_name" => "wa_link",
                        "description" => __( "Add Your Url", 'wa-add-on-wp-bakery' ),                                                
                    ),
                    array(
                        "type" => "attach_image",
                        "class" => "",
                        "heading" => __( "Image", "wa-add-on-wp-bakery" ),
                        "param_name" => "wa_img",
                        "value" => '',
                        "description" => __( "Enter description.", "wa-add-on-wp-bakery" )
                      )    
                ),
            ));
        }
        //Render Component
        public function render_shortcode( $atts, $content, $tag ) {
            //Code in the next steps
            extract((shortcode_atts(
                //tạo array gọi các param_name ở trên để lấy nội dung
                array(
                'wa_textbox_heading'   => '',
                'wa_link' => '',
                'wa_img'=>'',
            ), $atts)));
            //Heading
            $heading = wpb_js_remove_wpautop($content, true); //Dùng để loại bỏ các thẻ breakline như br mỗi khi các bạn xuống dòng. Cái này các bạn dùng trong textarea là được.
            $textbox_heading = esc_html($atts['wa_textbox_heading']); // display content nhập vào từ field
            //Links
            $wa_source  = vc_build_link( $atts['wa_link'] ); //Chuyển post/page mình chọn về dạng link (ở đây có 2 loại phân dạng: title và url)
            $wa_url     = esc_url( $wa_source['url'] ); // display url của post/page
            //img 
            $wa_image_url     = wp_get_attachment_image_src($atts['wa_img']); //lấy thông tin img mình chọn
            
            ob_start(); // bắt đầu quá trình lưu thông tin code
            $directory = plugin_dir_path( __FILE__ ); // lấy path của plugin
            
            include_once( $directory.'template/text-box-template.php' );
            $output=ob_get_contents(); // lưu nội dung vào một biến
            ob_end_clean(); //điểm dừng của thông tin được lưu
            return $output;
        }
    }
    new WaTextBoxWidgets();

<div class="wa-widgets-extend-wpbakery">
   <div class="wa-heading">
    <h1><?php echo $textbox_heading;?></h1>
   </div>
   <div class="wa-img">
     <a href="<?php echo $wa_url?>">
      <img src="<?php echo $wa_image_url[0]?>" alt="img">
     </a>
   </div>
</div>

Và đây là thành phẩm:

3/ Khai báo file css, js vào plugin

Bên cạnh đó mình sẽ hướng dẫn thêm các bạn về cách include file js và css vào plugin. Các bạn có thể add nó vào sau ob_start()

wp_register_style( 'wa_src',  plugins_url('/wa-add-on-wp-bakery/src/css/main.css'),__FILE__ );
            wp_enqueue_style('wa_src');
            wp_register_script( 'wa_src', plugins_url('/wa-add-on-wp-bakery/src/js/root.js'),__FILE__);
            wp_enqueue_script('wa_src');

4/ Tổng kết

Như vậy là mình đã hướng dẫn các bạn xong việc tạo plugin tạo Widgets từ extend WPBakery rồi. Chúc các bạn thành công nhé, mọi thông tin thắc mắc các bạn cứ liên hệ fb tụi mình nhé.