How to Translate Custom Layouts with WPML?

How to Translate Custom Layouts with WPML?

Custom Layouts is a premium feature available with the Astra Pro Addon plugin. To use these pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

WPML and Custom Layouts

Firstly, you need to add WPML to your Astra website and turn it multilingual. In addition, if you need help doing this, you can check this article.

Secondly, we need to make sure that the option to translate the Custom Layout with WPML is active. Follow the steps below to activate this option:

Step 1 – Login to your website and navigate to Dashboard > WPML > Settings;

Step 2 – Nest, scroll down to reach the 「Post Types Translation」 section;

Step 3 – In the end, select Custom Layouts (astra-advanced-hook)  to be Translatable. Here you have options to show items only if there is the translation available in the selected language or to show content in the default language (fallback option). Choose the option which suits you better and click on the 「Save」 button to apply changes.

This will enable all Custom Layouts to be translated with WPML. You will find the translation options in your Custom Layouts list.

Translating Custom Layouts

Now that this option is activated, let』s show you how to translate your Custom Layouts:

Step 1 – Navigate to Dashboard > Appearance > Astra Options > Custom Layouts and check the column next to the custom layouts titles in the list. You will notice the WPML language options for each layout. Layouts are set to your default language, and the column contains flags of the other languages available.

Step 2 – To create a version of the custom layout in another language, just click on the 「+」 icon in the desired language column. This will open an Advanced Translation Editor that will allow line-by-line translation.

By default, the editor will display content in 「dual」 mode, showing the original content on one side and translation fields on the other side. 

We decided to add a French version of the layout in our example:

Step 3 – To translate a line of the content, you need to click on the matching translation field for each line and provide the translation. Once you added all translations, click on 「Complete」 to create the translated page.

Managing Translations

Keep in mind that you will not be able to click the 「Complete」 button until you provided all translations. If you need to pause translating, just click on the 「Back to list」 button. This will save you current progress and take you back to the custom layouts list. To mark the translation in progress, you will notice that the 「+」 icon changed to the 「cogs」 icon. You can resume translating the layout any time you want by clicking this icon.

Once you complete your translation and click the 「Complete」 button, the translated version of your custom layout will be automatically added and linked with the original. In the layouts list, you will see that existing translated versions are represented by a 「pencil」 icon instead of a 「+」 icon to mark that the translation exists.

When it comes to the layout content, your designs will be automatically copied, and original content will be replaced with the translated content:

Great, you just created your Custom Layout translation. You can repeat these steps for any layout you want to translate.

How to Translate Astra Strings with WPML?

How to Translate Astra Strings with WPML?

With WPML, next to translating your website content, you can also manually translate strings added with Astra.

Before we proceed, you need to add WPML to your Astra website and turn it multilingual first. Furthermore, if you need help doing this, you can check this article.

How To Translate Astra Strings?

In this article, we will show you how to translate Astra Theme custom texts. As an example, we will translate the Site Title. Similarly, you can translate any other string on your Astra website.

You can follow these steps to translate Astra strings with WPML:

Step 1 – To begin with, login to your website and navigate to Dashboard > WPML > String Translation page;

Step 2 – Next, in the 「Search」 field on the top of the page, search for 「astra」. This will sort the string list to the Astra related strings;

Step 3 – Further, browse the string list below and find the strings you wish to translate. On the right side of that string line, you will see the WPML options and columns for each available language translation. 

Step 4 – To translate the string to any language, just click on the 「+」 icon to open the translation popup.

Step 5 – Finally, add your translation for the selected language and click on any empty space to close the popup. 

Step 6 – You will notice that the 「+」 icon changed to the 「pencil」 icon to mark that there is a translation saved for that language. 

You can repeat this process for each string and language.

Hide the Text by Setting the Font Size to Zero

Hide the Text by Setting the Font Size to Zero

Designing your website to look and work perfectly on all screen sizes is more important now than ever. Sometimes it』s not so easy to do this. If sometimes you would like to hide some text or labels on any screen, you』ll be able to do this by setting font size to zero.

This document will help you do this with the Astra Theme.

Why Is This Important?

This improvement came with the Astra Theme 3.6.9 update. In earlier versions of the Astra Theme setting the font size to zero was not possible.

This will ultimately help you with responsive design.

How To Change This?

For all new websites, these changes will be applied automatically. 

For the existing websites, this improvement needs to be activated by adding a filter. This was done to allow you to check how these changes apply to your website and make any changes if needed. 

To enable this improvement, you need to add the following custom code (filter) to the functions.php file of your Child Theme:

