How to add WPML language buttons to topbar (Integrity Stack)

[Savz01]

Hi,

currently my language buttons only appear in my footer (which I could set via WPML in my dashboard) but I would like to also add them to my topbar, next to my social icons, like this website:

Summary

http://selfknowledgemanagement.org

Also, the footer background, behind the buttons is grey and I would like to set it to white.
This is my website:

Summary

https://thehumusproject.org/?lang=de

Can you help?

[mldarshana]

Hi there,

Thanks for writing in! To achieve that, create file _topbar.php in wp-content/themes/x-child/framework/views/global/ then copy the code below into that file.

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
      <?php x_social_global(); ?>
      <span class="language-switcher"><?php do_action('icl_language_selector'); ?></span>
    </div>
  </div>

<?php endif; ?>

Hope that helps.

[Savz01]

hi, thanks for your reply. where do i find ‘wp-content/themes/x-child/framework/views/global/’? (i’m a beginner in this and don’t know where to look and where to insert the code…) maybe you could walk me through the steps visually?

[mldarshana]

Hi There,

Sorry for the confusion. You will need to setup a child theme first and activate your child theme. Please refer to our detailed guide here (https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57).

Thanks!

[Savz01]

yes, i have a child theme set up, but don’t know where to look to follow your instructions.

earlier i also asked about changing my grey footer area to white, can you support me in this too?

many thanks!

[lely]

Hi There,

You have to log-in to your server using FTP like filezilla or Cpanel account of your site. Using Filezilla, from the root folder of your wordpress installation go to this location: wp-content/themes/x-child/framework/views/global/****. If global folder doesn’t exist after the view folder, please create it. Using Cpanel, you can find it in File Manager. Same with filezilla, feel free to create the folder that doesn’t exist on the child theme.

Regarding the footer grey area, that is the default body background color. You may reset it to white on X > Launch > Options > Layout and Design > Background Options > Background Color.

Hope this helps.

[Savz01]

Hi, thank you for your help, yes that did work.

The formatting is wrong though. I’d like each language to appear in the Native language (without the additional current language translation - please see my footer as a reference for what I want) and am unable to change this in the plugin settings as there’s no topbar editor option.

Also, I’d like the language buttons to be positioned next to the social media buttons, like on this website:

Summary

http://selfknowledgemanagement.org

[christopher]

Hi there,

Please kindly add the CSS code below to X > Launch > Options > CSS:

.wpml-ls-display {
    display: none;
}

That will make the links like the ones in the Footer.

If you want to have them next to navigation menu it will have lots of styling to do. I suggest that you actually add the language switchers as the menu items.

So add the menu items with the label and links like this:

Label	Link
English	https://thehumusproject.org
Deutsch	https://thehumusproject.org/?lang=de
Nederlands	https://thehumusproject.org/?lang=nl
Português	https://thehumusproject.org/?lang=pt-pt

Thank you.

[Savz01]

Hi, many thanks, that worked regarding the appearance of the buttons.

I don’t wish to have the buttons in my navigation menu, but above it, in the topbar next to the social media icons. In the website I sent you a link to, I previously got support to do this (in an older X version), so I assumed it would be possible?

I would also like the ‘current language’ to remain blue when selected.

[thai]

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

span.language-switcher {
    float: right;
}

.wpml-ls-current-language a {
    color: blue;
}

Hope it helps

[Savz01]

That’s great, thank you!

[Joao]

You are welcome!