Using HTML in the language switcher widget.

Thank you. Current Bogo doesn’t have enough action/filter hooks yet. I’ll add them little by little.

Adding flags is possible with the current version. Look at class attribute of <li> under <ul class="language-switcher">. They should have classes of locale code. Add flag images as their background image.

Hi Takayuki!

I went to plugins -> Bogo -> Edit
link-template.php and found the <ul class=”language-switcher”>
and a <li> code

echo '<li class="' . esc_attr( $class ) . '">';

		if ( is_singular() ) {
			if ( empty( $translations[$code] ) || $locale == $code )
				echo esc_html( $name );

I am not sure if I am in the right php file, and how to add the img tag.
Could you help out with this?
Thanks!

[Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your code may now have been permanently damaged/corrupted by the forum’s parser.]

No, don’t edit plugin’s code. I mean editing CSS stylesheet in your theme.

(It looks like the code I pasted in the last comment made the thread weird.

I checked the code through inspect element in Chrome:

<ul class="language-switcher">
     <li class="en-US en current first">English
     <li class="nb-NO nb last">..

So this means inside the li class”en-US” I can put the img tag. Can you make a quick example?

Thanks..:)

[Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your code may now have been permanently damaged/corrupted by the forum’s parser.]

You can use CSS property background-image or background.

https://www.w3.org/TR/CSS2/colors.html#background

Here is how I did it for English and Japanese (images dir is located in my child-theme, and flags are about 30x20pix):

li.en-US {
	background-image:url('images/en_US-flag.jpg');
	background-repeat:no-repeat;
	background-position:0px 0px;
	height: 25px;
	text-indent:40px

	}
li.ja {
	background-image:url('images/ja_JP-flag.jpg');
	background-repeat:no-repeat;
	background-position:0px 0px;
	height: 25px;
	text-indent:40px
	}

I would like to see the flags be clickable too. I would also like the ability to change the Language name so that I can see “English” on the Japanese locale and “日本語” on the en_US locale…

HTH,
Ray