{"id":317,"date":"2019-07-04T05:10:06","date_gmt":"2019-07-04T05:10:06","guid":{"rendered":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/?p=317"},"modified":"2019-07-04T05:10:06","modified_gmt":"2019-07-04T05:10:06","slug":"how-to-translate-themes-using-the-loco-translate-plugin","status":"publish","type":"post","link":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/how-to-translate-themes-using-the-loco-translate-plugin\/","title":{"rendered":"How To Translate Themes Using The Loco Translate Plugin"},"content":{"rendered":"<h3>Step 1: Installation and Activation of Loco Translate<\/h3>\n<p>To install the Loco Translate plugin, simply navigate to\u00a0<strong>Plugins\u00a0<\/strong>&gt;\u00a0<strong>Add New\u00a0<\/strong>and search for the plugin\u00a0<em>Loco Translate<\/em>.\u00a0 Here is the direct download link <a href=\"https:\/\/wordpress.org\/plugins\/loco-translate\/\">Loco Translate<\/a>.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-319\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/Loco-Translate-Installation-and-Activation.png\" alt=\"\" width=\"600\" height=\"350\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/Loco-Translate-Installation-and-Activation.png 600w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/Loco-Translate-Installation-and-Activation-300x175.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/Loco-Translate-Installation-and-Activation-60x35.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/Loco-Translate-Installation-and-Activation-150x88.png 150w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>From there, select\u00a0<strong>Install Now<\/strong>, and then click on\u00a0<strong>Activate\u00a0<\/strong>to get the plugin ready for use on your website. When this is complete, you will see a new WordPress dashboard menu item labeled\u00a0<strong>Loco Translate<\/strong>.<\/p>\n<h3>Step 2: Check you can switch language<\/h3>\n<p>Visit\u00a0<strong>Settings &gt; General\u00a0&gt;\u00a0Site Language<\/strong>. Changing this will set a new default language for all site visitors. Try it and you should see something like this:<img loading=\"lazy\" class=\"alignnone size-full wp-image-318\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-site-lang.png\" alt=\"\" width=\"960\" height=\"321\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-site-lang.png 960w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-site-lang-300x100.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-site-lang-768x257.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-site-lang-60x20.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-site-lang-150x50.png 150w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/p>\n<h3>Step 3: Check the theme contains a POT file<\/h3>\n<p>Looking inside the theme folder we can see a\u00a0<code>\"languages\"<\/code>\u00a0sub-folder containing a file called\u00a0<code>\"ronby.pot\"<\/code>. This is a translation template provided by the theme author. It contains all the translatable phrases (or strings) that the theme defines.<\/p>\n<h3>Step 4: Find the theme in the translation dashboard<\/h3>\n<p>Click the admin menu item that says <strong>&#8220;Loco Translate&#8221;<\/strong> and select the &#8220;<strong>Themes&#8221;<\/strong> sub section. This will take you to a list of all available themes in your WordPress. You should see <strong>&#8220;Ronby&#8221;<\/strong> in the list regardless of whether it&#8217;s your active theme. Click it and you should see the following screen:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-321\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-bundle.jpg\" alt=\"\" width=\"960\" height=\"334\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-bundle.jpg 960w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-bundle-300x104.jpg 300w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-bundle-768x267.jpg 768w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-bundle-60x21.jpg 60w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-bundle-150x52.jpg 150w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/p>\n<h3>Step 5: Add a new language<\/h3>\n<p>Above the language list (which may be empty) you should see a button that says &#8220;New language&#8221; with an\u00a0<em class=\"has-icon\">add icon<\/em>. To start translating the theme into another language click this button and you&#8217;ll be taken to a new screen where you can choose the language you want. Select a language from the dropdown list of common languages. In this example we&#8217;ll select &#8216;Greek&#8217;.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-322\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-msginit.jpg\" alt=\"\" width=\"960\" height=\"591\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-msginit.jpg 960w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-msginit-300x185.jpg 300w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-msginit-768x473.jpg 768w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-msginit-60x37.jpg 60w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-msginit-150x92.jpg 150w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/p>\n<h3>Step 6: Translate some strings<\/h3>\n<p>Once on the editor screen you&#8217;ll see all the strings the theme has defined in its template file. Untranslated strings are shown in bold blue. To start with they will all be untranslated.<\/p>\n<p>The basics of the editor should be fairly intuitive. Select the English string at the top and enter your translation in the pane at the bottom. You can ignore most of the editor buttons for now. We&#8217;re just going to enter a translation and save it.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-323\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-edit.png\" alt=\"\" width=\"960\" height=\"662\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-edit.png 960w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-edit-300x207.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-edit-768x530.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-edit-60x41.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-loco-edit-150x103.png 150w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/p>\n<h3>Step 7: Viewing the translated theme<\/h3>\n<p>Head to a blog post on your site and check the sample phrase we translated\u00a0earlier. We know where &#8220;Leave a comment&#8221; will appear &#8211; below the title of every post.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-324\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-l10n-preview.png\" alt=\"\" width=\"960\" height=\"411\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-l10n-preview.png 960w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-l10n-preview-300x128.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-l10n-preview-768x329.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-l10n-preview-60x26.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-content\/uploads\/sites\/3\/2019\/07\/wp-l10n-preview-150x64.png 150w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/p>\n<p><strong>Great, it works.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Step 1: Installation and Activation of Loco Translate To install the Loco Translate plugin, simply navigate to\u00a0Plugins\u00a0&gt;\u00a0Add New\u00a0and search for the plugin\u00a0Loco Translate.\u00a0 Here is the direct download link Loco Translate. From there, select\u00a0Install Now, and then click on\u00a0Activate\u00a0to get the plugin ready for use on your website. When this is complete, you will see [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/posts\/317"}],"collection":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/comments?post=317"}],"version-history":[{"count":0,"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/posts\/317\/revisions"}],"wp:attachment":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/media?parent=317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/categories?post=317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/tags?post=317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}