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 - 1 through 15 (of 53 total)

  • Wow! Thanks acub. Apart from this meaning that merging my 2 single-language sites into one multi-lingual site just moved up my to-do list, this makes me very happy, because the task will be easier ??

    @nikeo: any chance this can be implemented as default in a future release?

    Thank you guys – I see whether this works for me!

    Thread Starter acub

    (@acub)

    There’s one more modification you might be interested in, if you’re using Customizr and qTranslate.

    While the menus are working fine, applying the language variable (?lang=XX) to all links, the home link needs a little modification or your users will always be directed to the home page without the language information when pressing the site title or logo, depending on what you have.

    For this to work, you need to replace line 151 in wp-content/themes/customizr/parts/class-main-header.php with:

    <h1><a class="site-logo" href="<?php echo esc_url( home_url( '/' ) ); if ($_GET['lang']) echo '?lang='.$_GET['lang']; ?>" title="<?php echo esc_attr( get_bloginfo( 'name' , 'display' ) ); ?> | <?php bloginfo( 'description' ); ?>"><img src="<?php echo $logo_src ?>" alt="<?php _e( 'Back Home' , 'customizr' ); ?>" <?php echo $logo_img_style ?>/></a>

    and line 158, in the same file, with:

    <h1><a class="site-title" href="<?php echo esc_url( home_url( '/' ) ); if ($_GET['lang']) echo '?lang='.$_GET['lang']; ?>" title="<?php echo esc_attr( get_bloginfo( 'name' , 'display' ) ); ?> | <?php bloginfo( 'description' ); ?>"><?php bloginfo( 'name' ); ?></a>

    Now the language information won’t get lost.
    Later edit: I have used backticks for code, but it doesn’t show up in a code window. Sorry about that.

    Thread Starter acub

    (@acub)

    I have good news.

    You do not have to modify the theme’s files for all the above to work. All you need is to create the folder structure in your child theme folder and put the modified files there, leaving the originals untouched. The files in your child theme will have priority over the ones in customizr.

    So yes, you may use Customizr and qTranslate while being able to update Customizr.

    However, if the files you’re copying and modifying in your child theme will get changed and have added functionality in future releases of Customizr, you will not see those features until you don’t delete (or rename) your child theme modified files. However, it’s a great way to keep track of what files you modified and you’ll be able to make those mods again on the updated files of Customizr, again saving them in your own child theme.

    Theme Author presscustomizr

    (@nikeo)

    @acub : thanks for this awesome guide, great job!
    This will be very useful for many users.

    I think it should be included in the FAQ list here https://www.themesandco.com/customizr/faq/

    What do you think?

    Thread Starter acub

    (@acub)

    I don’t think. I thank. You. For an awesome theme. ??

    Theme Author presscustomizr

    (@nikeo)

    ??

    Thread Starter acub

    (@acub)

    On another note, I’d be more than happy to provide help on making a future release of Customizr multilingual (by qTranslate) ready. Now, after I’ve done the mods, I thought about a much cleaner way to do them.

    Just let me know if I may start working on the current theme files or you have a development version for that. I think I can do it in a few hours.

    Definitely add to FAQ, as Translate posts appear quite often.

    Great stuff @acub

    Theme Author presscustomizr

    (@nikeo)

    @acub my dev files are pretty much the same than the one you have and the structure is stable.
    So you can definitely work on this basis.

    Just let me know when you it is ready. If there is anything to send, you can use the online form here : https://www.themesandco.com/contact/
    Cheers

    Wow @acub amazing job!
    It works perfect!!

    To complete this thread let me explain the way to add icon flags using qtranslate. Just 2 steps:

    1.- Add this code to class-header-menu.php:
    <div class="qTransStyle"><?php qtrans_generateLanguageSelectCode('both'); ?></div>

    You have to paste depending where you want to place it. You can use the inspector to look for the best place to paste it or you can go testing while you add the code before any </div> that looks good for you

    2.- Add this code to style.css:

    .qTransStyle{
    position:relative;
    float:right;
    margin-right:20px;
    bot: 10px;
}

    Thread Starter acub

    (@acub)

    @rodrigogd: I myself have added the language changer in a different way, by hooking it to the __logo_title and positioning it fixed, on the left side. I also modified the flags a bit, but I think this is more of a personal choice. If you don’t modify the flags (I wanted them bigger), you’ll have to tweak the css, to make the selector smaller.

    Here you can see how it looks, and the implementation is only done in functions.php and style.css of the child theme, without modifying any of the main theme files. As of today, I’m actually proud to say that all the mods I have previously done to Customizr files are gone and all my tweaks are inside the child theme. I even tested by deleting Customizr and reinstalling it, to make sure. ??

    In functions.php:

    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;}

    But again, the way you choose to display your language chooser is something that doesn’t necessarily need to be discussed here, as I wanted to focus on the functionality of making Customizr multilingual ready, rather than on design and position of the lang chooser.

    Hi @acub!
    Your way is better as you don’t modify any of the main theme files and, from my point of view, it looks nicer too!!
    Where did you paste the code in functions.php? I can not make it work…
    Thanks a lot!

    Thread Starter acub

    (@acub)

    functions.php of your child theme should be empty if you haven’t written any custom function yet. It should not be a copy of functions.php from customizr, as that might generate serious problems because it would redeclare functions that are already declared.

    When “empty”, it should look like this:

    <?php

    You may write the code above just after first line. Please notice that it doesn’t have the ending of php code: ?> and this is how it’s supposed to be.

    As I was writing this I realized the reason why it’s not working for you is probably because you do not have an image (logo) in your header and do_action(‘__logo_title’) might not get fired in your installation. Try replacing ‘__logo_title’ with ‘before_header’ in the code I gave above.

    Did you also place the css in style.css? We’re talking about the child theme here.

    Also, you can always check the page source to see if the language chooser is output or not (and you only have a problem displaying it) and compare it to my source. See what’s wrong.

    Thread Starter acub

    (@acub)

    @anyone who is thinking about implementing all the above, please wait for a bit, I have just sent Nikeo a package that includes all the mods. Their chance of implementation in a future release of Customizr is quite high, so all of the above will become useless.

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