How i built a multilingual website for a client (using free tools)

0:00 in this video I'm going to show you how to translate

0:02 a WordPress website just like I did for my client

0:06 we will be covering from the very first steps

0:08 on how to install a language or translation plugin which

0:12 is poly Lang in this case and how you are

0:14 going to set up that language plugin for instance when

0:17 you come here to set up you'll be able to run

0:20 a wizard at the languages that you want to translate

0:23 your website to and from there we can go ahead

0:26 and start translating the pages we can translate the pages

0:29 that are in gutenburg and also elementa just like you

0:32 can see on this page it was translated from the first

0:35 language to the second language which is do from English

0:39 and you can see all the content is in German

0:42 and I'll be taking you through the exact process

0:44 that I used to translate all these Pages for this website

0:48 by the end of the video you'll be able

0:50 to have a fully translated website and your website visitors

0:54 will be able to switch from one language to another

0:57 just like this so I have just switched from English

1:00 to the German language and now my website visitors are

1:03 able to scroll through my or to read my website

1:06 in the German language they can as well go ahead

1:09 and switch to another language back to English in this case

1:13 and also be able to browse the website including all

1:16 other Pages for instance if I go to the contact

1:19 page here is the contact page in English but also

1:23 I can view this contact page in German I'll also

1:27 be taking you through on how you can translate

1:29 your contact forms just like this over here and also how

1:32 to add this language switcher right over here and custom

1:35 Flags to your WordPress website so if that is the kind

1:38 of video you're looking for then make sure that you

1:41 like the video subscribe to the channel if you haven't

1:44 already and let's get started just quickly and briefly

1:51 or which comes first briefly or quickly or whatever comes first

1:57 I don't really care so just to take you through

2:01 what what I did before I went to do the actual

2:05 creation of this homepage here was basically to create

2:09 the mockups here in figma so here is the figma file

2:14 uh of course we created the first versions and the mockups

2:16 and the wireframes until when we go to this page

2:19 which is like the final page of course some

2:21 things changed in the actual build and this happens often

2:25 when you actually build the page f as what is

2:29 in the figma file or the Prototype so anyway but when

2:32 you look over here we have the language version

2:36 that we are going to translate this website or the possibility

2:40 to translate the website and here the idea was

2:43 just to add the text not to have the flags

2:46 but then we ended up adding the flags and the text

2:48 as well which is not really a big deal

2:51 but it's not a big deal in the design process

2:54 but a big deal in the development process so anyway

2:57 uh there we are so we had our final page

3:01 and um and of course the other Pages now after having

3:05 our mockups then we went straight into WordPress to start

3:10 developing the website so here is the homepage and uh

3:14 yeah when you scroll through and go straight down here

3:17 below you see that everything appears just like we had earlier

3:22 anticipated to show it in the mockups like I've told

3:25 you some things really change when you start building the ideas

3:28 change and the view of things how they look like

3:30 on mobile and tablet and other devices they make you

3:34 to change a bit of how you anticipated but you

3:37 still stick to the design so that's not the important

3:41 thing so right now what I wanted to show

3:43 you is basically here the language option to be able

3:46 to switch the language and once someone clicks now here

3:49 on the language flag or on the text it takes

3:51 them to the language version which is now the homepage

3:55 but now in deut or in German and so here is

3:59 the page and and you see everything just translates

4:02 or is translated into the other language so that's how it

4:08 looks like the entire website and all other pages so

4:12 for instance you see that everything is also translated here

4:16 on the contact page and there is something specific I want

4:19 to talk about this contact page later on in the video

4:22 so if you want to so if you want to see what you have to do with your forms if

4:26 you're creating a m language website please stick around

4:30 in this video so anyway now let me show you

4:34 in the back end what really happens so here

4:36 in the dashboard um since we are creating a m language website

4:43 the first thing you have to do is to have

4:46 the first language fully set up I mean you build

4:49 the website in the first language and set up everything

4:52 the way it should be because that is going to make

4:56 the process of translating the website way easier and F

4:59 fter so in this case um when I come here

5:02 to pages I had to create all my pages that were

