Kirki: Translation don't work in Customizer

[Radzio1615]

Issue description:

Hi. I'm trying to translate created sections, panels and controls. I created a .PO file and saved it in the /mytheme/languages/ folder. Unfortunately, the translation doesn't work. Sections and panels are saved in the .PHP file in the /mytheme/inc/kirki-controls.php folder.

An example section that I want to translate:

Kirki::add_section( 'section_layout', array(
    'title'          => esc_attr__( 'Site Layout', 'mytheme' ),
    'panel'          => 'panel_main',
) );

In the functions.php file, I added:
load_theme_textdomain( 'mytheme',get_template_directory(). '/languages' );

If I copy this code to a file, for example footer.php, the translation works here.
<?php echo esc_attr__( 'Site Layout', 'mytheme' );?>

I use Kirki as a plugin from the Wordpress directory.

[aristath]

Are you by any chance adding your fields inside an action instead of adding them directly?

[Radzio1615]

What do you mean?

/mytheme/inc/kirki-controls.php file:

Kirki::add_config( 'mytheme_customizer', array(
  'capability'    => 'edit_theme_options',
  'option_type'   => 'theme_mod',
) );



Kirki::add_panel( 'panel_header', array(
    'priority'    => 10,
    'title'       => __( 'Header', 'mytheme' ),
) );
    Kirki::add_section( 'section_header', array(
        'title'          => __( 'Layout', 'mytheme' ),
        'panel'          => 'panel_header',
        'priority'       => 10,
    ) );
        Kirki::add_field( 'mytheme_customizer', array(
            'type'        => 'checkbox',
            'section'     => 'section_header',
            'settings'    => 'header_sticky',
            'label'       => __( 'Sticky', 'mytheme' ),
            'default'     => true,
        ) );

/mytheme/functions.php file:

add_action('after_setup_theme', 'mytheme_setup');
function mytheme_setup(){
  load_theme_textdomain('mytheme', get_template_directory() . '/languages');
}
include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
if ( is_plugin_active( 'kirki/kirki.php' ) ){
  require get_template_directory() . '/inc/kirki-controls.php';
}

[aristath]

What the code above does:

First the inc/kirki-controls.php file is loaded, then the translations are loaded. Since the translations are in an action on after_setup_theme, they get loaded after the functions.php file.
If a file containing translations is loaded before the actual translations load, then they won't be translatable.
To fix this you should always make sure that all your files that contain strings to be translated are loaded after your load_theme_textdomain call.
In this case you should replace this line:

require get_template_directory() . '/inc/kirki-controls.php';

with something like this:

add_action( 'after_setup_theme', function() {
  require get_template_directory() . '/inc/kirki-controls.php';
}, 20 );

Or just move it inside your mytheme_setup function (after the load_theme_textdomain call ).

[Radzio1615]

Oh, it was easy! Thanks for the explanation :)