add_filter( 'astra_zero_font_size_case', '__return_true' );

If you don』t have your Child Theme installed, please check this article on how to do it. If you are not sure how to add this code, please check this article.

How to Translate Astra Theme / Plugins in Your Own Language using GlotPress?

How to Translate Astra Theme / Plugins in Your Own Language using GlotPress?

Astra is 100% translation ready, comes with .po / .mo files and can be translated using any softwares such as POEdit, GlotPress, etc. Out of them all, we recommend GlotPress.

GlotPress is an online software that is used by WordPress for translations. The best part of GlotPress is the community. Anyone can login to GlotPress and contribute in translating the project, suggest corrections, validate existing translations. As a outcome of this, projects are usually translated faster and in more accurate manner.

In the post below, I will explain how GlotPress works and how you can use it to translate Astra in your own language.

Step 1. Visit the GlotPress Project.GlotPress for Astra Theme is hosted on WordPress Repository here and Astra Pro can be translated here.

Step 2: Login or Register a new account.

Step 3: Choose your language from the list. (Screenshot)

On the language page, you will see the current state of translation of the language and list of other translators who might have already translated contributed in translating the project. You might find some other terms as well which might not be very obvious. So let me explain what they mean.

Untranslated: are the strings that are not yet translated by anyone and need work.Waiting: are the strings that are translated by contributors, but yet need approval by the validators.Fuzzy: is a string is marked a fuzzy if it is translated differently by different translators. The language validator (admins) can choose the best string out of such duplicates to mark it translated.Translated: Strings that are already translated and don』t need any further work.

Step 4: Click on the name of your language to see all available strings (Screenshot)

Step 5: Click on any string and translate it (Screenshot)Once you translate the strings, project validators take a look at them and approve them.

Once the validator approves the translations or makes updates, the latest transnational automatically appears as an update in the WordPress backend if the project is on WordPress.org Repository. For projects that are not on the WordPress.org Repository (like Astra Pro Addon Plugin), project developers usually ship the completed translations through their project files with the updates.

Would you like to become a Translation Validator?

If you』re interested in becoming a validator, please get in touch with us with the details as below –

Your WordPress.org usernameYour username on our GlotPress Portal here.The locale you would like to become validator for.Details of your previous translations, etc if you have any.

Once you submit the request, we can get you added as the translation validator. Translation validators are able to approve the translated strings so they can be shipped to all users.

Need to add translation in your project immediately?

Should you wish to implement this translation in your website immediately, you can export the current translation file in the .po & .mo format and use on your website by uploading it to the languages folder using FTP / SFTP with correct naming convention.

For themes: wp-content/languages/themes/For plugins: wp-content/languages/plugins/

Correct naming convention is very important. This will make sure that WordPress understands what language you are referring to. Be sure to prefix the text domain before the language code. Capitalization is also important here.

For languages codes, please refer this list.Text domain can be found in the style.css file of the theme, or main PHP file of the plugin.

Examples of file names for Astra theme –

For German: 「astra-de_DE.po」 & 「astra-de_DE.mo」For French: 「astra-fr_FR.po」 & 「astra-fr_FR.mo」

Please note, we』re adding translation files in the /wp-content/languages/ directory. Many tutorials on other websites might ask to upload the file inside a theme or plugin』s folder. However, it』s not a recommended way as, with every theme or plugin update, you will lose all the translations and edits you have done.

How Translations can be Manually Exported and Uploaded to the Site?

How Translations can be Manually Exported and Uploaded to the Site?

Astra can be 100% translated using GlotPress. Here is a detailed document for How to Translate Astra Theme / Plugins in Your Own Language using GlotPress? As mentioned in the document if you wish to translate the strings, you need to submit a translation then a project validators take a look at them and approve them. This process needs some time.

In case you need to implement this translation in your website immediately, you can export the current translation file in the .mo format and use on your website by uploading it to the languages folder using FTP / SFTP with the correct naming convention.

Below are the detailed steps –

Step 1: Visit the GlotPress Project. GlotPress for Astra Theme is hosted on WordPress Repository here and Astra Pro can be translated here.

Step 2: Login or Register a new account.

Step 3: Choose your language from the list. (Screenshot). Click on the Astra.

Step 4: Click on any string and translate it

Step 5: Once you translate all required strings, scroll the page till the end.

Step 6: From the last line select only matching the filter and Machine Object Message Catalog (.mo), then click on Export.

Step 7: Rename the .mo file as –

For Astra Theme:  astra-{locale-slug}.mo For Astra Pro: astra-addon-{locale-slug}.mo