5:06 in English so for instance here I'm going to just

5:09 show pages in English so initially we only had

5:13 these Pages here in English and one thing I have

5:16 to mention for those of you who want to do

5:18 website translation for the first time so for every language you

5:22 have to have a page for it so that's where

5:24 you see if I say show all languages you will

5:28 see that the pages are kind of duplicated we have

5:31 double the number of the pages once you are done

5:34 creating your pages in the one language or the content

5:37 for the pages in that the first language then you

5:41 can start on the translation process but it's not only

5:45 the pages also other website sections like the header the menus

5:49 and navigation so in this case when we come

5:51 to appearances I come to menus you realize that I have

5:57 this is a main menu menu which is in German

6:01 and I also have a main menu which is in English

6:05 so the first menu that I had on the website

6:08 was the normal menu which is in English and once

6:11 I started the translation process I had to create

6:14 a new menu which is for uh the people who are

6:17 going to browse the website in German so once I

6:20 had my mockups approved by the client and everything is

6:23 nice and neat then we are able to start building

6:26 in WordPress and start building the entire pages and once

6:29 all the pages are up in one language then we

6:33 go to the next step and what is the next

6:35 step the next step is actually translating the website but before

6:40 we go into the real translation of the website let

6:42 me show you what I'm using to actually build

6:45 this website so I'll start up from the themes I'm actually

6:49 using the Astro theme and this is the free Astro

6:52 theme you realize that I have the Astro theme and also

6:56 the child theme which is also the Astro child theme

6:58 you don't NE needed but I wanted to add a child

7:02 theme because added some features that for example custom CSS

7:07 code like adding the language Flags in the folder uh

7:11 of the asra child theme which I'll talk about later

7:13 in this video that's why I added the child theme

7:16 to just to safeguard me from losing some of these features

7:21 once I update the actual theme but I'm using

7:24 the Astro free version and then let's look into the plugins

7:28 what am I using since this website is built

7:32 using elementa of course I have the elementa page filder

7:35 so which is here and hey I have to mention

7:38 that this website is built using completely free you know

7:44 add-ons and plugins and everything and for you who are

7:46 translating a website and you're translating it using Elemental pro

7:50 version you are going to need an an extra plugin

7:53 from the translation plugin in this case I'm using poly Lang

7:58 so that you are able to add some of these widgets

8:01 in the header and the footer of elementa

8:04 but in this case I didn't have to add the extra plugin

8:07 from poang which is an addon steel so on that later

8:12 so I have elementa here which is the Page

8:14 Builder and then loginer for security then I have poly

8:18 Lang which is the actual plugin that I use for translating

8:22 this website really simple easy plugin to set up

8:26 and to configure everything this I have to admit it's

8:29 my first experience using poly Lang because hey the client

8:32 was like hey Ham I want you to use poly Lang

8:35 because I find it popular and many people are using

8:37 it so I was like okay why not try it

8:39 out because my experience was with another plugin then I

8:43 have a premium addons F if you've been watching this tutorial

8:47 you know I use premium addons for elementa a lot

8:49 in adding extra features for elementa and then I have

8:53 sh forms this is a new plugin I have

8:55 a video on my Channel about how you can set up

8:59 and new use sh forms and create forms with SH

9:01 forms I used it for this website and looked worked

9:05 perfectly well uh SVG support for WordPress because I use

9:10 a lot of svgs in this project folded by the flags

9:15 and a lot more icons that I have on this website

9:18 and then WP total cach that is for caching

9:21 the website and then I have WP code because

9:24 I added some extra code then I have W pvv

9:27 this is simply for backup and restoration to start

9:31 on the translation process you will come over here to plugins

9:34 and say add a new plugin so here you look

9:37 up for poang poly Lang so here is poly Lang you

9:43 install it and activate it and like I've already mentioned

9:46 if you're using elementa Pro for the headers and the Footers

9:49 you may need this extra polon connect plugin

9:53 but in this case I did need it because I'm using free

9:56 tools for the entire project so once once you install

10:00 poang you'll have to run a wizard to set up

10:02 poang so I'll come here to set up so here

