WordPress.org

Ready to get started?Download WordPress

Forums

Bogo
Using HTML in the language switcher widget. (7 posts)

  1. Paal Joachim Romdahl
    Member
    Posted 1 year ago #

    Hey

    I have downloaded, installed and tested Bogo. I really like the simplicity in switching the admin language and creating a post/page in another language!

    What about adding the posibilty to add HTML into the language switcher widget (and use some styling with the shortcode as well)?
    This way one can add flags instead of text or both. To style the switcher.

    Have a great day!

    http://wordpress.org/extend/plugins/bogo/

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. Paal Joachim Romdahl
    Member
    Posted 1 year ago #

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

  4. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 1 year ago #

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

  5. Paal Joachim Romdahl
    Member
    Posted 1 year ago #

    (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.]

  6. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 1 year ago #

    You can use CSS property background-image or background.

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

  7. raymer
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic