Multilingual Customizr – how to guide (using qTranslate) for Customizr 3.0.8

  • First off, I want to thank Nikeo for this awesome theme.

    In this guide I will teach what needs to be modified in the current version (3.0.8) in order to make Customizr play nice with qTranslate. However, my sincere hope is that in some future version, Customizr will become multilingual ready and all these tiny mods won’t be necessary.

    PLEASE BEWARE: If you modify theme files you will lose all those mods on theme update so only do this if you’re willing to do them again with each version or if you’re going to freeze updates for Customizr.

    1. Remove limitations on slider titles, slider descriptions and slider buttons:
    Go to /wp-content/themes/customizr/inc/admin/class-admin-meta-boxes.php and comment out the following lines: 521 to 527, 552 to 558, 756 to 762 (the if-s, with the corresponding accolade). To comment out you either put // in front of each line, or you put /* before the block of lines and */ at the end. Example: (how to comment out lines 756 to 762):

    default://for button, color, title and post link field (actually not a link but an id)
/*                       if (strlen( $mydata) > 80) {
                        $mydata = substr( $mydata,0,strpos( $mydata, ' ' ,80));
                        $mydata = esc_attr( $mydata) . ' ...';
                        }
                        else {
                          $mydata = esc_attr( $mydata);
                        }
*/                     break;

    To remove the 200 chars limitation for featured pages description (between the image and the button, on first page) you need to comment out lines 118 to 125 in /wp-content/themes/customizr/parts/class-content-featured_pages.php.

    An alternative to removing the limitations is to set them higher, in accordance with the number of languages your multilingual website will be set to (double the limit for 2 languages, triple it for 3, etc.).

    This is because qTranslate saves all languages content in the same field and parses the text before it gets output to the browser, only keeping the active language content.

    2. run __() function on content before it gets output in browser
    After we have removed the limitations, we have to make sure that qTranslate actually parses the texts before they get printed in the browser. To do that, we have to make sure they are run by the __() function, but before the text is run through any of the esc_attr(), esc_html() or any similar functions, as they might strip away the language shortcodes.

    For multilingual slider, you need to apply the __() function on $title, $text and $button_text variables in /wp-content/themes/customizr/parts/class-header-slider.php on lines 188, 189 and 191, before the esc_attr() and esc_html() functions, like this:

    $title              = esc_attr(__(get_post_meta( $id, $key = 'slide_title_key' , $single = true )));
                        $text               = esc_html(__(get_post_meta( $id, $key = 'slide_text_key' , $single = true )));
                        $text_color         = esc_attr(get_post_meta( $id, $key = 'slide_color_key' , $single = true )); // this line doesn't need modifying
                        $button_text        = esc_attr(__(get_post_meta( $id, $key = 'slide_button_key' , $single = true )));

    As of now, I haven’t been able to make multilingual excerpts for pages work with Customizr, but I was able to display multilingual content in featured pages area using laguage shortcodes (eg: [:en]English featured page text[:es]Spanish featured page text) in the custom descriptions provided by the Customizr options screen. For this to work you need to wrap the $text variable in __() function on line 196 in /wp-content/themes/customizr/parts/class-content-featured_pages.php, like this:

    <p class=”fp-text-<?php echo $area ?>”><?php echo __($text); ?></p>

    and, for the buttons, on line 199:

    <?php echo esc_attr(__(tc__f(‘__get_option’ , ‘tc_featured_page_button_text’))) ?>

    I hope I didn’t forget anything and also that this helps those of you who were desperately hoping for a solution to make Customizr slider and featured pages multilingual.

    One more thing: in order for all this to work you have to put multilingual texts in the slide fields using qTranslate shortcodes ([:en] english text[:es]spanish text, etc). This is obvious for many, but you need to actually do it in order for the whole thing to work. ??

    Wishing some tweaks into future releases of the theme will render my post useless, I thank you for your time.

Viewing 15 replies - 31 through 45 (of 53 total)
  • Thread Starter acub

    (@acub)

    3.0.14 is qTranslate compatible, no need to edit anything. This topic is now obsolete, I have re-written the code and nikeo has finalized it and it’s now integrated with Customizr.

    Thanks for the info acub, since i didnt find any topics in this matter, ill just ask here.
    For me the translation doesnt work for sliders.
    Upgraded to 3.0.14 and got all the other translations working, but not the sliders.
    I tryed it here.
    Any ideas?

    Thread Starter acub

    (@acub)

    You’re using wrong qTranslate shortcodes. Remove the spaces and the caps and it might start working. (Instead of [: ET], [: en] and [: ru] you should use [:et], [:en] and [:ru]). See a working demo here.

    I′m not using spaces and the [:ET] “works” with big letters – its set like that. Also not working anymore is the language_selection_menu-..it only works for one language, but i use three. Customized with:

    add_action('__logo_title', 'qtr_language_changer');
function qtr_language_changer() {
	echo qtrans_generateLanguageSelectCode('image');
	}
In style.css:

ul.qtrans_language_chooser {
position: fixed;
list-style-type:none;
margin: 132px 0 0 3px;
background-color: rgba(51, 102, 153,.35);
box-shadow: 2px 5px 7px rgba(0,0,0,.21);
border-radius: 10px;
border: 1px rgba(255,255,255,.5) solid;
padding: 7px 10px 7px 22px;
left: -17px;
-webkit-transition: background-color 200ms linear;
-moz-transition: background-color 200ms linear;
-o-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;
z-index: 201;
}
ul.qtrans_language_chooser:hover {background-color: rgba(153,204,255,.65); box-shadow: 3px 8px 10px rgba(0,0,0,.15);}
ul.qtrans_language_chooser li.active {display: none;}
ul.qtrans_language_chooser li a {width: 32px; height: 32px;}

    Any ideas why that is?

    Thread Starter acub

    (@acub)

    I have two websites running on qTranslate and Customizr 3.0.14, one with 2 languages one with 3. Flawless. No idea why it’s not working for you. Use a debug tool, see if any errors are being generated.

    I’ll look into the theme functions and maybe get some ideas. Meanwhile, try estonian with lowercase, just to rule that possibility out. Or at least put in on last spot in your multi-lang texts.

    Thank you for your help acub, sadly changing the ET to et, or removing it, replacing didn’t help.

    Only error i get is:
    event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.js?ver=1.10.2:4

    Don′t think this error is the problem thou.

    Could there be a problem with my “homepage”, because the language selection doesn’t show up there(language_selection only shows up when i click something on the menu and it directs me away from Homepage) and the slider translation doesn’t work and it’s also on the Homepage.

    Then again, all the other translations work on the Homepage, only thing i had to do, to get the second tagline translated was this:

    .site-description:after {
    content:      "[:ET]Oleme esimesed nii online kui k?est-k?tte rendikogujad Eestis";
    display:      block;
    font-size:    0.7em;
    font-weight:  normal;
    opacity:      0.7; 

.site-description:after {
    content:      "[:ru]Мы были первыми гостями, когда из рук в руки в аренду коллекционеров";
    display:      block;
    font-size:    0.7em;
    font-weight:  normal;
    opacity:      0.7;  

.site-description:after {
    content:      "[:en]We are first online and hand-to-hand rent collectors in Estonia";
    display:      block;
    font-size:    0.7em;
    font-weight:  normal;
    opacity:      0.7;
}

    if I left it like this:

    .site-description:after {
    content:      "[:en]We are first[:ru]Мы были первыми гостями[:ET]Oleme esimesed";
    display:      block;
    font-size:    0.7em;
    font-weight:  normal;
    opacity:      0.7;
}

    It made two languages the same font/style/size as the “Site description” and only one the way written in CSS.

    Also every time i click “Home” the language goes to default.

    Tried re-installing all to a different site and having the same issues.

    Thread Starter acub

    (@acub)

    To keep the lang attribute on home, use this function in your child theme’s functions.php:

    add_filter('tc_logo_img_display', 'add_language_to_logo');
add_filter('tc_logo_text_display', 'add_language_to_logo');
function add_language_to_logo($output) {
	return preg_replace( '|href="'.home_url('/').'"|',  'href="'.(function_exists('qtrans_convertURL') ? qtrans_convertURL(home_url('/')): home_url('/')).'"', $output, -1);
	}

    Didn’t have time to test it, but it should work.
    About the rest, I don’t have any advice. I never tried to translate strings using CSS :after declaration. For me it works simple: my tagline is

    [:ro]Romanian tagline[:en]English tagline[:sq]Albanian tagline

    … and so on.
    As for the slider, I have input all my texts (button text, image description and image title) using the above syntax and it worked.

    Thank you acub, the function did fix my “logo” navigation, now it keeps the right language going when pressed, “Home” button still goes back to default language.

    One other thing that is very frustrating is, when i use custom CSS like:

    a.icon-facebook     {color:red;}
a.icon-google       {color:red;}

    or

    .carousel-inner > .item {
-webkit-transition: opacity 2s ease-in-out ;
transition:         opacity 2s ease-in-out ;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
opacity:        1;
z-index:        1;
left:           0;
}
.carousel-inner > .active.left {
opacity:        0;
z-index:        2;
left:           0;
}
.carousel-inner > .active.right {
opacity:        0;
z-index:        2;
left:           0;
}

    …and so on.
    It only applies to one language, not to all three.
    When i change page language, all custom CSS is lost.
    Cheers.

    Got the “Home” button also working with this code:

    if (function_exists('qtrans_convertURL')) {

function qtrans_in_nav_el($output, $item, $depth, $args) {

$attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';

$attributes .=!empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';

$attributes .=!empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';

// Integration with qTranslate Plugin

$attributes .=!empty($item->url) ? ' href="' . esc_attr( qtrans_convertURL($item->url) ) . '"' : '';

$output = $args->before;

$output .= '<a' . $attributes . '>';

$output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;

$output .= '</a>';

$output .= $args->after;

return $output;

}

add_filter('walker_nav_menu_start_el', 'qtrans_in_nav_el', 10, 4);

    But still don’t understand why the CSS only works with English language, as its not even the pages default language.

    [:ro]Romanian tagline[:en]English tagline[:sq]Albanian tagline
    … and so on.
    As for the slider, I have input all my texts (button text, image description and image title) using the above syntax and it worked.

    well, don’t know why yet but slider’s button text, image description and image title managed via the edit media page did not switched the languages to me using the normal short tag [:xx] any idea?

    it packs up all together like writing ([:ro]Romanian tagline[:en]English tagline[:sq]Albanian tagline) all in a row for the title and the button. About the description it makes showing up only the description of the main language cutting off the related descriptions in the other languages and using the description of the main language instead of them.

    ok solution about title and button just in case someone else will have same issue: in class-header-slider.php go to line 237 and change it in <h1 <?php echo $color_style ?>><?php echo __($title) ?></h1> adding __() around $title same for line 245 and 248 wrap $button_text with __() like this __(button_text) .

    still looking how to solve the description topic.

    Thanks for help, let us know if you find out, how to change the description as well.

Viewing 15 replies - 31 through 45 (of 53 total)
  • The topic ‘Multilingual Customizr – how to guide (using qTranslate) for Customizr 3.0.8’ is closed to new replies.