Tutorial to implement the WPML language switcher in your AMP content, will render a fixed language selector (flags) at the bottom of your AMP content.
Accelerated Mobile Pages provide an excellent way rank higher with your mobile content. It can be a little tricky to implement as Google insists on a flawless validation but using the AMP plugin by Automattic sure makes things a lot easier. In fact the only difficulties we’ve had were with the WPML language switcher (which generated an illegitimate stylesheet link) and eventually implementing the language switcher function into AMP content.
Step 1: fixing the WPML language switcher validation error
Problem is the link to the stylesheet for the language switcher, unfortunately there has not been a more elegant solution than to remove the reference to the stylesheet entirely and to add the styling manually to your theme.
Remove link (add to functions.php), click to download code:
To add the styling manually to your theme:
- Add ‘#development=1’ to the post URL (yoursite/post/amp#development=1)
- Use firebug to inspect styles
- Copy/past the stylesheet link into your browser
- Copy the code
- And paste that in your theme’s stylesheet (for example style.css):
Step 2: implementing WPML language switcher into AMP content
This will render the flag icons for all languages translated for the post (add to functions.php), click to download code:
Give it some styling (add to functions.php), click to download code:
And that’s it, I hope this post has been of use to you!
A WordPress wielding, cool rocking daddy in the lowlands. Web development & SEO, development and management of multisites.
Carpentry, Yoga & meditation.
Leave a Reply