WPML Custom Language Switcher

Matt | March 18, 2017

Alert: This is a post intended for WordPress web developers.

Are you using the WordPress Multi Lingual (WPML) plugin to manage multi lingual content? Are you happy with how your language switcher button looks? If your website or theme is custom developed or heavily customized – chances are the easy WPML lang switcher widget looks pretty weird jammed into your header, sidebar, or footer. At Mockingbird, we like to have easily accessible language switcher buttons somewhere in the header. When possible, we will use a custom WPML language switcher to allow more consistent design and a stronger UX. We also try to built our sites as light as possible, using a custom switcher allows you to disable the WPML lang switcher stylesheet, removing 1 more stylesheet from your loaded resources!

The Code

I recommend using the plugin settings – “Link to home of language for missing translations”. Make sure not to use the WPML lang switcher widget in addition to the custom switcher if you have disabled the required stylesheet. You will of course need to style this custom switcher yourself. The php, html, and settings are of course editable, you can find documentation here. WPML has released a Twig solution for a custom switcher to avoid PHP, which seems needlessly complicated – learn more about that here.

The code below will need to be placed in the necessary theme file/location to function correctly. I develop child themes for the Genesis Framework and place this custom switcher code in the functions file within a header area hook. See below: