Phuket Website Design, Graphic Design, E-Marketing, Printing and more..
+66 (0)76 381 039

Advanced Custom Fields and qTranslate-X

23 August 2016
Website Design, WordPress

One of our favorite plugins when building WordPress sites is the fantastic Advanced Custom Fields (ACF) by Elliot Condon which makes creating, editing and using custom fields within posts extremely easy. For those sites that simultaneously use the popular multilingual plugin qTranslate-X, however, things aren’t as straightforward. There is a plugin in the WordPress repository, ACF qTranslate, which supposedly allows custom fields to work with qTranslate but it hasn’t been updated for a while and appears to be broken when using the latest versions of ACF (v5.4 and higher).

The fix, however, is quite simple. One of the great things about ACF are the multitude of filters that have been made available by the plugin author, which allows us developers to customize how fields are rendered.  Follow the steps below to get ACF and qTranslate-X working together:

  1. Before we get to the ACF part of the fix, you’ll need to add a class name to fields you want to be multilingual.  Head over to your qTranslate-X settings page (Settings > Language) in the WordPress admin area and click on the “Integration” tab.
     
  2. Scroll down and find the “Custom Fields” setting.  You’ll see an input field for “class”.  Here you can add a class name for custom fields that you would like to be multlingual.  In our case, we’ve used the class name “translatable” as shown in the screenshot below. Once you’ve added the class name, save your changes.

    Class name in qTranslate-X Integration settings

  3. Now let’s head on over to your ACF field settings.  For every field that you would like to be multilingual, add the class name you added in step 2 to the “class” field in the “Wrapper Attributes” section, as below:Multilingual class name in Wrapper Attributes setting of ACF
     
  4. Almost done. Within the ACF field settings, you can’t add a class name directly to the input or textarea field that you would like to be multilingual.  So instead, we’ve added it to the wrapper in step 3 and now we need to use an ACF filter to add it to the input or textarea itself.  In your theme’s functions.php file, add the following snippet:
    add_filter('acf/prepare_field', 'my_translatable_acf_fields');
    function my_translatable_acf_fields($field){
        if (strpos($field['wrapper']['class'], 'translatable') !== false){
            $field['class'] = 'translatable';
        }
        return $field;
    }

     

  5. That’s all.  Now when you use qTranslate’s language switcher within your post editing screen, your “translatable” fields will be multilingual – allowing you to add content in different languages.

Hope this helps those of you using Advanced Custom Fields and qTranslate-X together. If you have questions or feedback, let us know in the comments below.

5 Comments for this entry

Leave a Comment