{"id":24625,"date":"2016-09-02T14:41:45","date_gmt":"2016-09-02T13:41:45","guid":{"rendered":"https:\/\/www.megamenu.com\/?post_type=ht_kb&#038;p=24625"},"modified":"2016-09-02T14:54:59","modified_gmt":"2016-09-02T13:54:59","slug":"how-to-add-a-wpml-language-selector-to-the-mobile-menu","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/how-to-add-a-wpml-language-selector-to-the-mobile-menu\/","title":{"rendered":"How to add a WPML Language selector to the mobile toggle bar"},"content":{"rendered":"<p>In this guide we&#8217;ll go through some quick steps detailing how to add a WPML language selector to your mobile menu toggle bar.<\/p>\n<h3>Step 1: Add a shortcode to display the WPML Language selector<\/h3>\n<p>First we need to create a method to display the language selector. To do this we will create a shortcode which will display the language selector.<\/p>\n<p>Paste the following code into your themes functions.php file.<\/p>\n<pre class=\"lang:default decode:true\">\/**\r\n * Create a shortcode to display a WPML Language selector\r\n *\r\n * Usage: [mmm_wpml_lang_selector]\r\n *\/\r\nfunction mmm_wpml_shortcode_func(){\r\n    ob_start();\r\n    do_action('icl_language_selector');\r\n    $output_string = ob_get_contents();\r\n    ob_end_clean();\r\n\r\n    return $output_string;\r\n}\r\nadd_shortcode( 'mmm_wpml_lang_selector', 'mmm_wpml_shortcode_func' );<\/pre>\n<p>You can now use the [mmm_wpml_lang_selector] shortcode to display the WPML language selector anywhere on your site.<\/p>\n<h3>Step 2: Add an &#8220;HTML&#8221; Toggle Block to the mobile toggle bar<\/h3>\n<p>Go to <em>Mega Menu &gt; Menu Themes<\/em> and scroll down to the Mobile Menu section.<\/p>\n<p>Use the Toggle Bar Designer to add a &#8216;HTML&#8217; block to the toggle bar, and paste in the shortcode ([mmm_wpml_lang_selector]).<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/wpml-language-selector-mobile-menu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24632\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/wpml-language-selector-mobile-menu.png\" alt=\"wpml-language-selector-mobile-menu\" width=\"903\" height=\"583\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/wpml-language-selector-mobile-menu.png 903w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/wpml-language-selector-mobile-menu-300x194.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/wpml-language-selector-mobile-menu-768x496.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/wpml-language-selector-mobile-menu-50x32.png 50w\" sizes=\"auto, (max-width: 903px) 100vw, 903px\" \/><\/a><\/p>\n<p>Save the theme.<\/p>\n<h3>Step 3: Adjust the positioning of the language selector<\/h3>\n<p>After checking your menu you will notice the language selector sits right at the top of the toggle bar.<\/p>\n<p>To vertically align the language selector, add the following into the Custom Styling section of your menu theme:<\/p>\n<pre class=\"lang:default decode:true\">#{$wrap} #lang_sel {\r\n    margin-top: 7px; \/* Adjust this value to move the selector up or down *\/\r\n}<\/pre>\n<h3>Final Result<\/h3>\n<p>After completing the steps you should now see a language selector inside your mobile toggle bar.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/wpml-mobile-toggle-block.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24633\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/wpml-mobile-toggle-block.png\" alt=\"wpml-mobile-toggle-block\" width=\"550\" height=\"70\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/wpml-mobile-toggle-block.png 550w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/wpml-mobile-toggle-block-300x38.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/wpml-mobile-toggle-block-50x6.png 50w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this guide we&#8217;ll go through some quick steps detailing how to add a WPML language selector to your mobile menu toggle bar. Step 1: Add a shortcode to display the WPML Language selector First we need to create a method to display the language selector. To do this we&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[14],"ht-kb-tag":[],"class_list":["post-24625","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":"In this guide we&#8217;ll go through some quick steps detailing how to add a WPML language selector to your mobile menu toggle bar. Step 1: Add a shortcode to display the WPML Language selector First we need to create a method to display the language selector. To do this we...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/24625","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=24625"}],"version-history":[{"count":8,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/24625\/revisions"}],"predecessor-version":[{"id":24636,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/24625\/revisions\/24636"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=24625"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=24625"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=24625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}