{"id":11553,"date":"2016-02-11T11:25:36","date_gmt":"2016-02-11T11:25:36","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/faqs\/removing-residual-styling-2\/"},"modified":"2021-05-03T11:24:36","modified_gmt":"2021-05-03T10:24:36","slug":"wpml-setup","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/wpml-setup\/","title":{"rendered":"Creating multilingual mega menus with WPML"},"content":{"rendered":"<p>With Max Mega Menu and WPML you can create multilingual\u00a0Mega Menus for your WordPress site.<\/p>\n<p>In this example we will assume the site and menu has been set up already and WPML has subsequently\u00a0been installed to add support for another language.<\/p>\n<p>Our primary language is English and the language we&#8217;re adding is French.<\/p>\n<h3><span style=\"color: #ff0000;\">IMPORTANT<\/span> Prerequisites<\/h3>\n<p>Under <em>WPML &gt; Languages<\/em>, make sure &#8220;Adjust IDs for multilingual functionality&#8221; is enabled.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-adjustids.png\" rel=\"attachment wp-att-11632\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11632\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-adjustids.png\" alt=\"wpml-adjustids\" width=\"1264\" height=\"793\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-adjustids.png 1264w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-adjustids-300x188.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-adjustids-768x482.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-adjustids-1024x642.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-adjustids-125x78.png 125w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-adjustids-75x47.png 75w\" sizes=\"auto, (max-width: 1264px) 100vw, 1264px\" \/><\/a><\/p>\n<h3>Step 1<\/h3>\n<p>In this step we assume you&#8217;ve already set up a menu for your primary language (English) and enabled Max Mega Menu for it.<\/p>\n<p>Ensure the &#8220;Language&#8221; setting for your English menu is set to &#8220;English&#8221;.<\/p>\n<p>Ensure the menu is tagged to a Theme Location.<\/p>\n<p>Finally, click the &#8220;French&#8221; link to create a new menu.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-1.png\" rel=\"attachment wp-att-11554\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11554\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-1.png\" alt=\"wpml-1\" width=\"1264\" height=\"790\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-1.png 1264w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-1-300x188.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-1-768x480.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-1-1024x640.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-1-125x78.png 125w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-1-75x47.png 75w\" sizes=\"auto, (max-width: 1264px) 100vw, 1264px\" \/><\/a><\/p>\n<h3>Step 2<\/h3>\n<p>We now have a new menu which will act as the French version of our English menu.<\/p>\n<p>Give the menu an appropriate name and click &#8216;Create Menu&#8217;.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-2.png\" rel=\"attachment wp-att-11555\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11555\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-2.png\" alt=\"wpml-2\" width=\"1264\" height=\"790\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-2.png 1264w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-2-300x188.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-2-768x480.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-2-1024x640.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-2-125x78.png 125w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-2-75x47.png 75w\" sizes=\"auto, (max-width: 1264px) 100vw, 1264px\" \/><\/a><\/p>\n<h3>Step 3<\/h3>\n<p>We now need to tell WPML that this new menu is the French version of our English menu. To do this set the &#8220;Translation of&#8221; setting to your English menu.<\/p>\n<p>Again, tag this menu to the same menu location as your English menu.<\/p>\n<p>Finally click &#8216;Save Menu&#8217;.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-3.png\" rel=\"attachment wp-att-11556\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11556\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-3.png\" alt=\"wpml-3\" width=\"1264\" height=\"793\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-3.png 1264w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-3-300x188.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-3-768x482.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-3-1024x642.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-3-125x78.png 125w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-3-75x47.png 75w\" sizes=\"auto, (max-width: 1264px) 100vw, 1264px\" \/><\/a><\/p>\n<h3>Step 4<\/h3>\n<p>We now have 2 menus: an English menu and a French menu which are linked together.<\/p>\n<p>You can now set up your French menu how you wish.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-4.png\" rel=\"attachment wp-att-11557\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11557\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-4.png\" alt=\"wpml-4\" width=\"1264\" height=\"793\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-4.png 1264w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-4-300x188.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-4-768x482.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-4-1024x642.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-4-125x78.png 125w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml-4-75x47.png 75w\" sizes=\"auto, (max-width: 1264px) 100vw, 1264px\" \/><\/a><\/p>\n<h3>End Result<\/h3>\n<p>The English menu will be automatically swapped out for the French menu when the site is viewed in French. Max Mega Menu is enabled for both menus.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml.gif\" rel=\"attachment wp-att-11558\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11558\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/02\/wpml.gif\" alt=\"wpml\" width=\"860\" height=\"540\" \/><\/a><\/p>\n<h3>Translating the mobile toggle block text<\/h3>\n<p><em>Requires Max Mega Menu v2.3.7+.<\/em><\/p>\n<p>The same menu theme will be used across both languages. As the text for the mobile toggle block is defined in the menu theme, it will appear the same for all of your languages.<\/p>\n<p>We can use a shortcode to change the menu toggle text depending on the current language.<\/p>\n<p>Step 1: Install the <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/wpml-shortcodes\/\">WPML Shortcodes<\/a> plugin (this plugin has not been updated for a while, but it is very basic and still works as it should).<\/p>\n<p>Step 2: Go to <em>Mega Menu &gt; Menu Themes<\/em>. In the mobile section,\u00a0edit the mobile toggle block settings and use the following shortcode to display different text depending on the current language.<\/p>\n<pre class=\"lang:default decode:true\">[wpml_if lang='en']MENU[\/wpml_if][wpml_if lang='de']Men\u00fc[\/wpml_if]<\/pre>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/05\/wpml-shortcode-mobile-toggle-block.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-113332\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/05\/wpml-shortcode-mobile-toggle-block.png\" alt=\"\" width=\"2120\" height=\"1348\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/05\/wpml-shortcode-mobile-toggle-block.png 2120w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/05\/wpml-shortcode-mobile-toggle-block-300x191.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/05\/wpml-shortcode-mobile-toggle-block-768x488.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/05\/wpml-shortcode-mobile-toggle-block-1024x651.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/05\/wpml-shortcode-mobile-toggle-block-50x32.png 50w\" sizes=\"auto, (max-width: 2120px) 100vw, 2120px\" \/><\/a><\/p>\n<h3>Translating the Logo mobile toggle block URL<\/h3>\n<p><em>Requires Max Mega Menu Pro 1.6.4+<\/em><\/p>\n<p>As above, it is possible to use a shortcode for the logo URL (note, you will need to install the WPML Shortcodes plugin as described above). For example:<\/p>\n<pre class=\"lang:css decode:true \">[wpml_if lang='en']http:\/\/www.google.com[\/wpml_if][wpml_if lang='de']http:\/\/www.google.de[\/wpml_if]\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With Max Mega Menu and WPML you can create multilingual\u00a0Mega Menus for your WordPress site. In this example we will assume the site and menu has been set up already and WPML has subsequently\u00a0been installed to add support for another language. Our primary language is English and the language we&#8217;re&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[14],"ht-kb-tag":[],"class_list":["post-11553","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-faqs"],"uagb_featured_image_src":[],"uagb_author_info":{"display_name":"Tom Hemsley","author_link":"https:\/\/www.megamenu.com\/author\/megamenu\/"},"uagb_comment_info":0,"uagb_excerpt":"With Max Mega Menu and WPML you can create multilingual\u00a0Mega Menus for your WordPress site. In this example we will assume the site and menu has been set up already and WPML has subsequently\u00a0been installed to add support for another language. Our primary language is English and the language we&#8217;re...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/11553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/comments?post=11553"}],"version-history":[{"count":11,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/11553\/revisions"}],"predecessor-version":[{"id":294728,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/11553\/revisions\/294728"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=11553"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=11553"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=11553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}