Adding language flags to the top bar


#1

Hi, is there an easy way to add two images of flags somewhere in the top bar and link each to the relevant site? Already have image files for flags and two sites in different languages in the same WP network. Trying to come up with a simple DIY alternative to WP language switcher plugins, the ones compatible with this theme seem to have too much functionality for my purposes…


#2

I could give you some code. But add them to the menu bar first and post the links to your flags, or at least one of them.


#3

Sorry, how do I add images to the menu bar?


#4

I meant add some links to your menu that lead to your other language/languages. Regular text links so I can see how the code will fit.


#5

Added a menu item English on the Ukrainian site (http://ukr.nexilia.co.uk/) and respective tag on the English site (http://nexilia.co.uk), if that’s what you meant…


#6

And the links to the flags you want to use please.


#7

http://ukr.nexilia.co.uk/wp-admin/upload.php?item=401
http://ukr.nexilia.co.uk/wp-admin/upload.php?item=399


#8

Those aren’t the links to the images. I meant links to the actual image files so I can use them in the code.


#9

Hmm, confused: I pasted links to files in my WP media library… Shall I save them somewhere else? Alternatively, there is a link to the source I took them from http://www.famfamfam.com/lab/icons/flags/ but it’s a zip file with many other flags…


#10

What I need is the direct link to those images. This would be a direct link to one of your background images for the rows: http://www.nexilia.co.uk/wp-content/uploads/2015/02/abstract-313580_1280.jpg
When you visit your image in the Media Library there is an URL field there. Copy the links from there.


#11

Got it:
http://ukr.nexilia.co.uk/wp-content/uploads/sites/9/2015/03/ua.png
http://ukr.nexilia.co.uk/wp-content/uploads/sites/9/2015/03/gb.png


#12

Ok, use this in a custom CSS plugin:


#menu-item-393 {
    background: url('http://ukr.nexilia.co.uk/wp-content/uploads/sites/9/2015/03/ua.png') no-repeat;
}
#menu-item-403 {
    background: url('http://ukr.nexilia.co.uk/wp-content/uploads/sites/9/2015/03/gb.png') no-repeat;
}
#menu-item-393,
#menu-item-403 {
    background-position: center;
    text-indent: -999em;
}


#13

Thanks so much, that is fantastic!