Note: You can find a local-slug for your language from the list here.

For example – If the language is Hebrew, WordPress Locale Code for it is he_IL, then the theme mo file will be renamed as astra- he_IL.mo

Step 8:  Copy the above-renamed file to –

For Astra Theme:  wp-content/languages/themes/For Astra Pro: wp-content/languages/plugins/

That』s it! This will display unapproved translations on your site.

How to Translate Categories, Tags, and Astra Strings with Polylang

How to Translate Categories, Tags, and Astra Strings with Polylang

With Polylang, you can manually translate post categories, tags, and strings added with Astra. This document will show you how to do this.

Before we start, you will need to install the Polylang plugin on your website and do the setup. If you need help turning your Astra website multilingual with Polylang, please check this article.

How To Translate Post Categories and Tags?

Similar to translating posts or pages, you can translate post categories and tags.

We will show you how to translate a category using Polylang as an example.

Please follow these steps:Step 1 – Navigate to Dashboard > Posts > Categories;

Step 2 – In the category list, find the category you wish to translate. You will see Polylang translation options on the right side of each category. There will be columns for each available language translation. Flags mark the language of the original category (most often default language). Languages without translations are marked with the 「+」 icon; 

Step 3 – Start translating the category by clicking on the 「+」 icon for the desired language. This will open the category editor;

Step 4 – To translate the category, add your translation to the 「Name」 field;

Step 5 – Click on the 「Add New Category」. This will create a new category linked as a translation to your original category. You will also notice that the 「+」 icon changed to the 「pencil」 icon to mark the existing translation;

Step 6 – Repeat steps 3 to 5 for each of the available languages.

Similarly to these steps, you can also translate any other category and your tags.

How To Translate Astra Strings?

In this article, as an example, we will show you how to translate Astra Theme custom texts. You can follow a similar method for translating any other string in Astra.

We added a Button Header element to the Primary Header and added the label 「Register」. We will add a translation for this label using Polylang string translations.

Please follow these steps:

Step 1 – From the WordPress dashboard, navigate to Dashboard > Polylang > Strings translation page;

Step 2 – Browse the string list and find the string you wish to translate. You can also use the search bar on the top right side of the page. You can type in any term (e.g., 「astra」) to sort the list to related strings only;

Step 3 – We searched for the term 「register」 and found our button string. On the right side of that string line, you will see the Polylang translation fields for each available language;

Step 4 – To translate the string to any language, just click the appropriate translation field and add your translation.

Step 5 – Scroll down and click on the 「Save Changes」 button once you』re done.

You can repeat this process for each string and language.

Now, that you know how to translate categories, tags, and strings with Polylang, you can make your Astra website entirely multilingual.

Modify Your PHP Configuration

Modify Your PHP Configuration

Occasionally, you might need to modify your website』s PHP configuration. You will be able to solve some issues or make your website work better. Also, some plugins you would like to add to your website might require more resources. This document shows you how to do it.

PHP and why it』s important?

PHP is a programming language used for writing WordPress. PHP makes it possible for WordPress to interact with the database and fetch data from it. It goes the same for your themes and plugins. 

These processes happen on your server before they are delivered to the browser, as PHP is a server-side language. 

PHP Limits and why do you might need to modify them?

Each WordPress installation comes with the default limits set by your hosting provider. These are usually optimal settings adjusted to the hosting services you use and will satisfy most of your websites』 needs.

As mentioned before, PHP can perform many different processes, and for all of these, it needs server resources. If, for example, you have some plugins that require more resources to function, they can take up most of the available resources, not leaving enough space for other plugins. Not having enough server resources will cause these plugins not to perform well.  

Once your website』s needs exceed the allocated resources, a fatal error happens on your website. Thus, to have all of your plugins function correctly, you would need to increase PHP limits.

Astra and Starter Templates – PHP configuration

Astra theme and Starter Templates require minimal resources to function correctly. Occasionally, it happens that your PHP limits are set too low for the plugins already running on your website, which can cause issues. If you see a fatal error message or have your Starter Template imports fail, please modify your PHP configuration to make more resources available for your website. 

These settings will ensure that there are enough resources on your website, even if you』re, for example, running some highly demanding plugins. These are not, in any case, the minimum required values, but these can be used as a configuration that would guarantee, in most cases, that your website has enough resources to function correctly:

memory_limit = 512Mmax_execution_time = 900max_input_time = 900post_max_size = 256Mupload_max_filesize = 720M

You can also try increasing your values gradually and checking if you can import your template successfully with those values:

