[Eric VGLParticipant]

Hi guys,

been browsing the forum but figured that I would like to give you the URL I need help with to get a tailored solution – as it seems everybody with a similar topic had specific requests.

So I want the WPML language switcher in the top bar. Pasting the WPML php code into the top bar field didn’t do it, obviously…
Please advise!

Thanks a lot!

[Eric VGLParticipant]

This reply has been marked as private.

[RadModerator]

Hi Eric,

Thanks for writing in.

Topbar isn’t setup for that, it only accept plain text content. Though, I’ll add this as feature request.

All I could provide is recommendation and not customization. Please follow these,

1. Copy this file _topbar.php from \wp-content\themes\x\framework\views\global\ and paste it on your child theme of same folder structure (eg. \wp-content\themes\x-child\framework\views\global\ )

2. Edit your child theme’s _topbar.php and add your language switcher’s code after this line,

<div class="x-topbar-inner x-container max width">

For example,

<div class="x-topbar-inner x-container max width">
<?php do_action('icl_language_selector'); ?>

Reference : https://wpml.org/documentation/getting-started-guide/language-setup/#language_switcher

3. Save it and upload.

Hope this helps.

[Eric VGLParticipant]

Hi guys,

thanks a bunch, your directions were spot on – unluckily, the result is not, but pretty sure this has do to with the provided language switcher code and not with X. I turned the topbar off for now, all I got was a topbar extended in width with no language switcher in sight.

Trying another angle:

I originally opted for the topbar for a simple reason: I have one one-page navigation and another, similar menu for when you’re on single pages (like shop or a blog entry). I can only choose one menu to have the language switcher included in by default though. So if you alternatively have an idea for that problem, i’d be glad!

If that would be an option, I would need to come up with a way to stylistically differentiate the languages from classic menu items so that they don’t look like they’re yet another page (hence my first idea to go for the topbar). I was thinking along the lines of this (see screenshot):

– a bit of space between the last menu item and the language switcher
– a “|” between the languages, which are shortened to “EN” and “DE”
– the active language is shown in bold

> is this manageable and could you help achieve it?

Thanks so much!!

[JadeModerator]

Hi there,

There might just be some custom CSS styling that is hiding the language switcher option on the site. I would love to check on this but kindly provide your wordpress admin and FTP details in a private response.

Thank you.

[Eric VGLParticipant]

This reply has been marked as private.

[Eric VGLParticipant]

Just send login credentials but still want to stress one point:

If I were free to choose, I would definitely opt for the solution that includes the switcher in the two menus with the CSS styling I sketched out (see #763245).

Still super interested in the top bar approach, but more for educational reasons, really 🙂

Thanks!!

[RadModerator]

Hi Eric,

Sure, noted that and forwarded.

Though, I can’t really provide detailed customization of the switcher. It’s the native switched provided by WPML and not by X. There is no X styling available yet, nor the structure. It has to be done with accurate integration.

This is best handled by a developer for now like from here https://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/, you may copy the same code and styling.

Thanks!

[Eric VGLParticipant]

Hi Staff,

allright, duly noted. Your answer made me wonder though: I DID integrate the language switcher in my one-page-navigation on the homepage but I don’t see how I can come up with a solution to add it to the second menu as well.

Let me explain once again: I have a one-page nav for the homepage and then, when you visit subpages (a blog post, the shop) I needed to create another menu similar to the one-page nav as this one obviously works on the homepage only.

So what I’m really asking is: How can I include the language switcher into both menus? Can I code the header?

Thank you!
Eric

[Eric VGLParticipant]

Update: It’s so easy sometimes… I added the language switcher to the “other” menu (the one that’s not one-page) via the WPML options. I then put “external links” into the one page navigation, linking to the language versions of the homepage. As the homepage is the only site using the one-page nav, there’s no need to really use the switcher, so I just faked it.

Pretty happy with that solution.

Last Question: Is there a way to put a divider line in both menus to separate the language switcher from the navigation?
Something like this:

HOME ISSUE #02 BLOG NEWSLETTER SHOP | ENGLISH GERMAN

here’s the site again: http://www.vegan-good-life.com

That would be amazing!
Thank you!

[Rue NelModerator]

Hello There,

Thanks for the updates! It good to know that the solution worked out for you. To put a divider line in both menus to separate the language switcher from the navigation, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop #menu-item-2170:before {
    content: "";
    display: block;
    padding: 0 !important;
    position: absolute;
    top: 29px;
    width: 2px;
    height: 20px;
    background-color: hsl(0,0%,39%);
    overflow: hidden;
}

Please let us know if this works out for you.

[Eric VGLParticipant]

Amazing, works like a charm!
EDIT: only works in one page nav, not in standard menu. Also doesn’t show in German language on one page nav (WPML translation). Ideas?

A couple new questions popped up, as well:

– Any chance to widen the gaps left and right to the | symbol?
– How can I switch the menu items from saying “ENGLISH” and “GERMAN” to saying “EN” and “DE”?
– Is it possible to not have the active language shown as active (meaning underlined and in the highlighted color)?

Thank you guys!

[Paul RModerator]

Hi Eric,

To achieve that, you can add this under Custom > CSS in the Customizer.

.x-navbar .desktop #menu-item-974:after {
    content: "";
    display: block;
    padding: 0 !important;
    position: absolute;
    top: 29px;
    width: 2px;
    height: 20px;
    background-color: hsl(0,0%,39%);
    overflow: hidden;
}

.x-navbar .desktop #menu-item-2170:before {
    content: "";
    display: block;
    padding: 0 !important;
    position: absolute;
    top: 29px;
    width: 2px;
    height: 20px;
    background-color: hsl(0,0%,39%);
    overflow: hidden;
}

.x-navbar .desktop .x-nav >  .menu-item-language > a,
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-2170 > a,
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-2171 > a {
    box-shadow:none;
    color:hsl(0,0%,39%);
}

.x-navbar .desktop #menu-item-974 > a,
.x-navbar .desktop #menu-item-1787 > a {
     padding-right:24px;
}

.x-navbar .desktop .x-nav >  .menu-item-language > a,
.x-navbar .desktop #menu-item-2170 > a {
     padding-left:24px;
}

.x-navbar .desktop  #menu-blog-menu li:last-child > a {
     padding-left:0;
}

With regards to changing it to EN or DE, regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[Author]

Posts