Using Kirki to Create Customizable WordPress Themes

Posted on Updated on WordPress by Adam Laki

If you want to create a multi-purpose WordPress theme that you can use in different scenarios, you may need some framework.

Building a customizable WordPress theme can be tricky. We can handle a lot of things vanilla, but sometimes we need a little extra help. Fortunately, there is a lot of option and customizer framework.

When I develop a theme, I like to keep it clean, but I also like to use the best tools. For handling options, I use ACF (it is needed in every site), for customizer configuration I choose Kirki (in complex templates).

The customizer is a complex and significant feature of WordPress, but with Kirki, it can be better and easier to manage.

Integration

If you want to integrate Kirki in your theme, the best way to use it as a plugin dependency you can bundle and require the installation from using TGMPA. Installing this way, it will be manageable to update the plugin without releasing a new theme.

Initialization

To initialize the frameworks, we have to add the following somewhere in our theme’s functions.php file:

if( class_exists( 'Kirki' ) ) {
    Kirki::add_config( 'base', array(
        'capability'    => 'edit_theme_options',
        'option_type'   => 'theme_mod',
        'option_name'   => 'base',
    ) );
}

Controls

The core of this extension is the controls. Right now, there are 32 controls to choose from. Using the unique controls, we can create better user experiences.

If we want to add new controls first, we need to create a panel (Kirki::add_panel) that has one or more sections (Kirki::add_section).

Kirki::add_panel( 'base_appearance', array(
    'priority'    => 60,
    'title'       => esc_attr__( 'Appearance', 'pine' ),
) );

Kirki::add_section( 'base_general_colors', array(
    'title'          => esc_attr__( 'Colors', 'base' ),
    'panel'          => 'base_appearance',
    'priority'       => 160,
) );

Kirki::add_field( 'base', array(
    'type'        => 'color',
    'settings'    => 'base_general_colors_default',
    'label'       => __( 'Primary Color', 'base' ),
    'description' => esc_attr__( 'Set the primary color for the theme.', 'base' ),
    'section'     => 'base_general_colors',
    'default'     => '#0B9547',
    'output' => array( 
        array( 
            'element' => 'a', 
            'property' => 'color', 
        ) 
    ),
) );

Using the Kirki::add_field function, we declare our first field, which is a color picker. As you see, we declared some arguments to make it more usable.

CSS Module

Another cool feature of Kirki is the CSS Module, which handles the CSS generating for us. As you see in the example, we can declare an output argument at our control field where we can specify an element and a property for the CSS expression.

'output' => array(
    array(
        'element'  => 'a',
        'property' => 'color',
    )
),

Need a web developer? Maybe we can help, get in touch!