How to use Multi language in WordPress with Polylang plugin

[admin]

Hi all customer,
In this topic tutorial we’ll help you use multi language in our theme with Polylang plugin.
This is free plugin support multi language in WordPress, more detail about it you can find here:

Polylang

Here is step to step to install and setup multi language on your site.
Step 1: Install Polylang plugin by go to Plugins -> Add New -> Find Polylang on Search box at the top right:

Step 2: Add new language for your site by go to Languages and add new language like this:

In this tutorial we’ll use English is Primary language and French is secondary language.

Step 3: Settings Default language

You can click on Black Star to set Default language. If your site already have data as pages, post,… you can click on the Red Warning to translate it to default language.

After translate all existed posts, pages,… you will see the result like this:

Step 4: Settings Menu

Go to Appearance -> Menus and scroll to bottom you will see Menu for each language like this:

If you done step 3 we already have Menu in English (default language)

Have some ways to display Language Switcher,  however you can display it in Menu by add Languages Switcher to menu:

You can setup this menu item displays as Flags.

Step 5: Translate Home pages and posts, menu,… to Secondary language.

After setup English Menu (Default language) you can go to Homepage and will see like this:

You will don’t see Secondary language (French) because we don’t have Primary Menu for French and Homepage for French too.

Let’s Edit Homepage in Default language (English) and translate it to Secondary language.

Add an Element to test Homepage in French

Comeback to Appearance -> Menus and add new Menu for Primary Menu Francais like this:

Go to Homepage you will see Homepage with 2 Flags like this:

 

Click on Francais Flag you will go to Homepage in French.

You can do it similar with other pages and Posts.

Please note in our theme have Page Options to help you have settings different on Special page. You can view more here: https://harutheme.com/forums/topic/why-theme-options-doesnt-apply-changes/

Step 6: Translate Footer

In our theme use WP Bakery Page Builder to build Footer. So you need change settings of Polylang to use it in Footer translate in Languages -> Settings

After change Settings you can Translate Footer to Secondary language

You also need customize code in Footer to make it compatible with Polylang plugin.

First you should know about customize template use child theme here: https://harutheme.com/forums/topic/customize-wordpress-theme-using-child-theme/

You need customize code in 2 files: (xxx is name of theme)

wp-content/themes/xxx/templates/footer/footer.php

wp-content/themes/xxx/templates/footer/footer-stylesheet.php

The new code in footer.php

$footer_id = get_post_meta( get_the_ID(), 'haru_'.'footer', true );
if ( $footer_id == '' ) {
$footer_id = haru_get_option('haru_footer');
}

$slug = pll_current_language('slug');
$footer_translate_id = pll_get_post( $footer_id, $slug );

$content_post = get_post($footer_translate_id);
$content = $content_post->post_content;
$content = apply_filters( 'the_content', $content );
$content = str_replace( ']]>', ']]>', $content );

$footer_layout = get_post_meta( get_the_ID(), 'haru_'.'footer_layout', true );
if ( ($footer_layout == '') || ($footer_layout == '-1') ) {
$footer_layout = haru_get_option('footer_layout');
}

if ( $footer_layout != 'full' ) : ?>
<div class="<?php echo esc_attr($footer_layout); ?> clearfix">
<?php endif; ?>
<?php echo $content; ?>
<?php if ( $footer_layout != 'full' ) : ?>
</div>
<?php endif; ?>

The new code in footer-stylesheet.php

if ( post_type_exists('haru_footer') && get_posts('post_type=haru_footer') ) { // Use this only when have footer post type
$footer_id = get_post_meta( get_the_ID(), 'haru_' . 'footer', true );
if ( $footer_id == '' ) {
$footer_id = haru_get_option('haru_footer');
}

$slug = pll_current_language('slug');
$footer_translate_id = pll_get_post( $footer_id, $slug );

$content_post = get_post($footer_translate_id);
$content = $content_post->post_content;

if ( $footer_translate_id && (get_the_ID() !== $footer_translate_id) ) {
$shortcodes_custom_css = get_post_meta( $footer_translate_id, '_wpb_shortcodes_custom_css', true );
if ( !empty( $shortcodes_custom_css ) ) {
$shortcodes_custom_css = strip_tags( $shortcodes_custom_css );
echo '<style type="text/css" data-type="vc_shortcodes-custom-css">';
echo wp_kses_post( $shortcodes_custom_css );
echo '</style>';
}
}
}

Step 7: Translate custom post types and Meta box

Similar Footer you need change settings of Polylang to use it in Custom Post types translate:

In this tutorial we’ll use Example with Video custom post type.

Translate Video to French

And you can see the result at Frontend:

Step 8: Translate Header

You can follow this topic tutorial: https://harutheme.com/forums/topic/how-to-process-multi-language-for-header-and-footer/

Other Tips

How to display Language Switcher on Footer

More information and translate other element or use guide of Polylang you can find here: https://polylang.wordpress.com/documentation/

Hope this help you all can use Multi language more easier with our theme.

If you have any question please feedback to us!

 

*******

Best regards,

HaruTheme

• This topic was modified 4 years, 2 months ago by admin.
• This topic was modified 4 years, 2 months ago by admin.
• This topic was modified 4 years, 2 months ago by admin.
• This topic was modified 4 years, 2 months ago by admin.
• This topic was modified 4 years, 2 months ago by admin.
• This topic was modified 4 years, 2 months ago by admin.
• This topic was modified 4 years, 2 months ago by admin.
• This topic was modified 4 years ago by admin.
• This topic was modified 3 years, 11 months ago by admin.
• This topic was modified 3 years, 11 months ago by admin.

[Author]

Posts