WordPress.org

Forums

Customizr
[closed] Multilingual Customizr - how to guide (using qTranslate) for Customizr 3.0.8 (54 posts)

  1. acub
    Member
    Posted 2 years ago #

    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.

  2. ElectricFeet
    Member
    Posted 2 years ago #

    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?

  3. dr.s.moeckel
    Member
    Posted 2 years ago #

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

  4. acub
    Member
    Posted 2 years ago #

    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.

  5. acub
    Member
    Posted 2 years ago #

    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.

  6. nikeo
    Member
    Theme Author

    Posted 2 years ago #

    @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 http://www.themesandco.com/customizr/faq/

    What do you think?

  7. acub
    Member
    Posted 2 years ago #

    I don't think. I thank. You. For an awesome theme. :)

  8. nikeo
    Member
    Theme Author

    Posted 2 years ago #

    :-D

  9. acub
    Member
    Posted 2 years ago #

    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.

  10. rdellconsulting
    Member
    Posted 2 years ago #

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

    Great stuff @acub

  11. nikeo
    Member
    Theme Author

    Posted 2 years ago #

    @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 : http://www.themesandco.com/contact/
    Cheers

  12. rodrigogd
    Member
    Posted 2 years ago #

    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;
    }
  13. acub
    Member
    Posted 2 years ago #

    @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.

  14. rodrigogd
    Member
    Posted 2 years ago #

    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!

  15. acub
    Member
    Posted 2 years ago #

    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.

  16. acub
    Member
    Posted 2 years ago #

    @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.

  17. PietroRivi
    Member
    Posted 2 years ago #

    Hi acub,
    thanks for your interest.
    If I can, I want to suggest you of do not forgot to insert the translation function in the title of menu, and in the botton text of slider.
    Strangely in the buttons text of futured pages with this code works "<!--:it-->Scopri di più »<!--:--><!--:en-->Read more »<!--:-->" but not in the slider botton text.

    Thanks.

    Pietro

  18. ElectricFeet
    Member
    Posted 2 years ago #

    @Pietro This text isn't translated as it is user-customizable. You can change the button text for each individual slide in the edit media screen, in the slider options.

  19. BijouLePou
    Member
    Posted 2 years ago #

    Hi,

    I'm using qtranslate too and I would like so much to have this implemented in the next theme version!

    Thanks to all!

  20. PietroRivi
    Member
    Posted 2 years ago #

    @ElectricFeet
    Hi,
    yes, but it don't change when I change the site language, as well as don't change the titles of widgets.

  21. rodrigogd
    Member
    Posted 2 years ago #

    Hi @acub!
    There is no rush but, when do you think this implementation will be released?
    There is a lot of expectation ;-)
    Thanks my friend.

  22. acub
    Member
    Posted 2 years ago #

    I'm sorry, I cannot answer that question. A temporary solution is to make the mods in your child theme until they're no longer needed.

    Right now the code is incomplete, as it doesn't cover excerpts for featured pages. You can only have multilingual content for featured pages descriptions using the custom fields in the Customizr options panel. I'll look into this over the next few days and as soon as I find a solution I'll send Nikeo the result. Hopefully it will be included in the next release.

  23. willmsteam
    Member
    Posted 1 year ago #

    hi,

    is it possible to bring this changes in the next theme update ?!

  24. BijouLePou
    Member
    Posted 1 year ago #

    Hi,

    Does the latest version 3.0.10 add those modifications?

    If not @acub can you post an update, if it's needed?

    Thanks

  25. nikeo
    Member
    Theme Author

    Posted 1 year ago #

    @acub : I did not include the qtranslate compatibility code in this release.
    I had other priorities to address first. This will be seriously studied for next one.
    Regards,
    NIcolas.

  26. BijouLePou
    Member
    Posted 1 year ago #

    @nikeo : Thanks!

  27. andrea.botto
    Member
    Posted 1 year ago #

    @ acub

    thanx for this thread it is perfect, the only thing that don't work is the adding of the language changer.
    What I did is:
    1) creating the child theme
    2) crate the function.php with this code:
    <?php
    add_action('__logo_title', 'qtr_language_changer');
    function qtr_language_changer() {
    echo qtrans_generateLanguageSelectCode('image');
    }
    3) copy the style.css from the parent theme and adding your code

    At this point nothing happen...can someone help me?
    PS
    I have a logo in my header and I even tryed to replace '__logo_title' with 'before_header' but always it is the same

  28. acub
    Member
    Posted 1 year ago #

    The hook __logo_title no longer exists in this version. You have to hook your action to __after_header instead.

  29. andrea.botto
    Member
    Posted 1 year ago #

    acub you are a master...

    can you only tell me in what way did you modify the flag to fit better in the rectangle?

  30. acub
    Member
    Posted 1 year ago #

    Take some bigger flags (I made mine 32px x 32px) and save them in your theme under /flags as {language_code}_big.png.
    Than add this CSS for each of the languages you use

    .qtrans_flag_{lang_code} {background: transparent url({link_to_your_theme_folder}/flags/{lang_code}_big.png} center center no-repeat;}
    /* Example, for italian: */
    .qtrans_flag_it {background: transparent url(/wp-content/themes/customizr-child/flags/it_big.png) center center no-repeat;}
    /* End of example ********/

    where {lang_code} is your language code and {link_to_your_theme_folder} is your relative or absolute path to theme folder.

    I personally have put them in the qtranslate folder, but it's wrong, I should move them into the theme folder so I don't have to re-copy the flags each time I update qtranslate.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic