{"id":2320,"date":"2009-08-18T23:25:58","date_gmt":"2009-08-18T23:25:58","guid":{"rendered":"http:\/\/wpml.org\/?p=2320"},"modified":"2009-08-18T23:25:58","modified_gmt":"2009-08-18T23:25:58","slug":"multilingual-atahualpa-theme","status":"publish","type":"post","link":"https:\/\/wpml.org\/pt-br\/tutorials\/2009\/08\/multilingual-atahualpa-theme\/","title":{"rendered":"Multilingual Atahualpa theme"},"content":{"rendered":"<p><a href=\"http:\/\/wpml.org\/wp-content\/uploads\/2009\/08\/atahualpa_screenshot.jpg\"><img decoding=\"async\" class=\"size-medium wp-image-2323 alignright\" title=\"atahualpa screenshot\" src=\"http:\/\/wpml.org\/wp-content\/uploads\/2009\/08\/atahualpa_screenshot-300x209.jpg\" alt=\"atahualpa screenshot\" width=\"300\" height=\"209\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2009\/08\/atahualpa_screenshot-300x209.jpg 300w, https:\/\/wpml.org\/wp-content\/uploads\/2009\/08\/atahualpa_screenshot-150x104.jpg 150w, https:\/\/wpml.org\/wp-content\/uploads\/2009\/08\/atahualpa_screenshot.jpg 566w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><strong>I&#8217;m<\/strong><strong> going to show how to use <a href=\"http:\/\/wordpress.org\/extend\/themes\/atahualpa\">Atahualpa<\/a>, by <a href=\"http:\/\/wordpress.bytesforall.com\/\">Bytes For All<\/a>, for building multilingual WordPress sites using WPML.<\/strong><\/p>\n<p>A theme for a multilingual WordPress site needs to have all strings wrapped in gettext calls, but it&#8217;s not quite enough. Using gettext in the theme allows it to display in a different (single) language from what it was originally built with.<\/p>\n<p>To run multilingual, the theme needs to to allow visitors to choose their display language and deliver the correct content per language.<\/p>\n<h2>A multilingual version for Atahualpa<\/h2>\n<p>Let&#8217;s start at the end. Here is a <a href=\"http:\/\/themes.wpml.org\/?preview=1&amp;stylesheet=atahualpa&amp;template=atahualpa\">demo site powered with a modified version of Atahualpa<\/a> and here is the <a href=\"http:\/\/media.icanlocalize.com\/wordpress_themes\/atahualpa.zip\">modified theme<\/a> which you can download and use.<\/p>\n<h2>What we changed to make Atahualpa multilingual<\/h2>\n<h3>1. Adding wpml-integration.php to the theme&#8217;s directory<\/h3>\n<p>wpml-integration.php is found in WPML&#8217;s directory under <em>docs\/theme-integration<\/em>. It includes a collection of functions which help turn themes into multilingual.<\/p>\n<p>All these functions are designed to make themes use WPML if it&#8217;s active or ignore it if it&#8217;s missing. This means that the theme would run multilingual if WPML is available or normally (single language) otherwise.<\/p>\n<p>Added to <strong>functions.php<\/strong>:<\/p>\n<pre>include dirname(__FILE__) . '\/wpml-integration.php';<\/pre>\n<p>This statement loads wpml-integration.php and makes it available to all the files in the theme.<\/p>\n<h3>2. Adding language selectors<\/h3>\n<p>Language selectors make it possible for visitors to choose the language in which the site is displayed. Often, it&#8217;s a good idea to add several types of language selectors. Visitors scan the site quickly and look for visual hints to contents in their languages. Different people look at different places, so adding different types of language selectors to different parts of the page will help move visitors find their language.<\/p>\n<p>We added WPML&#8217;s drop-down language selector to the sidebar by adding it to <strong>header.php<\/strong>:<\/p>\n<pre>&lt;?php wpml_languages_selector() ?&gt;<\/pre>\n<figure id=\"attachment_2331\" aria-describedby=\"caption-attachment-2331\" style=\"width: 161px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-full wp-image-2331\" title=\"atahualpa_drop_down_language_selector\" src=\"http:\/\/wpml.org\/wp-content\/uploads\/2009\/08\/atahualpa_drop_down_language_selector.png\" alt=\"atahualpa_drop_down_language_selector\" width=\"161\" height=\"180\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2009\/08\/atahualpa_drop_down_language_selector.png 161w, https:\/\/wpml.org\/wp-content\/uploads\/2009\/08\/atahualpa_drop_down_language_selector-134x150.png 134w\" sizes=\"(max-width: 161px) 100vw, 161px\" \/><figcaption id=\"caption-attachment-2331\" class=\"wp-caption-text\">Drop down language selector<\/figcaption><\/figure>\n<p>We also added a horizontal list of languages to the site&#8217;s footer. Many users first scroll all the way to the bottom to see what&#8217;s there (and how long pages are), so it&#8217;s a good place to tell pages are available in other languages. We added the following code to <strong>footer.php<\/strong>:<\/p>\n<pre>&lt;?php wpml_languages_list() ?&gt;<\/pre>\n<figure id=\"attachment_2333\" aria-describedby=\"caption-attachment-2333\" style=\"width: 520px\" class=\"wp-caption alignnone\"><em><img decoding=\"async\" class=\"size-full wp-image-2333\" title=\"atahualpa_horizontal_language_selector\" src=\"http:\/\/wpml.org\/wp-content\/uploads\/2009\/08\/atahualpa_horizontal_language_selector.png\" alt=\"Horizontal language selector in footer\" width=\"520\" height=\"38\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2009\/08\/atahualpa_horizontal_language_selector.png 520w, https:\/\/wpml.org\/wp-content\/uploads\/2009\/08\/atahualpa_horizontal_language_selector-150x10.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2009\/08\/atahualpa_horizontal_language_selector-300x21.png 300w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><\/em><figcaption id=\"caption-attachment-2333\" class=\"wp-caption-text\">Horizontal language selector in footer<\/figcaption><\/figure>\n<p>Finally, we added a language selector at the end of each post. This adds a sentence to each post, telling in what other languages it&#8217;s available. Added the following to <strong>index.php<\/strong> (which includes a custom version of WordPress&#8217; display loop):<\/p>\n<pre>&lt;?php if(is_singular()) wpml_content_languages(); ?&gt;<\/pre>\n<figure id=\"attachment_2336\" aria-describedby=\"caption-attachment-2336\" style=\"width: 293px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-full wp-image-2336\" title=\"atahualpa_content_languages_list\" src=\"http:\/\/wpml.org\/wp-content\/uploads\/2009\/08\/atahualpa_content_languages_list.png\" alt=\"List of translation languages\" width=\"293\" height=\"27\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2009\/08\/atahualpa_content_languages_list.png 293w, https:\/\/wpml.org\/wp-content\/uploads\/2009\/08\/atahualpa_content_languages_list-150x13.png 150w\" sizes=\"(max-width: 293px) 100vw, 293px\" \/><figcaption id=\"caption-attachment-2336\" class=\"wp-caption-text\">List of translation languages<\/figcaption><\/figure>\n<h3>3. Making the home page link go to each language&#8217;s home<\/h3>\n<p>When visitors click on &#8216;Home&#8217;, they expect to get to the home page without switching language. Since each language has a &#8216;home page&#8217; with a different URL, a single value for all will not work.<\/p>\n<p>Normally, WordPress themes calculate the address for the &#8216;Home&#8217; page based on the &#8216;Blog URL&#8217; value set in the admin page. WPML created a function that calculates the correct home address according to the display language.<\/p>\n<p>We replaced <strong>get_option(&#8216;home&#8217;)<\/strong> with <strong>wpml_get_home_url()<\/strong>. Also, the get_option(&#8216;home&#8217;) function returns the site&#8217;s localication without a trailing slash (\/), so themes add it manually. WPML&#8217;s function includes this slash (there&#8217;s a long story behind this).<\/p>\n<p>To do this change, we had to edit two files. Modified <strong>functions\/bfa_get_options.php<\/strong> and change:<\/p>\n<pre>$bfa_ata['get_option_home'] = get_option('home');<\/pre>\n<p>into<\/p>\n<pre>$bfa_ata['get_option_home'] = wpml_get_home_url();<\/pre>\n<p>Also, edited <strong>functions\/bfa_header_config.php<\/strong> and removed the trailing slash from the home page link:<\/p>\n<pre>'&lt;a href=\"' . $bfa_ata['get_option_home'] . '\"&gt;' . $bfa_ata['bloginfo_name'] . '&lt;\/a&gt;'<\/pre>\n<h3>4. Really advanced &#8211; translating texts users enter in the theme admin screen<\/h3>\n<p>Atahualpa allows controlling some texts through the admin screen. This is a great thing which allows to manage the site without editing PHP files. WPML can translate these strings too using its String Translation mechanism.<\/p>\n<p>To do this, the theme needs to tell WPML which strings need to be translated and then display the translation if it exists.<\/p>\n<p>When users go to the theme&#8217;s admin screen, update the texts and click on Save, the function <strong>bfa_ata_add_admin<\/strong> from <strong>functions\/bfa_ata_add_admin.php<\/strong> is executed. We added the following section to it (starting at line 11):<\/p>\n<pre>global $wpml_translatable_strings;\r\n foreach($wpml_translatable_strings as $wpml_str ){\r\n\u00a0\u00a0 if(isset($_REQUEST['bfa_ata_'.$wpml_str]) &amp;&amp; trim($_REQUEST['bfa_ata_'.$wpml_str])){\r\n\u00a0\u00a0\u00a0 wpml_register_string('atahualpa theme', $wpml_str, stripslashes($_REQUEST['bfa_ata_'.$wpml_str]));\r\n\u00a0 }\r\n }<\/pre>\n<p>What this does it run through a list of strings defined in the global variable <strong>$wpml_translatable_strings<\/strong>. It registers each string in WPML&#8217;s string translation list.<\/p>\n<p>The first argument is the context for the strings. Any name would go, but you should select a name that describes the strings. The second argument is the name for the string (doesn&#8217;t get translated). The last argument is the value of the string &#8211; gets translated.<\/p>\n<p>To display the translations (if they exist), we added the <strong>wpml_t<\/strong> function to <strong>functions\/bfa_get_options.php<\/strong> (starting at line 204):<\/p>\n<pre>global $wpml_translatable_strings;\r\nforeach($bfa_ata as $k=&gt;$v){\r\n\u00a0\u00a0 if(in_array($k, $wpml_translatable_strings) || $__first){\r\n\u00a0\u00a0\u00a0 $bfa_ata[$k] = wpml_t('atahualpa theme', $k, $v);\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0 }\r\n}<\/pre>\n<p>This code is run when the site is displayed to visitors. It will loop through the list of strings, check if it&#8217;s been registered for translation (<strong>in_array<\/strong>) and if so, get the translation. The <strong>wpml_t<\/strong> function will return the translated string in the current language, if translation exists, or just return the original string if there&#8217;s no translation.<\/p>\n<h2>Turning other WordPress themes multilingual<\/h2>\n<p>We&#8217;ve already done similar work on <a href=\"http:\/\/wordpress.org\/extend\/themes\/inove\">iNove<\/a> and <a href=\"http:\/\/wordpress.org\/extend\/themes\/arras-theme\">Arras<\/a> and are planning to convert more themes to multilingual.<\/p>\n<p>Our intention is to provide ready-to-use multilingual themes and help you build your own multilingual-ready themes. Using the techniques we described here, you can build themes that will run multilingual when WPML is available or in a single language without WPML.<\/p>\n<p>If you&#8217;re building themes and need help turning them multilingual, feel free to open new threads in the <a href=\"http:\/\/wpml.org\/forums\">forum<\/a>.<\/p>\n<p>You can also make money (really passive income) by adding multilingual support to your themes. We&#8217;ll talk about including affiliate IDs in themes in the next post.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m going to show how to use Atahualpa, by Bytes For All, for building multilingual WordPress sites using WPML. A theme for a multilingual WordPress site needs to have all strings wrapped in gettext calls, but it&#8217;s not quite enough. Using gettext in the theme allows it to display in a different (single) language from [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"ep_exclude_from_search":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-2320","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/posts\/2320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/comments?post=2320"}],"version-history":[{"count":19,"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/posts\/2320\/revisions"}],"predecessor-version":[{"id":2343,"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/posts\/2320\/revisions\/2343"}],"wp:attachment":[{"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/media?parent=2320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/categories?post=2320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpml.org\/pt-br\/wp-json\/wp\/v2\/tags?post=2320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}