Make STINGER3 (WordPress theme) compatible with WPML (Multilanguage plugin)

This post is also available in: Chinese (Simplified) Russian Spanish Portuguese (Portugal) French Arabic German Japanese

< What’s WPML? >
It is a multilingual plugin for WordPress. I use WPML on this mecrazy blog.
Official website of WPML

< What’s STINGER3? >
This is a theme for WordPress. It has many nice functions without plugin. For example, snippet inserter for ads(like Google Adsense) and cool design social buttons. I have wanted to try to use this theme.
Official website of STINGER3 (Japanese page)

< Hope gentle activity >
The developer of STINGER3 is too busy to answer on Twitter, and I’m not sure he can read languages other than Japanese. If you have any questions about STINGER3, I hope you to find the answer on Google or solve the problems by yourself.

< For the people who can’t read Japanese >
Official website of STINGER3 is in Japanese. I think it’s difficult to find download link of theme zip file. You should find the Japanese word “ダウンロード“. It means “download” in English. Please use CTRL + F to find this word. Please find the current version file name “stinger3ver20140327.zip”.

< Code for compatibility >
The code below give WPML compatibility to STINGER3.

<style type="text/css">

.submenu-languages{
  background-color:#f3f3f3;
  border-style:solid;
  border-color:#dedede;
  border-width:0px 1px 1px 1px;
  position:absolute;
  margin-left:-11px;
  margin-top:21px;
  padding-bottom:5px;
  display:none;
}
.submenu-languages > li{
  white-space:nowrap !important;
  float:none !important;
  display:inline-block !important;
}

.iclflag{ vertical-align:middle;position:relative !important;top:-1px !important; }
#lang_sel{ z-index:1000; }
#lang_sel a{ display:block; }
#lang_sel ul,#lang_sel li,#lang_sel a{
  margin:0px;padding:0px;
  width:300px;
  text-align:left;
  white-space:nowrap;
}
#lang_sel ul,#lang_sel li{ margin:0px !important;padding:0px !important; }
#lang_sel a{ margin:0px !important;padding:0px 7px !important; }
#lang_sel li,#lang_sel a,#lang_sel span{
  height:30px !important;
  line-height:30px !important;
  font-size:14px;
}
#lang_sel > ul > li > ul{ top:31px; }

</style>
<script type="text/javascript">
jQuery(function($){
var langMenuObj = $('.submenu-languages').eq(0);
var wpmlMobile = (typeof(window.orientation) != "undefined");
$('.menu-item-language-current').eq(0).on('mouseenter',function(){
if(!wpmlMobile){langMenuObj.stop(true,true).fadeIn('fast');}
}).on('mouseleave',function(){
if(!wpmlMobile){langMenuObj.stop(true,true).fadeOut('slow');}
}).on('click',function(){
langMenuObj.stop(true,true).toggle();
});
$('.icl_lang_sel_current ').parent().click(function(){ return false; });
});
</script>

< How to insert this code? >
There are 3 example ways to insert the code. Please choose one of them. Or if you know how to customize WordPress, you can insert manually to your PHP scripts.

< Method – 1 >
Go to [ Appearance – Widgets ] of administrator menu. Please add “Text” to one valid area. Please do not enter the title, put the script only in the detail form.

< Method – 2 >
I developed a plugin STINGER3 loves WPML. This plugin do the same thing as “Method – 1”. If you find bugs, please report or tell me on Github, Twitter or Google+.

< Method – 3 >
Using WordPress plugin “Wp Insert“. It can insert HTML code to anywhere on your blog.

< Afterward >
I think each methods are not so difficult. But current version of STINGER3 is not compatible with language mo files. We can only translate with String Translation of WPML. If I have spare time, I want to develop patch for STINGER3 compatible with mo files.

< Updated on June 11, 2014 >
Fixed – It can’t handle first tap event of Android or iOS browsers. Source code on this page and the WordPress plugin on Github are updated.