Tutorial to make custom elementor widget in our theme

Before starting, you must already have the elementor theme that we have, if you don't have it, you can ask our team.

01. Open theme via VS code ( Visual Studio Code )

02. Open Folder > wp-content > themes > name_themes (open our themes) > includes > elemendor-widgets. you will find the cew-example folder.

03. Next, you can copy cew-example folder, than you can change the name (Ex: cew-vertical-scroll), you can see the image.

04. Next, open file php ( you can see the image ) , then change you can see in the image rename which is underlined in the image.

CEW example image 1

CEW example image 2

Based on image CEW example image 1 and 2 there is some function that control the CEW usually we use

1. get_name() is function that set the widget name in CEW. the function must return string of widget name in this case is "vertical-scroll-widget"

2. get_title() is function that set the widget title or label. teh function must return string. in this is case is "Vertical Scroll Widget"

3. get_icon is function that set the icon display for widget in elementor editor. this function must return string of icon name of dash-icon collection that wordpress use. you can see the list of the icons here

4. register_controls() is function that contain settings of the widget so user can can customize the widget. there are 3 function inside register control (dont forget to use $this, because these function is extend from Widget_base)

   1. start_controls_section is function to start the control section. each control section will generate new spesific section. this function contain 2 parameter. these parameter are section_id who can filled with string without special character. and the second is argument the argument. in the argument we fill with array associative ( ["key" => value ] ). arguments usually we use is 'label' to set the label of our control section. example
   2. add_control is a function to add the control inside the start_controls_section. you can add more than one control inside the start_controls_section. function add_control contains 3 parameters. these parameters are id, arguments and options. but usually we use only 2 argument. First, id is the identifier of the control, these id must be unique between another control in each section. second is argument, the argument usually we use is type, label

      1. type is the type of input field who will be the control. there are some type u can see here

      2. label is the name of our input example:
   3. end_controls_section is a function to close the control section

5. render() is function to render our HTML. in this function we will customize our html reference on controll that we add. to get all control you need write this code $settings = $this->get_settings(); **Note : if you have stuck on this part you can ask to backend about how this flow works

05. Next, you can open file autoload.php, you can add the code that is underlined in the image, you can follow the code example above and change the name according to what we have made.

06. Next, you can open file cew-name-render.php, here you can make what you want. (you can code here)

07. Next, after finish coding , you can open your elementor > then edit elementor, you can find your widget ( you can see in the picture)

08. Next, you can use the widget like using elementor widgets normally

09. Last, you can save then open the page, BOOM your custom elementor widget has been successfully made.

If you want to learn more you can study here, https://developers.elementor.com/docs/widgets/

Happy Coding ^-^