How to Integrate the Google AJAX Translation Plugin Into the Twenty Ten WordPress Theme

My previous post explained why I chose the Google AJAX Translation WordPress plugin for translating the content of this website. However, to fully integrate the plugin into this website’s Twenty Ten theme, I needed to modify both the Google AJAX Translation plugin and the Twenty Ten theme. This post describes those modifications.

1. Visual Integration

The Google AJAX Translation plugin adds a link to posts, comments and pages. When clicked, the link displays a popup menu from which readers can select the language into which they want the content translated. To follow the convention of the plugin’s documentation, I’ll refer to this link as the [Translate] link. The following screenshot shows the default [Translate] link inserted into a post:

The unmodified [Translate] link inserted into a post by the Google AJAX Translation WordPress plugin

The modifications described in this post visually integrate the [Translate] link into the Twenty Ten theme by positioning the link in the meta data under post, comment and page titles. This screenshot shows the [Translate] link integrated into the meta data under a post title:

The integrated [Translate] link inserted into a post by the Google AJAX Translation WordPress plugin

The next screenshot shows the [Translate] link integrated into the meta data of a post comment:

The integrated [Translate] link inserted into a comment by the Google AJAX Translation WordPress plugin

This final screenshot shows the [Translate] link integrated into the meta data under a page title:

The integrated [Translate] link inserted into a page by the Google AJAX Translation WordPress plugin

2. The Loop, Single Posts and Pages

As stated on the Google AJAX Translation plugin’s FAQ page, calling the google_ajax_translate_button method of the $GoogleTranslation object enables the [Translate] link to be placed anywhere in the WordPress loop:

if ( method_exists( $GoogleTranslation, 'google_ajax_translate_button' ) ) {
    $GoogleTranslation -> google_ajax_translate_button();
}

Inserting this code into Twenty Ten’s single.php (single posts) and post.php (pages) files worked correct. To place the [Translate] link under post and page titles, I added the google_ajax_translate_button method call to the <div class="entry-meta"> tag:

<div class="entry-meta">
    <?php twentyten_posted_on(); ?>. <?php
        if( method_exists( $GoogleTranslation, 'google_ajax_translate_button' ) ) {
            $GoogleTranslation -> google_ajax_translate_button();
        }
    ?>
</div><!-- .entry-meta -->

Unfortunately, the [Translate] link was not displayed when I added the same code to Twenty Ten’s loop.php file, which is responsible for displaying the front page of WordPress blogs as well as their search results. After trial and error, I found that to display the [Translate] link, I had to declare the $GoogleTranslation object as global before the call to method_exists in loop.php:

global $GoogleTranslation;
if ( method_exists( $GoogleTranslation, 'google_ajax_translate_button' ) ) {
    $GoogleTranslation -> google_ajax_translate_button();
}

3. Post Comments

To display the [Translate] link correctly in post comments, I made two changes. The first change added the following code to the twentyten_comment function in Twenty Ten’s functions.php file:

global $GoogleTranslation;
if ( method_exists( $GoogleTranslation, 'google_ajax_translate_button' ) ) {
    $GoogleTranslation -> google_ajax_translate_button('comment');
}

Note the addition of the 'comment' parameter to the google_ajax_translate_button method. The original google_ajax_translate_button method does not take a parameter because the single method it calls, get_google_ajax_translate_button, does not take a parameter either.

The second change makes the google_ajax_translate_button and get_google_ajax_translate_button methods comment-aware by using a $type parameter. These two methods are implemented in the Google AJAX Translation plugin’s ajaxtranslation.php file.

The first edit to ajaxtranslation.php added the $type parameter to the google_ajax_translate_button method and passed the value of that parameter to the get_google_ajax_translate_button method:

function google_ajax_translate_button($type = 'post') {
    echo $this -> get_google_ajax_translate_button($type);
}

The second edit to ajaxtranslation.php added the $type parameter to the get_google_ajax_translate_button method:

function get_google_ajax_translate_button($type = 'post') {

The final edit to ajaxtranslation.php added the $type parameter to the generate_translate_block method call in the get_google_ajax_translate_button method. This ensures that a comment-specific [Translate] link block is generated when ‘comment’ is used as the value of the $type parameter:

$translate_block = $this -> generate_translate_block($type);

Without these edits, clicking a comment’s [Translate] link displays the language popup menu below the post’s [Translate] link, rather than below the comment’s [Translate] link.

4. CSS Styling

The changes described so far ensure the [Translate] link displays correctly in the loop, single posts, comments and pages. The remaining changes style the [Translate] link to integrate it visually into the Twenty Ten theme.

The first styling change restores the underline to the [Translate] link. To display the underline, I added the following CSS at the end of the Google AJAX Translation plugin’s google-ajax-translation.css file:

.translate_translate,
.translate_links a {
    text-decoration: underline !important;
}

The second styling change places the [Translate] link to the right of the meta data under post, comment and page titles. To implement this change, I edited the HTML returned by the generate_translate_block method in the Google AJAX Translation plugin’s ajaxtranslation.php file. Specifically, I changed the div tag to a span tag and removed the div tag’s style attribute:

return '<span class="translate_block">' . "\n" .
    $translate_block .
    "</span>\n";

The final styling change removes the [ and ] square brackets enclosing the word Translate. To do this, I removed the [ and ] characters from the $before_translate and $after_translate variables in the Google AJAX Translation plugin’s ajaxtranslation.php file:

var $before_translate = ''; // text to display before and after "Translate" link
var $after_translate = '';

Explore the posts, comments and pages of this website to see how the [Translate] link is integrated into the Twenty Ten theme.

Everything in this post refers to version 0.6.0 of the Google AJAX Translation plugin and version 1.0 of Twenty Ten, the new default WordPress theme.

blog comments powered by Disqus