Translate Site Builder Layouts Using Polylang

This guide will walk you through translating layouts created with the Site Builder module of Astra Pro using Polylang.

Site Builder is an advanced module that extends Astra theme capabilities, allowing you to insert sections or code into any page using hooks. You can also create custom templates with this feature.

While Polylang typically allows you to translate pages or posts directly, the process for translating Site Builder layouts requires a few extra steps. You can follow this guide for a smooth translation experience!

What Are the Steps to Translate Site Builder Layouts?

Before you begin, you’ll need to enable translation support for Site Builder layouts in Polylang. Here’s how:

• Go to Languages > Settings.
• Under Custom Post Types and Taxonomies, look for Site Builder (astra-advanced-hook).
• Check the box to enable Polylang for Site Builder and save your changes.

• Next, navigate to Site Builder and Switch to Table View.

In this view, you’ll be able to manage different layouts easily and identify which ones need to be translated.

Now that you’re in the table view, it’s time to start translating:

• Select the language for which you want to create the layout. If there are three languages, follow the process for each language and add the layout manually for all the languages.

Once you have added the layout for all the languages it will look like the below screen:

Note: You can also select the languages for each layout from the editor. Please ensure to select the language for each layout individually.

• Next to connect both the layouts with each other, edit the layout and in the editor screen, select the translated version.

That’s it! You’ve now successfully translated your Site Builder layouts with Polylang. This method will help you maintain a multilingual website with properly translated layouts for each language.

Additional Compatibility for Site Builder & Polylang

While translating the Site Builder layouts with Polylang, the display conditions may change for the layout. Polylang automatically syncs all meta fields by default. So, it syncs the display conditions, also causing them to update for the translated layout. 

In some Site Builder layouts, it may cause the issu,e so this can be resolved by using the below compatibility filter:

/**
 * This prevents display conditions from syncing between translated hooks
 */
if ( class_exists( 'Polylang' ) ) {
	
	add_filter( 'pll_copy_post_metas', 'astra_block_hook_display_sync', 1, 5 );
	function astra_block_hook_display_sync( $metas, $sync, $from, $to, $lang ) {
		if ( get_post_type( $from ) === 'astra-advanced-hook' || get_post_type( $to ) === 'astra-advanced-hook' ) {
			$blocked_metas = array(
				'ast-advanced-hook-location',
				'ast-advanced-hook-exclusion',
			);
			$metas = array_diff( $metas, $blocked_metas );
		}
		return $metas;
	}
	
	add_filter( 'update_post_metadata', 'astra_block_polylang_meta_updates', 1, 5 );
	function astra_block_polylang_meta_updates( $check, $object_id, $meta_key, $meta_value, $prev_value ) {
		// Early return for non-Advanced Hooks
		if ( get_post_type( $object_id ) !== 'astra-advanced-hook' ) {
			return $check;
		}
		
		// Early return for non-display condition metas
		if ( ! in_array( $meta_key, array( 'ast-advanced-hook-location', 'ast-advanced-hook-exclusion' ) ) ) {
			return $check;
		}
		
		// Check if this is from Polylang (optimized backtrace)
		$backtrace = debug_backtrace( DEBUG_BACKTRACE_IGNORE_ARGS, 8 );
		foreach ( $backtrace as $trace ) {
			if ( isset( $trace['class'] ) && strpos( $trace['class'], 'PLL_Sync' ) !== false ) {
				return true;
			}
		}
		
		return $check;
	}
}

The above code can be added to the functions.php file of the child theme, and that will fix the display conditions issue for the Site Builder layouts when translated with Polylang.

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 guide.

We hope this guide has been helpful. If you have any questions, feel free to reach out in the comments below. We’re here to help!

Additionally, you can explore more about making your website multilingual with Astra and Polylang through this article.