10:05 poang will run a wizard where you have to select

10:08 your default language and then the other languages that you

10:12 want to add on your website or which you want

10:15 to translate your website too so in this case I

10:18 have English as a default language and when you click over

10:21 here you can see different languages that you can translate

10:24 your website to you select that language and then you

10:28 can say add the language language and then it will

10:30 show up over here like I've told you this is

10:32 not a complete tutorial on how to translate a WordPress

10:35 website but I want to share with you the process

10:37 that I used to create this exact website however if

10:40 this video gets 100 likes then I'll make a complete tutorial

10:44 on how to create a website in different languages so

10:50 anyway now once you have your poly Lang set up

10:52 the other things that you have to set up

10:54 for Pol Lang still under here languages this menu item is

10:59 from poly Lang still under languages there is the option

11:03 called settings so come over there to settings so here

11:07 there is what they call URL modifications literally you can

11:12 leave it on a default settings which is this works out

11:16 perfectly for me and that's what I used so here

11:18 it says the language is set from the directory name

11:22 and this is how it looks like so for example

11:24 your website then the name of the language or the code

11:27 of the language and then the post name and then

11:30 here it says hide URL language information for default language

11:35 which is awesome because if it's a default language you

11:39 don't want that you have you don't want to show

11:41 the language code so this is how it appears

11:44 so it would hide in this case the en n at the end of the URL if English is

11:50 the default language but it will show the language code if

11:54 it's another language so save changes that is the format

11:58 that I want but I realize some other people want

12:00 this kind of format I personally don't like the structure

12:03 of the URL in this format so I always go

12:07 for this kind of format so I also set up

12:10 the custom post type and taxonomies which I checked everything

12:14 here including majorly the sh forms because remember we have

12:18 to have different forms for the different languages and that means

12:23 you have to you know work on them separately so

12:28 uh once that is done then I went here to synchronization

12:32 made sure that I check I leave everything checked

12:34 in this case and then I am done with the settings

12:37 the basic settings for poly how easier could that be

12:41 but I want to mention one more thing there is

12:43 the media option here when you say activate the media

12:47 option so here it says activate the languages and translation

12:51 for media only if you need to translate the text

12:54 attached to the media so like for example the title

12:58 The out alternative text the caption and you know the description

13:02 so if you want that kind of thing um you

13:05 can go ahead and do it however please if you

13:08 enable this feature and you don't add that additional information

13:13 in another language for the media that media will not

13:16 appear on another page without that additional information even if

13:20 you add that media on the page so keep

13:23 that at the back of the mind now once we are

13:26 done with setting up our settings uh we can go

13:29 now here to languages and you will see that we have

13:34 our languages and if you chose a wrong language

13:39 or if you choose not your favorite language as a different

13:43 language you can still change it here by clicking

13:45 on any of these Tas here and say for instance I

13:48 want German to be my default language please also remember

13:52 that uh these flags that you see here these will

13:55 be the flags that will be displayed in the navig

13:59 a if you want to have Flags enabled in the navigation

14:03 however in my case like you have already seen you

14:06 realize that I actually use custom flags and this is

14:10 something I'll show you later on in this video the other

14:13 feature that I want to show you is here under

14:16 translations there are some strings that you cannot translate

14:19 in Elemental but you can also not translate in the theme

14:22 level and I like the fact that um poly Lang

14:26 provides the option to translate them right over here here all

14:29 these strings here are for the language English and now

14:32 if I come here at the top and I switch

14:34 to deuts and I change those strings to German that means

14:40 that this string here I'll give it here a name

14:43 that is in German I also have to mention

14:46 that I did not do the automatic translation where the machine

14:49 is deciding how to translate the words the client actually

14:53 provided a documentation because I'm not a native speaker here

14:57 I don't yet really understand the language so the client

15:01 provided all the you know the texts for how and where

15:07 to place the the translations so that helped me really

15:11 really a lot and if you're doing this for your own

15:14 side and you want to have it in another

15:16 language really it's good that you work with a native

15:19 speaker or you can hire someone of fiver or upwork

