Documentation: Custom Elements and WPML

[InoPlugs]

Custom Elements work together with WPML, but there are some requirements:

• WPML 4.4.9
• WPML Translation Management 2.10.5

How to translate a Custom Element without subitems (like button):

• Create/Edit your CET as usual
• Click "Edit Custom Element" button
• When hover over button you have an additional icon left top (books) - click
• A new tab opens with a default editor screen where on the right side you have a default WPML "Language" metabox. If not, open the screen options tab on top of the screen and in the list of checkboxes check the checkbos to show this metabox
• You must use the Translation Editor. Do not switch the option "Use WPMLs Translation Editor" to off. This might break translations
• Translate the CET into all languages - same as for pages/posts. It is important, that you always translate CET into all langauages even if you only changed styling settings because WPML must copy all settings to the translated language post
• Clear server cache to allow a rebuild of all pages

How to translate a Custom Element subitems - option 'All subitems use the same custom element template' (like button row):

• Same steps as above
• At the bottom of the Language metabox you have an additional button: "Translate Subitem" - click this.
• Another new tab opens with a similar default editor screen for the subitem to translate. Same as above.
• Clear server cache to allow a rebuild of all pages

How to translate a Custom Element subitems - option 'Individually select subitem custom element templates':

• In the dropdown left of the End Edit Custom Element Button select what buttons you like to see
• Create/Edit your CET as usual
• Create/Edit your CET subitems as usual
• Hover over a CET or a subiten CET and click the translate icon
• Same rules as above for translation editor
• Translate the CET into all languages - same as for pages/posts. It is important, that you always translate CET into all langauages even if you only changed styling settings because WPML must copy all settings to the translated language post
• Clear server cache to allow a rebuild of all pages

Using a CET on a page

• This is exactly the same as on non WPML pages
• When finished, save the page
• Always translate the page into all languages

Using WPML Translation Management Dashboard

• Goto WP Dashboard -> WPML -> Translation Management
• Filter for "ALB Custom Element"
• Hover over a row -> below name you find a "Translate" link with additional info to the element
• Follow same steps as described above

[mgmason]

This is my recommendation for the text and screenshots - please review
In my test WPML gave a warning that "WPML String Translation" was needed, so I added it to the doc, I also was unable to get a screenshot of "At the bottom of the Language metabox you have an additional button: "Translate Subitem" - click this." (line 26) I'm not sure if I missed a step, I don't use WPML often, so I had a bit of a learning curve to set up the test. In doing so I also found that the "WPML Specific Options" also had to be set so I added this to the doc. Thank you.

---

Custom Elements work together with WPML, but there are some requirements:

• WPML Multilingual CMS 4.4.9
• WPML Translation Management 2.10.5
• WPML String Translation 3.1.7

Please also ensure that the WPML Specific Options -> Additional Translate Icon is also enabled in the WP Dashboard -> Theme Extensions -> Custom Elements panel.

How to translate a Custom Element without subitems e.g Button example:

• First create your CET as usual
• Then click the "Edit Custom Element" button, to edit your CET
• When hovering over the CET button you will have an additional icon in the top left, (a book icon) - click

• A new tab opens with a default editor screen where on the right side you have a default WPML "Language" metabox. If not, open the screen options tab on top of the screen and in the list of checkboxes check the checkbos to show this metabox
• You must use the Translation Editor. Do not switch the option "Use WPMLs Translation Editor" to off. This might break translations
• Translate the CET into all languages - same as for pages/posts. It is important, that you always translate CET into all langauages even if you only changed styling settings because WPML must copy all settings to the translated language post

• The success message and language panel after the translation

• Close the tab and clear your server cache to allow a rebuild of all pages.

How to translate a Custom Element subitems with the option "All subitems use the same custom element template" e.g Button Row example:

• Same steps as above
• At the bottom of the Language metabox you have an additional button: "Translate Subitem" - click this.
• Another new tab opens with a similar default editor screen for the subitem to translate. Same as above.
• Clear server cache to allow a rebuild of all pages

How to translate a Custom Element subitems with the option "Individually select subitem custom element templates":

• In the dropdown left of the "End Edit Custom Element" button select the items you like to see, e.g "Item elements only"

• Create/Edit your CET as usual
• Create/Edit your CET subitems as usual
• Hover over a CET or a subitem CET and click the translate icon
• The same rules apply as above for the translation editor
• Translate the CET into all languages, the same steps as for pages/posts. It is important, that you always translate the CET into all langauages even if you are only changing the styling settings because WPML must copy all settings to the translated language post
• Clear server cache to allow a rebuild of all pages

Using a CET on a page

• This is exactly the same as on non WPML pages
• When finished, save the page
• Always translate the page into all languages

Using WPML Translation Management Dashboard

• Goto WP Dashboard > WPML > Translation Management
• Filter for "ALB Custom Element"
• Hover over a row and below the name you will find a "Translate" link for the element.

• Follow the same steps as described above.