Fixing qTranslate problems in WordPress 3.9 & 4.0

08 July, 2014 by Tom Elliott

Update 12/12/14: the steps below also work for WordPress 4.0 and 4.0.1 (latest at time of writing). Checkout Step 5 for more details

One thing that many of us wish WordPress could do better out-the-box is decent multilingual support for manual language translation. There are many options for multi-lingual WordPress sites: translations within a single post, one post for each language, multi-site install etc. Decent WordPress plugin availability seems sparse and limited to a handful of free and paid-for translation plugins.

I was drawn to the popular and highly rated qTranslate by Qian Qin for a recent multilingual WordPress project due to its ability to easily switch between languages within a single post, integration with other plugins and because it is free.

The latest version of qTranslate (2.5.39) however is broken under the latest WordPress (3.9.1 at the time of writing). The majority of the issues with qTranslate seem to have occurred since 3.9, when the updated TinyMCE visual editor was introduced which qTranslate is closely integrated. Solutions to fixing qTranslate are scattered, and I ended up using fixes from a variety of sources before everything fully worked for me.

Here’s the steps I took to fix qTranslate for WordPress which will hopefully save others time. The fixes have been tested with custom post types, posts and pages along with the Advanced Custom Fields ACF plugin for field management. I am unsure how other plugins that may have previously worked with qTranslate have been affected.

It’s a good idea (as always) to backup your WordPress database. Also disable automatic updating of WordPress until you can verify qTranslate is compatible – either in a test environment or until the plugin has been updated to a stable version that has been verified by the community.

Thanks to all those that have done the leg work, all I’ve done here is collate the fixes 🙂

Step 1. qTranslate disabled error message

First thing you might notice when installing the latest qTranslate is the following error message, which appears 3-4 times on posts and pages.

qTranslate disabled error

qTranslate repeated disabled warning message

This is a quick fix; just edit qtranslate.php and update:

define('QT_SUPPORTED_WP_VERSION', '3.8.1');

to the current version of WordPress, i.e.

define('QT_SUPPORTED_WP_VERSION', '4.0.1');

or even better, we can get qTranslate to use the latest version of WordPress automatically

define('QT_SUPPORTED_WP_VERSION', $wp_version);

This fix however just hides the error message and doesn’t deal with the other underlying issues.

Step 2 – issues with visual editor

The next thing that was immediately apparent were a number of issues with the TinyMCE text editor when editing pages, posts or custom post types. These include:

To fix these problems, copy and paste the code given on the below link into the 3 corresponding qtranslate plugin files: qtranslate_hooks.php, qtranslate_javascript.php, qtranslate_wphacks.php
https://gist.github.com/warenhaus/10990386/

Kudos to Warenhaus who provided these fixes.

Step 3 – Additional fields overwriting main content

If you are using the ACF plugin for field management along with the corresponding acf-qtranslate plugin, you may soon notice a problem with ACF text areas and editor fields overwriting the content in the main visual editor. This is caused by a JavaScript issue that incorrectly grabs and writes the content from other text areas into the main editor when working within the ‘Visual’ editing mode.

For this fix, check out Maximbelov’s comment on this thread. Line numbers might differ slightly but the search and replace on the 2 lines of code mentioned within qtranslate_javascript.php fixes the overwriting issue.

Step 4 – height of text editors

If you find TinyMCE doesn’t have enough depth, you can change the height to an arbitrary value using the following function in functions.php

function wptiny($initArray){
    $initArray['height'] = '300px';
    return $initArray;
}
add_filter('tiny_mce_before_init', 'wptiny');

 

Step 5 – Add media button broken in WordPress 4.0.x

Since the WordPress 4.0 release, an additional piece of code is required to fix a conflict with the editor expand feature and the ‘add media’ button. Thanks to Guillaume for this solution!

// Deregister editor-expand as it breaks CKEditor integration
function custom_deregister_editor_expand() {
    wp_deregister_script('editor-expand');
}
add_action( 'admin_init', 'custom_deregister_editor_expand' );

 



