Skip Navigation

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: 

This topic contains 9 replies, has 2 voices.

Last updated by ianM-19 2 years, 3 months ago.

Assigned support staff: Alejandro.

Author Posts
June 11, 2019 at 10:28 pm #3998715

ianM-19

I am trying to setup custom Elementor widgets which can be translated, following this guide:

https://wpml.org/documentation/plugins-compatibility/elementor/how-to-add-wpml-support-to-custom-elementor-widgets/

However, none of the fields for my custom widgets are showing up in the side-by-side translation manager, while all built-in Elementor fields are. I suspect that I'm not quite understanding the guide. I tried to reference the examples that it mentioned, but couldn't find anything that seemed to match the code in the WPML guide. The site is still local only, at the moment, so I can't share access, but you can view the plugin files here:

hidden link

Also, I'm reaching out on behalf of a client, so if it's possible to notify heather@hweaver.com when a response is posted, I would appreciate it.

June 12, 2019 at 4:13 pm #4006001

Alejandro
Supporter

Languages: English (English ) Spanish (Español ) Italian (Italiano )

Timezone: Europe/Rome (GMT+02:00)

Hello!
Welcome to WPML Support.
I'll do my best to help you solve this issue.

Could you please upload elementor and the elementor custom widgets in this sandbox site?
hidden link

i'll take a look at it and se what can we do, ok?

Thanks in advance.

June 14, 2019 at 7:03 pm #4023819

ianM-19

Hey - I actually have our site up on a staging site now. Is a wordpress account sufficient access for you? If so, do you have instructions about how i should set that up?

Thanks.

June 17, 2019 at 12:45 pm #4035333

Alejandro
Supporter

Languages: English (English ) Spanish (Español ) Italian (Italiano )

Timezone: Europe/Rome (GMT+02:00)

it's a start, yes, although we would be way faster if you could just upload that custom elementor widget in the sandbox, that way there's less "noise" in the site (less content, so it's easier to study your case) and we would try to help you register it!

As far as i understand, you would just need to install elementor and maybe elementor pro (if needed) and then your elementor widget.

Then, you'd have to tell me where did you add the elementor widget and where can i find its files and i'll either do the rest or ask our developers to take a look at it!

Regards.

June 18, 2019 at 6:02 pm #4045689

ianM-19

Ok - I uploaded elementor, and the plugin with the Elementor addons that I made. I also set up a page with all the problem widgets loaded, called 'WPML test'.

June 19, 2019 at 5:55 pm #4053729

Alejandro
Supporter

Languages: English (English ) Spanish (Español ) Italian (Italiano )

Timezone: Europe/Rome (GMT+02:00)

Ok, sorry if it took so long to answer. i was just making sure everything was alright.

By the way, during the test i spotted what seems to be a bug on your end. the URL always returns "/array" in the sandbox, i tested it without WPML and without the code i editted/wrote and it kept doing the same, so i couldn't test very well the URL link field, but it should work. try to check and fix that and test it yourself afterwards.

Here's the code i added to your functions.php to make it work:

add_action('init', function (){
    add_filter( 'wpml_elementor_widgets_to_translate', 'wpml_translate_widget_new_widgets' );
});

/* Widgets being translated:
   -- BIG QUOTES 
   -- PARALLAX HEADLINE
   -- BIG BUTTON
*/

function wpml_translate_widget_new_widgets($widgets){
		$widgets[ 'big-quote' ] = [
     'conditions' => [ 'widgetType' => 'big-quote' ],
     'fields'     => [
        [
           'field'       => 'quote',
           'type'        => __( 'Quote', 'seelos-elementor' ),
           'editor_type' => 'AREA'
        ],
     ],
  ];
  
  
  $widgets[ 'big-button' ] = [
     'conditions' => [ 'widgetType' => 'big-button' ],
     'fields'     => [
        [
           'field'       => 'button-text',
           'type'        => __( 'Button Text', 'seelos-elementor' ),
           'editor_type' => 'LINE'
        ],
        [
           'field'       => 'button-link',
           'type'        => __( 'Button Link', 'seelos-elementor' ),
           'editor_type' => 'LINK'
        ],
     ],
  ];
  
  
    	$widgets[ 'parallax-header' ] = [
     'conditions' => [ 'widgetType' => 'parallax-header' ],
     'fields'     => [
        [
           'field'       => 'headline',
           'type'        => __( 'Headline', 'seelos-elementor' ),
           'editor_type' => 'AREA'
        ],
     ],
  ];
  
   
 
  return $widgets;
}

That worked in the functions.php file but not on your files.

I checked some of your files and i noticed that the actual registration code is there but you're missing the filter


In this case, the only way i could make it work was by adding the following code in your seelos-elementor-addons.php: 

[php]
// WPML compatibility for elementor widgets
        
        add_action('init',function(){
             add_filter( 'wpml_elementor_widgets_to_translate', [ $this, 'setup_translateable_fields' ] );
        });

At the bottom of that file i saw a function with one widget registration, and tested it. it worked like a charmon my end. I suggest you try it out and let me know how it goes

You can check the above mentioned file in the sandbox. the code starts at line 122 (seelos-elementor-addons.php)

Note: i commented out the code for both the big button and the parallax heading in the sandbox for testing purposes. the code you added in the seelos-elementor-addons.php is the one for the big button, so you can test it out and take it from there.

Documentation i followed: https://wpml.org/documentation/plugins-compatibility/elementor/how-to-add-wpml-support-to-custom-elementor-widgets/

June 21, 2019 at 4:01 pm #4068257

ianM-19

Thanks Alejandro. I tried this on my site, but for some reason none of the text shows up in the translation editor now. I thought perhaps this was due to some bad code on my end, but I looked on our staging site (where no changes have been made), and all I see are the media assets. Is this a separate configuration issue on my end? I'd expect to see the standard text fields from the page, even if my custom widgets weren't available, and I did see all of them at one point.

Screen Shot 2019-06-21 at 10.59.34 AM.png
June 25, 2019 at 7:56 am #4082097

Alejandro
Supporter

Languages: English (English ) Spanish (Español ) Italian (Italiano )

Timezone: Europe/Rome (GMT+02:00)

I talked with our developers and yes, the problem is in the action:

// WPML compatibility for elementor widgets
         
        add_action('init',function(){
             add_filter( 'wpml_elementor_widgets_to_translate', [ $this, 'setup_translateable_fields' ] );
        });

For some reason it worked before i sent you the code, but you're right, it doesn't work anymore.

The problem is that "$this" is inside the PHP closure function which is not defined

So try to convert the code above into a normal callback function instead of a closure one.

Let me know how it went and if you fix the problem, let me know how so other users can use it in the future (if needed).

Regards

June 26, 2019 at 2:51 pm #4093379

ianM-19

Well, I think the latest issue was actually that I needed to make a copy of the page with the custom widgets to get the fields to show up, forcing a new translation to be started. Once I did that, the fields all showed up in the translator as expected. Thanks for all your help!

June 26, 2019 at 2:52 pm #4093383

ianM-19