Home Forums Themes Support How to use Multi language in WordPress with Polylang plugin

This topic contains 0 replies, has 1 voice, and was last updated by  admin 1 month, 2 weeks ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #3623

    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: http://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: http://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('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('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:

    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 1 month, 2 weeks ago by  admin.
    • This topic was modified 1 month, 2 weeks ago by  admin.
    • This topic was modified 1 month, 2 weeks ago by  admin.
    • This topic was modified 1 month, 2 weeks ago by  admin.
    • This topic was modified 1 month, 2 weeks ago by  admin.
    • This topic was modified 1 month, 2 weeks ago by  admin.
    • This topic was modified 1 month, 2 weeks ago by  admin.
    • This topic was modified 1 month, 2 weeks ago by  admin.
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.