Support » Theme: Brand » Adding Polylang language switcher icon

  • Resolved itweb99

    (@itweb99)


    Hello there,
    I’m building my property website on Brand free theme and i would to have the site in english as well in thai and i’ve installed polylang plugin.
    How do i add polylang language switcher icon in the nav bar after menu.
    Please help
    Thanks in advance
    Best,
    Nitesh

Viewing 15 replies - 1 through 15 (of 17 total)
  • Theme Author maxsdesign

    (@maxsdesign)

    Hi @itweb99,
    The language switcher is a feature of Polylang plugin, you can read the instructions on its documentation page
    Please let me know if I can help you further.

    I want to put the language switcher icon in the header after search icon, where can i add it? Which file?
    Also the logo disappear on mobile and tablet, how to fix it?
    On desktop it show the logo but on phone it only shows search icon and three line (menu mobile compact view).

    Theme Author maxsdesign

    (@maxsdesign)

    If you use compact menu even on desktop, you can add this function in your functions.php file:

    function brand_compact_navigation() {
    	$brand_settings = wp_parse_args(
    		get_option( 'brand_settings', array() ),
    		brand_get_defaults()
    	);
    	$search_icon = 'enabled' === $brand_settings['nav_search'] ? '<a href="#" class="search-form-icon"><i class="fa fa-fw fa-search menu-search-form-icon"></i></a>' : '';
    	?>
    	<div class="compact-menu-icons">
    		<?php echo $search_icon; // WPCS: XSS ok. ?>
    		<ul style="list-style-type:none;margin:0 10px;padding:0;"><?php pll_the_languages( array( 'show_flags' => 1, 'show_names' => 0, 'hide_current' => 1 ) );?></ul>
    		<a id="mobile-menu-button" class="c-hamburger c-hamburger--htx">
    			<span>toggle menu</span>
    		</a>
    	</div>
    	<?php
    }

    Adjust pll_the_languages function as you need, you can find more in the documentation.

    I suggest to use a child theme, or you’ll lost your changes on next theme update.

    To show the logo on mobile devices you have to choose an image in Site Identity > Mobile logo.

    ok ,so the language switcher icon is showing on mobile view(compact menu) but not on desktop.
    I inserted the above code from in function.php file after 1st line –
    <? php
    function brand_compact_navigation() {…………………………………..
    So i want the language icon to show on desktop as well.

    And the menu is close to the logo(logo on left) i want the menu to be on the right or center how ?

    Thanks

    Theme Author maxsdesign

    (@maxsdesign)

    As I said in the previous reply, this solution works if you set to yes Layout > Navigation > Use compact menu on desktop.
    You should see something like this:

    Polylang switcher icon sample

    The code should be in the functions.php of a child theme, but you can place it at the bottom of the file. Remember that in this way you will lost your changes on next theme update.
    The menu should be on the right, can you provide a url or a screenshot to take a look?

    • This reply was modified 2 years, 2 months ago by  maxsdesign.

    I want the menu/navigation to be on the right, now its more towards the logo, on the left.link below
    https://drive.google.com/file/d/0B35RsB97MvGLeFFrZFViLVVXRGc/view?usp=sharing
    I want to have the menu like this
    Please follow this link to view the image
    https://drive.google.com/file/d/0B35RsB97MvGLMkcwMldmZnVNWDQ/view?usp=sharing

    • This reply was modified 2 years, 2 months ago by  itweb99.
    • This reply was modified 2 years, 2 months ago by  itweb99.
    Theme Author maxsdesign

    (@maxsdesign)

    I saw the image. How did you insert the flag? Maybe it needs only a little style adjustment, but I need to see the code that you used.

    I inserted the below code in function.php, as you told me to add there.

    function brand_compact_navigation() {
    	$brand_settings = wp_parse_args(
    		get_option( 'brand_settings', array() ),
    		brand_get_defaults()
    	);
    	$search_icon = 'enabled' === $brand_settings['nav_search'] ? '<a href="#" class="search-form-icon"><i class="fa fa-fw fa-search menu-search-form-icon"></i></a>' : '';
    	?>
    	<div class="compact-menu-icons">
    		<?php echo $search_icon; // WPCS: XSS ok. ?>
    		<ul style="list-style-type:none;margin:0 10px;padding:0;"><?php pll_the_languages( array( 'show_flags' => 1, 'show_names' => 0, 'hide_current' => 1 ) );?></ul>
    		<a id="mobile-menu-button" class="c-hamburger c-hamburger--htx">
    			<span>toggle menu</span>
    		</a>
    	</div>
    	<?php
    }

    But the menu is now moved towards the logo.
    Thank you so much for all your help.

    • This reply was modified 2 years, 2 months ago by  itweb99.

    hi max,
    I’m having trouble adding the language switch icon on desktop view I even set no to “use compact view on desktop”, though its showing on mobile view. I created a child them and i added this code to function.php of child them:

    function brand_compact_navigation() {
    	$brand_settings = wp_parse_args(
    		get_option( 'brand_settings', array() ),
    		brand_get_defaults()
    	);
    	$search_icon = 'enabled' === $brand_settings['nav_search'] ? '<a href="#" class="search-form-icon"><i class="fa fa-fw fa-search menu-search-form-icon"></i></a>' : '';
    	?>
    	<div class="compact-menu-icons">
    		<?php echo $search_icon; // WPCS: XSS ok. ?>
    		<ul style="list-style-type:none;margin:0 10px;padding:0;"><?php pll_the_languages( array( 'show_flags' => 1, 'show_names' => 0, 'hide_current' => 1 ) );?></ul>
    		<a id="mobile-menu-button" class="c-hamburger c-hamburger--htx">
    			<span>toggle menu</span>
    		</a>
    	</div>
    	<?php
    }

    Please see the screesnhot
    1.) Compact view on desktop is set to no
    2.) function.php of child theme
    3.)Mobile/compact view

    Theme Author maxsdesign

    (@maxsdesign)

    Hi itweb99,
    you see the icon only on small devices because that function adds the icon only in the compact menu. You need to add the icon in the menu as well (docs here), add a class to that menu item and hide the icon on small devices like so:

    @media (max-width: 1024px) {
        .your-switcher-icon-item-class {
            display:none;
        }
    } 

    how to add the icon in menu via widget, but there’s no menu widget.

    i want the icon to show on mobile as well as on desktop

    Theme Author maxsdesign

    (@maxsdesign)

    Yes, as I said, to see the icon even on desktop you have to add it to the menu.
    In the Polylang docs you can read:

    You can include the Polylang language switcher in your menu. If you don’t see the language switcher metabox, check that it is not disabled in the screen options.

    i dont see it
    screenshot

    could you please write down each steps to add the language switch icon in child theme .

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Adding Polylang language switcher icon’ is closed to new replies.