24 Comments

  1. Jose Enrique
    January 14, 2021 @ 6:16 pm

    Hi, nice tutorial! but ur website is down :'v

    Reply

  2. mohamed zaki guebli
    January 14, 2021 @ 6:16 pm

    i can't find the custom widget in elementor! can u help me ?

    Reply

  3. Cheeta
    January 14, 2021 @ 6:16 pm

    Hi! thank you for this tutorial… actually I want to add class field to elementor form inputs. I have this code but don't know where to put this code. Can you please guide!

    class Elementor_Forms_Input_Classes {

    public $allowed_fields = [

    'text',

    'email',

    'url',

    'password',

    ];

    public function __construct() {

    // Add class attribute to form field render

    add_filter( 'elementor_pro/forms/render/item', [ $this, 'maybe_add_css_class' ], 10, 3 );

    add_action( 'elementor/element/form/section_form_fields/before_section_end', [ $this, 'add_css_class_field_control' ], 100, 2 );

    }

    /**

    * add_css_class_field_control

    * @param $element

    * @param $args

    */

    public function add_css_class_field_control( $element, $args ) {

    $elementor = ElementorPlugin::instance();

    $control_data = $elementor->controls_manager->get_control_from_stack( $element->get_name(), 'form_fields' );

    if ( is_wp_error( $control_data ) ) {

    return;

    }

    // create a new css class control as a repeater field

    $tmp = new ElementorRepeater();

    $tmp->add_control(

    'field_css_class',

    [

    'label' => 'CSS class',

    'inner_tab' => 'form_fields_advanced_tab',

    'tab' => 'content',

    'tabs_wrapper' => 'form_fields_tabs',

    'type' => 'text',

    'conditions' => [

    'terms' => [

    [

    'name' => 'field_type',

    'operator' => 'in',

    'value' => $this->allowed_fields,

    ],

    ],

    ],

    ]

    );

    $pattern_field = $tmp->get_controls();

    $pattern_field = $pattern_field['field_css_class'];

    // insert new class field in advanced tab before field ID control

    $new_order = [];

    foreach ( $control_data['fields'] as $field_key => $field ) {

    if ( 'custom_id' === $field['name'] ) {

    $new_order['field_css_class'] = $pattern_field;

    }

    $new_order[ $field_key ] = $field;

    }

    $control_data['fields'] = $new_order;

    $element->update_control( 'form_fields', $control_data );

    }

    public function maybe_add_css_class( $field, $field_index, $form_widget ) {

    if ( ! empty( $field['field_css_class'] ) && in_array( $field['field_type'], $this->allowed_fields ) ) {

    $form_widget->add_render_attribute( 'input' . $field_index, 'class', $field['field_css_class'] );

    }

    return $field;

    }

    }

    new Elementor_Forms_Input_Classes();

    Reply

  4. Łukasz Bieniek
    January 14, 2021 @ 6:16 pm

    URLs don't working

    Reply

  5. Francisco Cerda S.
    January 14, 2021 @ 6:16 pm

    Great! So simple and straightforward dude! Susbscribed and gracias desde Chile!

    Reply

  6. Станислав Муратшин
    January 14, 2021 @ 6:16 pm

    Thanks, good video!

    Reply

  7. Vasa Pupkin
    January 14, 2021 @ 6:16 pm

    Awesome. Thanks! 🙏

    Also, can you check my theme https://architect.elysio.top which build on Elementor with custom widgets

    Reply

  8. Robert Gartside
    January 14, 2021 @ 6:16 pm

    Hey can anyone help me, i need to hire someone who can make Elementor Widgets. Really need to hire someone, we have over 200 that need to be made…

    Reply

  9. BV Thắng
    January 14, 2021 @ 6:16 pm

    Hi… If we add the 2nd widget then how to do it?
    Can add to my-widget.php file? thank you

    Reply

  10. Laurence Bahiirwa
    January 14, 2021 @ 6:16 pm

    This was well done. I have made similar plugin but now need to solve one problem. The docs are not clear on how to add the group controls to an element. Can you share some clarity?

    Reply

  11. Sadek Hossain
    January 14, 2021 @ 6:16 pm

    How to use custom js and external css?

    Reply

  12. Globalforester
    January 14, 2021 @ 6:16 pm

    This excellent tutorial has saved me hours/days of head scratching. So anyone planning to create their own should start here!

    Reply

  13. Developer Qodirov
    January 14, 2021 @ 6:16 pm

    Awesome

    Reply

  14. Janis Hau
    January 14, 2021 @ 6:16 pm

    Nice tutorial! Do you know how to display this widget in elementor pro? This code seems to work only for the base version.

    Reply

  15. Technology IT
    January 14, 2021 @ 6:16 pm

    I want to build like elementor page builder I know CSS, PHP, HTML, MySQL but how can I make it myself? do you have any tutorials for it? or have any courses? Please let me know I am very interested to know

    Reply

  16. muhammad moneeb
    January 14, 2021 @ 6:16 pm

    Hi sir,

    This is very useful article, I just have one question that is "How can i add dynamic controls to Elementor custom widget'.

    For Example: I have added a list in custom widget. and no. of list items could be any one.

    can you guide me with this.

    thanks.

    Reply

  17. Russell Azim
    January 14, 2021 @ 6:16 pm

    DeveloWP awesome tutorial, please give us Custom Elementor addon Widgets tutorial, just one addon widget.

    Reply

  18. Julieta Gogo
    January 14, 2021 @ 6:16 pm

    Simple yet soooo useful. You got a great channel name too I cant wait to see more of this.Subscribe Ding!

    Reply

  19. Андрей Казаков
    January 14, 2021 @ 6:16 pm

    Cool

    Reply

  20. JfordGaming
    January 14, 2021 @ 6:16 pm

    how to
    call external js and css for the widget?

    Reply

  21. coldbreak
    January 14, 2021 @ 6:16 pm

    You should make more of these.

    Reply

  22. Harder life
    January 14, 2021 @ 6:16 pm

    Thank you for the video! but I have a problem. When I add that code to the functions.php it shows an error ""

    Reply

  23. Warren Inasal
    January 14, 2021 @ 6:16 pm

    Very usefull thanks for sharin

    Reply

  24. sypher294
    January 14, 2021 @ 6:16 pm

    Great stuff. Thanks!

    Reply

Please Login to post a comment

X

Forgot Password?

Join Us