For example, if your memory_limit is set by default to 128M – try changing it first to 256M, and check if your import goes well. If not, change the value then to 315M, and then to 512M, and so on.

Modify your PHP limits – Step 1

Modifying your server and website files can be challenging if you don』t have experience with this. Thus it』s always a good choice to contact your hosting provider and ask for assistance with this. Most hosting companies will help you with this. Make sure to mention the values for the PHP configuration which we suggested previously.

Modify your PHP limits – Step 2

There are several ways that you can modify your PHP configuration yourself. Depending on your host, these settings could be available through your admin panel (host admin, cPanel, etc.).

If not, you can change these values directly in the PHP.ini file.

Alternatively, if it suits you more, you can make these changes also in one of the following files:

wp-config.php.htaccess 

All of these files can be found in the root directory of your website. To access it, you would need an FTP client (like FileZilla, for example) installed on your computer and your website』s FTP access details.

How to access the files?

Before making any changes to any of your files, please create a complete backup of your website. Also, it is advisable to make a copy of the original file before editing it – in case something goes wrong, you can always use this original file to start over.

We』ll use the FileZilla FTP client for this article, so please install it on your computer (unless you are familiar with another FTP client you would prefer to use). Let』s start:

Add your FTP access data to FileZillas』 Site Manager;Connect to your server;Navigate to your websites』 public_html (root) folder. Here you should find the files. 

How to modify your PHP configuration? 

Now that you have found your file (PHP.ini OR wp-config.php OR .htaccess), right-click on the file and select 「Download』 to copy the file to your computer.

Now you can edit the file on your computer. You can edit these files using some of the code editors like Sublime Text or Notepad++. 

Once you modified your file, upload it back to your server (using the FTP client), replacing the original file with this modified one, and your new values will become active.

Method 1 – modify PHP.ini

If you can』t find the PHP.ini file, you can create the file yourself. Some hosts do not allow users to access the PHP.ini file. In this case, you can ask your host to allow you to create a duplicate PHP.ini file in your directory or try. The data or values in the duplicate file will override those in the original PHP.ini file. 

You can create a new file named PHP.ini in the directory where your WordPress website is installed (your root directory). Once you have the file, please follow the instructions:

Step 1 – Open the file using the code editor;

Step 2 – Add the following values:

memory_limit = 512M;
max_execution_time = 900;
max_input_time = 900;
post_max_size = 256M;
upload_max_filesize = 720M;

Step 3 – Save the file.

Note

Some servers will require a restart (Apache or Nginx) for php.ini changes to take effect. Also, depending on your server configuration, you』ll need to restart the PHP-FPM server process too. If you』re not sure how to do this, please get in touch with your hosting provider.

Method 2 – modify wp-config.php

Alternatively to modifying the PHP.ini file, you can modify the memory limit in your wp-config.php file, following these steps:

Step 1 – Open the file using the code editor;

Step 2 – Scroll down to the 「That』s all, stop editing! Happy publishing」 line;

Step 3 – Add the following value before that line:

define( 'WP_MEMORY_LIMIT', '512M' );

Step 4 – Save the file.

Method 3 – modify .htaccess

You can modify your PHP configuration also by using the .htacces file. Keep in mind that the .htaccess file may be hidden, so once you access your root directory using the FTP client, make sure you check the folder for the hidden files. 

To modify the file, follow these steps:

Step 1 – Open the file using the code editor;

Step 2 – Add the following values:

php_value memory_limit 512M
php_value max_execution_time 900
php_value max_input_time 900
php_value post_max_size 256M
php_value upload_max_filesize 720M

Step 3 – Save the file.

How to Roll Back to A Previous Version of Astra?

How to Roll Back to A Previous Version of Astra?

This document will show you how to roll back your Astra theme or Astra Pro version in few simple clicks.

You can easily downgrade to the previous version with our Rollback feature, which is available since Astra Pro addon (plugin) version 3.6.1. 

Why Is the Rollback Feature Important?

Keeping your theme and plugins updated is essential. However, sometimes after the update, you might encounter some problems – for example, incompatibilities with some third-party plugins.

In this case, the option to roll back to a previous version of Astra can come in handy. Going back to the previous version ensures that your website will be fully functional while waiting for the solution.

Once the issue is fixed, you can update the theme or plugin again to the newest version.

How To Use Rollback Feature?

The rollback feature for both theme and plugin is available only for users with the Astra Pro license. Please make sure you have Astra Pro installed and activated. 

Note:

The Rollback is a premium feature and is not available with the free Astra theme.