15:22 to you know help you with the translations but I

15:26 have to mention that the machine translation are not

15:29 that perfect to help you in the translation process for example

15:33 like translating some of these strings to the exact meaning

15:38 some for example in German there is a formal writing

15:41 and the informal writing and you want to have

15:44 the right kind of writing on your website so anyway once

15:49 you are done all translating those you just save changes

15:52 here now this is for deut but if you have

15:56 another language and you come here up um it

15:58 will show all the available languages that you have enabled

16:01 on your website now what do you do if you

16:05 want to translate the actual Pages for the website so here

16:08 we have Pages all pages so once you are here

16:12 you are now seeing that I'm only having the German

16:14 Pages showing up that's because I have the German languages

16:17 selected up here but if I say show all languages then

16:21 all the pages are going to appear in all

16:23 the other languages let me give you an example so

16:26 on this website I had some pages that are using

16:28 the gutenburg editor and other pages that are using the elemental

16:32 editor that is because I didn't want to use

16:35 the layout that I use on my website pages on other

16:39 pages that are not that relevant to the business but they

16:43 are very important and critical for the website to work

16:47 or to be allowed to work officially so for example

16:50 the impresson page and the imprint page and the privacy

16:55 policy page or what here they call the DAT shoots

16:58 air clear WR page so which is the same as data

17:02 protection these two pages are the same they have

17:05 the same information but in different languages and they were all

17:09 created using guten B so for instance when I come

17:12 here to say edit page so you'll see that it

17:15 is the guten B editor and the same here uh

17:22 guten B editor when I say edit it's a guten

17:24 back editor and I have to mention that all

17:28 these content was provided by the client which is in German

17:32 once I'm I'm done adding all that content on the website

17:35 then I moved on to the next part which

17:38 was actually the elemental translations so here to Pages all

17:44 pages add here a Dy page so you have an idea so going to say demo and then I say

17:56 publish so I have published this page and it is

17:59 in English and uh let me just go back here

18:01 to the pages area so once you have all your pages

18:05 now I suppose they are all showing the English flag

18:08 in this case and you want to create a translation

18:11 of that page what you're going to do is to click

18:13 over here on this plus because now you are clicking

18:17 on that plus and it is representing adding the German

18:21 version of that page and in this case the translation

18:24 plugin will understand that you want to create a version

18:26 of this page in that language in in this case

18:29 so I don't know what the word demo is

18:32 but I'll say demo uh German and then here I will

18:38 have to go and translate that string or that sentence

18:43 that this page is published in German there is a website

18:46 called de L it is said it is better

18:50 in Translation this is a published page this is how

18:58 it is translated [Music] but means public but I say

19:08 published oh here can say for so maybe that maybe

19:16 this this makes much more sense so I'll just say

19:20 copy this and then I come here and then I add

19:24 my translated text and then I say publish good now

19:29 I'm going to go back here to my pages and now

19:33 when we look here in our uh Pages we have

19:37 the demo page which is in English and then we

19:41 have the demo page which is in German so you

19:44 see we have the German flag now if you want

19:47 to edit this page you just click here on the pencil

19:50 or here in the pencil you can choose also

19:53 to filter and say I only want to see pages

19:56 in one language by coming over here and say I want

19:58 to see only pages that are in German but now

20:02 let's go to the interesting bit which is translating

20:04 the pages that are in elementa it is literally the same

20:08 process so for instance I am going to come over

20:12 here to the uh to this page called angot which

20:16 is like offer or service and then I say edit

20:20 with elementa this will open up this page in the element

20:24 editor and then you'll go ahead on each and every

20:27 section of the website and translate the text there I

20:31 would also show you the English version in this case

20:34 so show all pages and then I open up where

20:41 is Services which is this here edit with elor we

20:49 have services and then we have angot and what changed

20:54 here is basically getting the services widget and then coming

20:59 over here and change it to another language however you

21:04 have to be working on the right page so basically I

21:07 opened up two pages so one in English and one

21:10 in German and then I go ahead and translate

21:13 the strings from English to German so anyway now once

21:16 you are done adding all your content to to your pages