43 Comments

  • Artiom says:

    Big thx guys. Good information in one place! Keep up grouping.

  • Artiom says:

    I forgot to describe the system. I use:
    WP 3.9.1
    qTranslate 2.5.39

    Problem:
    Version incompatibility
    Visual editor tab in CMS
    Editor height.

    Conclusions:
    Corrected 3 files that are listed in this article, problems have been resolved.

  • Adler says:

    Thank you! Your tutorial help me so much. 🙂

  • youcef says:

    thank you very much!!!!!!!!!!!!!!!!!!!!!!

  • Joao Marcos says:

    Tanks for this hacks!

  • heike arndt says:

    Dear Tom thanks for your great help -as non profit art gallery the hole staff only works pro bonus and our website is elemantary for our work. best heike

  • Marcin says:

    Thx for this!

  • Diego says:

    This one used to work till 3.9.x but for the new 4.0 does not work. Do you know any fix?

  • manelgarcia says:

    With WordPress 4.0 there is a problem:

    – When clicking to Add media object nothing happens. Also, featured image doesnt work as lightbox its like an usual link.

    Any help?

    Thanks!

  • JF says:

    Anyone a solution for the “Add media” not working bottom issue?

    Thanks!

    • Guillaume says:

      Add this to your function.php file 🙂

      // Deregister editor-expand as it breaks CKEditor integration
      function custom_deregister_editor_expand() {
      wp_deregister_script(‘editor-expand’);
      }
      add_action( ‘admin_init’, ‘custom_deregister_editor_expand’ );

      • Tom Elliott says:

        Hi Guillaume, thanks for taking the time to post a solution – works like a charm! (WordPress 4.0.1) 😀

      • manuela says:

        Hi,
        In regards to step number 5 can you tell me where exactly in the php file of qtranslate do I add that function. Sorry, I don’t know where it goes… also having problems with my add media button. Thanks!

        • Tom Elliott says:

          Hi Manuela, the code snippet should be able to be added anywhere in your theme’s functions.php 🙂

          • Welsley says:

            Hi there, the button which name is “insert into post” still have a problem here, it will inserted the tags into another language text area which is not the current input. Thanks! (WordPress 4.0.1 + qTranslate 2.5.39 and finished the 5 steps above.)

          • Welsley says:

            P.S: Visual editor is OK but text editor when use “insert into post”, the tags will inserted the tags into another language text area which is not the current input. -_-|||

  • Andrus says:

    Thanks a lot! Really fine solution.

  • Nimish says:

    Thank you very much! You saved lots of time.

  • Hi guys,

    Copied the before mentioned code in the functions.php but its still not working.

    Has anybody experienced this?

  • Gaurav moradiya says:

    Thanks! Really fine solution.

  • Steve Jones says:

    Yes indeed – thanks a lot for this. It has saved a lot of heartache after an Italian agriturismo owner I know tried a manual update and broke his site.

  • Kooshyar says:

    thank you so much my friend

  • Julien says:

    Hi ! thanks for all the tips !

    i try to fix the media button problem with @Guillaum ‘s solution but it doesn’t work !

    i added in functions.php :

    Add this to your function.php file 🙂
    // Deregister editor-expand as it breaks CKEditor integration
    function custom_deregister_editor_expand() {
    wp_deregister_script(‘editor-expand’);
    }
    add_action( ‘admin_init’, ‘custom_deregister_editor_expand’ );

    but not working !

    If you have any solution for qtranslate and media button, i will be glad ! thanks

  • Tiago says:

    Thank you!

  • Thanks, thanks, thanks…

    I thought I would go crazy with no solution for the editor dissapearing, you have made my day 😉

  • Robertas says:

    To fix language switchers position in text-editor, place:
    echo “.wp-switch-editor { float:right !important}”; in qtranslate_hooks.php

  • Khanh Luong says:

    Thank you so much (thumb)

  • Hi TOM,

    Thank you so much. I am using qtranslate with WP 4.2.2. & I thought I need to rollback to old version. But You saved my lots of work. Thank you so much.

    About last (5th) Step: It was not needed for me. As media button was working fine after doing first two steps

  • Monique says:

    Thanks! Saved me a lot of work.
    Still have to figure out why the flags aren’t showing anymore (selectors). Any solution to that too?

  • Thanks!
    Very good article!!! It saved lots of time.

    Though, I am having 1 issue with TinyMCE Editor height. WordPress 4.2.1 have autoscroll property and when content height is more than TinyMCE area.

    How to resolve this issue?

    thanks in advance.

  • John says:

    Does this wok for qtranslate-x? anyone have an idea?

    • Tom Elliott says:

      Hi John,

      Although I haven’t tried qtranslate-x, this solution is really only for anyone still using q-translate and probably won’t work for qtranslate-x.

      The below is taken from the plugin page
      At this point, qTranslate-X has many new features and hardly resembles its ancestor.

  • florin says:

    Hi ! After your steps visual editor dont work anymore in wordpress 4.3.1

  • Andrew says:

    I am having problems with visual editor to (WordPress 4.3.1).

  • alex says:

    Also having a problem with the visual editor (wysiwyg mode cant be enabled)

    btw: is qtranslate-x the new qtranslate??

  • Hello, same problem here.. Have anyone found a solution?

    Thanks, regards,

  • Marian says:

    Did somebody find a fix for 4.3.1 ???

  • ben says:

    hi all i install qtranlate-x ,but when i add menu it not working, i using wordpress 4.4.2

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    css.php