To roll back your Astra theme or Astra Pro plugin, please follow these steps:Step 1 – Navigate to Dashboard > Appearance > Astra Options;

Step 2 – You will find the 「Rollback Version」 options in the right-side sidebar. Just scroll down to this section;

Step 3 – You will notice the separate options for Astra Theme and Astra Pro. Click on the appropriate dropdown menu, and select the desired version to which you want to roll back. Keep in mind that you』ll have a limited number of previous versions available. 

Step 4 – Click on the 「Rollback」 button and confirm the rollback in the popup window to start the process. It will replace the newest version with the required previous version.

That』s all. Once the rollback is done, your Astra theme or Astra Pro will be reverted to the previous version.

What To Do When Product Count Is Not Visible on Mini Cart With Astra Pro?

What To Do When Product Count Is Not Visible on Mini Cart With Astra Pro?

Did you notice that the product count on WooCommerce or EDD mini cart in your Header is not visible? You might need to modify the Product Count Color for your Astra Pro mini cart icons (any but the default). This document will show you how to do it.

Why Did This Happen? 

Astra Pro WooCommerce and EDD Modules bring the option to change the default mini cart icon. You can set one of the Astra Pro icons by navigating to the Mini Cart Header element (General tab).

By default, the font color for the number of items in the cart (Product Count) is white. Setting your Cart color to white too will create a situation that the number of items becomes invisible though the number is still actually there (white color on white color).

This is easily solved by setting product Count Color to any color other than white.

How To Set Product Count Color?

In this case, you should additionally set another color for the number of items using the 「Count Color」 option.

The 「Count Color」 is available with Astra Pro Addon since version 3.5.9. You can set it up by following these steps:Step 1 – Login to your website and make sure that your Astra Pro Addon plugin is active;

Step 2 – Navigate to Appearance > Customize > Header Builder > Cart > Design;

Step 3 – Set 「Count Color」 to another color. Click 「Publish」 to save changes.

Starter Templates – Wireframe Blocks

Starter Templates – Wireframe Blocks

Wireframing the structure of any website before beginning the design process is very important. It increases work efficiency, makes the workflow more effortless, and helps you get the final website design ready in less time. Now you can create your page or website mockup faster than ever with Starter Templates Wireframe Blocks.

This document will help you to understand how wireframe blocks work and what benefits they bring. 

What Are the Wireframe Blocks?

Wireframing means having a basic structure of your webpage like some sections, their layout, image position, text position, and so on. This gives you an idea of how you can manage content on any webpage.

But if you ever try creating wireframes using online tools or even with simple pen-paper, you will understand it is not quite easy. You will have to understand and study how online tool works. And well, working with pen-paper is neither convenient nor reliable as the design might end up undone.

Usually, you would create wireframes on external platforms and then transfer the designs to your website. Starter Templates offers ready-to-use wireframe blocks right inside the Gutenberg editor, helping you avoid those extra efforts. You can now create your wireframe design directly on your website.

Benefits of using wireframe blocks:

Provides basic structure to start any website design.Save your time in creating a wireframe with an external tool or traditional pen-paperJust replace image, text and add colors in the wireframe to make the final website design ready in less timeMake website designing smooth and effortless

How To Use the Wireframe Blocks?

The Wireframe blocks can be accessed through the page/post editor. You can add an unlimited number of blocks and create the whole page or post structure in no time.

Note

The Wireframe Blocks are available with Starter Templates version 2.7.0 and above. Once you update your Starter Template plugin, please navigate to Appearance > Starter Templates and sync the templates Library (the 「Sync」 button is located in the top right corner of the Library).

We』ll show you an example of how you can create a page structure that you can share with your team or client:

Step 1 – Navigate to Dashboard > Pages > Add New. In the top menu of the page editor, click on the 「Starter Templates」 button. This will open the Starter Templates Library;

Step 2 – In the top menu of the Library, click on the 「Wireframes」 tab. Here you can find all wireframe blocks available;

Step 3 – Here, you can filter the blocks by color and category and import the wireframe block to your page. You can do this by hovering over the block you need and clicking on the 「Import」 button;

Step 4 – Repeat steps 2 and 3 until you import all the blocks you need;

Step 5 – Once imported, you can reposition and modify blocks as you wish. Once your wireframe design is done, click on the 「Publish」 button to save your changes.

Now you』re ready to review and share your mockup with whomever you want. 

Once the final page design is decided, there is no need to create a new page. You can directly modify the wireframe blocks as needed and replace placeholders with your content.

That』s all. Your wireframe design is turned into the final design in no time.