Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Johan Delforge
Johan Delforge
13,317 Points

Anyone experienced with WPML custom icons ?

Alt:

(http://www.lacm.be/)

Hello everyone,

As i did not understand how to replace WPML icons, i decided not to show them, and rather redirect my own language icons to different language urls.

So clicking on the FR icon redirects to www.lacm.be & clicking on the NL icon redirects to www.lacm.be/nl

Fine.

But this is not ideal, because when i'm inside a particular section, like www.lacm.be/interventions/ , when i click on the NL button, it does not go to the dutch version of that section, it goes to the root www.lacm.be/nl , and this is not what i want.

So now i admit i should be using the WPML icon system. The problem is that i dont want them graphically.

Here is my question :

how can i replace these WPML icons with my own custom icons ?

Any idea ?

Thank you !

Johan

2 Answers

Johan Delforge
Johan Delforge
13,317 Points

(This answer sits on the top, but is actually the latest, & working one.)

Here is what I've done :

1. Added these lines in functions.php :

<?php

// Update of the my_language_switcher function

function my_language_switcher(){
  $languages = icl_get_languages('skip_missing=0&orderby=code');

  if(!empty($languages)){
    echo '<ul>';
    foreach($languages as $l){
      if($l['active'])
      {
        $class = 'class="active"';
      } else {
        $class = '';
      }
      $langs .= '<li><a href="'.$l['url'].'" '.$class.'>'.$l['translated_name'].'</a></li>';
    }
    echo $langs;
    echo '</ul>';
  }
}
?>

2. Added this in header.php, nested inside my header banner:

<div id="wpml_lang">
<?php my_language_switcher();?>        
</div>

3. Updated my CSS to my needs :

/* Language buttons
============================*/

#wpml_lang{
margin-top: 11px;
position:absolute;
top:5px;
right: 58px;
z-index:999;}

#wpml_lang ul{
list-style: none;
margin:0;
padding:0;}

#wpml_lang ul li{
display: inline;
margin: 0 2px;
padding-right: 5px;}

#wpml_lang ul li a, #wpml_lang ul li a:visited {
background: #8d1851;
color: #fff;
padding: 7px 12px;
text-decoration:none;
font-style: italic;
border-radius:20px;
line-height:100%;
font-size: 12px;}

#wpml_lang ul li a:hover{
color: #fff;
background: #3b0522;
padding: 7px 12px;
text-decoration:none;
border-radius:20px;
line-height:100%;
font-size: 12px;}

#wpml_lang ul li a.active{
color: #fff;
background-color:#3b0522;
padding: 7px 12px;
text-decoration:none;
cursor: default;
border-radius:20px;
line-height:100%;
font-size: 12px;}

I'm still a bit blind on the subject, but it works.

Best regards,

Johan

Johan Delforge
Johan Delforge
13,317 Points

Thanx Zac...

the problem is that i want to use custom CSS forms... There is not much on the web about this... Last week i came across this, but still no success.... http://wpml.org/forums/topic/change-flags-for-buttons/

... I have read somewhere that a new course about Wpml was in the pipe... that would be a blast... i want to be able to control & understand the whole process of replacing the complete WPML front-end interface.

Cheerz, Johan

Johan Delforge
Johan Delforge
13,317 Points

Ok, i finally found a way to make it work... Still, the question is not completely clear.

Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Please post up how you solved this if you can?