21:19 in both the languages then you'll have something like

21:22 this pages that are looking kind of duplicate but before we

21:27 close up the page section let's talk about the contact

21:31 page or your contact forms because I find that a bit

21:34 tricky to work with in this case I have

21:37 the contact page in English and also the contact page uh

21:42 in German so I'm going to open up here

21:44 the contact page in both languages so here is a contact

21:49 page in English and here is the contact page

21:53 in German so you go ahead and do the same thing

21:57 you you look at your contact page and then see

22:01 all the content that you want to translate and then come

22:03 back here and do the translation click and open

22:07 and add the relevant text and maybe you are wondering how

22:11 do you get this content into the page you can

22:15 simply just do the copy paste process from the English version

22:20 to the German uh page and then you start doing

22:24 the translation from English or to whatever language that you

22:28 are working with but that will not work with uh

22:33 the contact form because the contact form for example you see

22:36 this Fields I cannot edit them from here in the editor

22:40 because the contact form is not an elemental contact

22:43 form in this case it is a sure form contact

22:46 form and that means I had to create different contact

22:49 forms so in this case I have uh the contact

22:52 form for English and the contact form for German so

22:56 just to show you that um really well so I

23:00 come here to contact forms and then I see the dashboard

23:03 and then you see that I have two contact

23:06 forms so where are these contact forms so here are

23:11 the contact forms so I have the one in English

23:13 and one in German so what I did was to duplicate

23:16 both contact forms and then for each contact form

23:19 so specifically the one for German I had to go

23:23 and change the you know the labels so for in this case

23:28 the for which is the first name and then the last name so I had to change the uh

23:35 labels here to the language which is German all

23:38 this and this and also the button just like you

23:42 have to do it when you are creating the English version

23:45 so that ends up being that you have two

23:47 contact forms on your website the one in the language

23:50 that you want and the one in another language once

23:52 you are done translating your pages what next is to work

23:56 on your menus and navigation so so when we come

23:59 here to U appearance menus and we look at the menus

24:04 of our website by this time you only have one

24:07 menu which you earlier created in English so you have

24:10 it as the main menu and then you have all

24:12 the pages listed over there and you want to add one

24:15 more thing which is the language switcher so this language

24:18 switcher is what you see here on the website this over

24:21 here and you can set it up in different ways

24:24 you can say display it as a drop down let

24:28 me just save this so you can see that shows

24:31 up as a drop down so I'm going to reload

24:38 here so here you see now I have it showing

24:42 up as a drop down I didn't want that to happen

24:46 I just wanted it to be um just when

24:49 someone clicks on the flag that says English then automatically

24:54 the website switches to the English version you can say

24:58 to display Flags you can say to hide the flags you

25:01 can say to force link to front page whatever you

25:05 want go ahead and set it up so in my case

25:08 I say display language names and display flags and then

25:12 hide current language if I'm to disable the the language

25:18 names and they save changes so I'm here then I'm

25:25 reloading you'll see that now I only have the language

25:29 flag showing up over here and once someone clicks over

25:32 there they are taken to the other language but I

25:34 prefer to have both the language name and the flag

25:38 showing up here so save changes now let's talk about

25:45 creating the menu for the other language so that means

25:48 that you have to come here to menus and you

25:50 have to say create a new menu so create a new

25:54 menu and then create that menu give it a name

25:57 and then assign it to a section of your website

26:02 menu Spanish and then you say I want to assign

26:06 it as a primary menu for Spanish and the good

26:09 thing is that poang is going to look up and say

26:13 Hey you have these languages enabled on your website

26:17 and you can only assign a menu to a specific language

26:21 you know for instance here it says primary menu

26:24 for English primary menu for deuts so I don't have primary

26:29 menu for Spanish because I don't have Spanish enabl

26:32 for translation on my website so you can see even all

26:35 other menu parts of the website for example the footer

26:39 menu the logged in menu for the account and off

26:43 canvas menu these are the menu locations for the Astro

26:46 theme but poang creates another option for another enabled language

26:52 that you have on the website let's go and look

26:55 at the menu which is German menu so help menu you

27:03 see that I have the same menu items that I've

27:05 already created in the pages just like I want it

27:08 to be the same and match with the main menu

27:11 that is in English remember also not to forget to add

27:14 the language switcher for the people who are viewing the website

27:18 in German and then assign that menu to the primary

27:21 menu which is German and also off convas menu

27:25 because the off convas menu appears on mobile when people

27:27 are VI when people are viewing your website on the mobile

27:31 device you can go ahead and create other menus

27:35 if you have them like for example the footer menu

27:37 so in this case I have a menu down below here

27:41 so I have this menu over here uh in the footer

27:44 and if you go and look at this website

27:48 on the German version you will realize that I have

27:53 the same menu but with different menu items but in German

27:58 so that's because I created a different menu

28:01 for that so I'll see secondary menu do yeah this is

28:08 this is the menu right over here now the other

28:10 menu that you saw for menu do this actually is

28:14 for the privacy and data protection uh notification or content

28:19 so that is the same which is appearing right over

28:24 here and by the way one of the reasons why

28:26 I chose Astra or why I keep building with Astra is

28:29 that they give me you know many menu uh

28:32 creation possibilities in this case because if you're working

28:36 with a theme and it only gives you the option

28:39 to create only two menus the header and then the footer

28:43 or the header and then the secondary menu then you

28:46 will not have the possibility to have these other menu

28:49 options now that we have added the default languages

28:53 and the content and the menu what else one of the things

28:57 that I had to to do was to change

28:59 the flags from these boring flags that come with poly Lang

29:02 like these over here by the way the client was

29:05 very specific that they want that the flags are both

29:08 in UK and English us and also that the flags

29:13 are showing for the German side that the flags are showing

29:17 Austrian uh German Austria and also the German flags those are

29:22 SVG icons that I have to work on and then

29:25 resize and then upload but one thing I have

29:27 to mention is that if you're uploading these custom Flags they

29:30 can be in SVG they can be in jpg or or PNG you should not upload them to the uh

29:38 poang folder in WordPress because if you update the poang

29:42 plug-in you will lose those flags and they will be

29:45 replaced with a default flags from poang so what you

29:48 have to do is to add them to you know another

29:51 folder so it could be in the public directory so

29:55 here is my public folder on my server and right

29:58 here under WP content is where you can add

30:02 the poly Lang app folder you can create a polong folder

30:06 and add those two flags inside that polong folder

30:10 and make sure that you give them the right language callede

30:12 this over here local these are the right language codes

30:16 that you should rename those flags for example uh eore gb.

30:23 PNG in case you're using PNG in my case I'm

30:25 using svgs and then that is how poang will be

30:29 able to see those flags in my case I did

30:32 a different way because I'm having a child theme so I

30:34 wanted to put all the custom settings in my child

30:37 theme folder so u under content I went ahead and looked

30:43 up for themes under the theme folder then I went

30:46 to Astra child and here is where I added my poang

30:51 folder it has the two flags one the German flag

30:54 and one the English flag so the mistake most people make

30:57 is to go here to plugins and then they look

31:00 up for poly Lang so this is poly Lang and then

31:03 they are adding the flags right over here in the language

31:07 flag in the flags folder that is actually a mistake

31:12 because when you update poly Lang you're going to lose

31:15 the flags that you added and they will be replaced

31:18 by the poang flags so don't do that just create

31:21 your own folder just like I've earlier shown you now once

31:25 you add your custom Flags into the folder you you

31:28 are going to come back here to settings and then come

31:32 here to URL modifications and just save changes again that will

31:37 kind of update the poang settings and then they will

31:40 reflect on your website and now you'll be able to see

31:43 the custom flags that you added on your website right

31:46 over here so thank you so much for watching

31:49 this video it's been a pleasure to share it with you

31:52 and to take you through the entire process and if you

31:55 want me to create now a complete video stting from zero

31:59 creating a multil language website in WordPress and elementa for free

32:04 make sure that this video hits 100 likes and then

32:08 I'll create that video don't forget to subscribe as well

32:12 my name is Hamza and see you in the next video [Music]