Kirki Toolkit: A complete toolkit for WordPress Theme Developers
We’re going to go through Kirki Toolkit, a great Customizer toolkit for WordPress theme developers. Using Kirki theme developers can create rich experiences for the WordPress Customizer using best coding practices.
Theme Customization API
WordPress version 3.4 introduced a new API called the Theme Customization API and the “Theme Customizer” screen. It allows us to add customization options in the Appearance > Customize menu, with an opportunity to change theme settings simultaneously while previewing the website.
Developing theme options using the Customizer API, while being a straightforward and logical process, involves writing a certain amount of repetitive code. To cut down on some of the steps required to build a functioning and safe Customizer options, Aristeides Stathopoulos has been developing a free and open-source plugin, Kirki.
It didn’t create much hype at first, but the community adopted it over time, and we gradually got more and more excited about this handy API. Over two years after its release, the Customizer API has evolved into a wonderful utility that even lets us publish posts and customize the login screen.
It’s not an overstatement to say that Customizer is one of the most valuable APIs of WordPress because of its ability to completely change users’ experience.
What is Kirki?
Kirki is a great tool to improve the experience of a theme’s users. It focuses solely on theme customization and extends the default Customizer controls with toggles, range inputs and images as radio buttons.
Let’s hear what Kirki Toolkit is about from the developer behind it:
Kirki is not a framework. It’s a toolkit allowing WordPress developers to use the Customizer and take advantage of its advanced features and flexibility by abstracting the code and making it easier for everyone to create beautiful and meaningful user experiences.
Once you get to know how it works, building a theme customization screen will be easier than ever.
A Call to Action: Kirki is translation-ready and needs your help to translate this open-source project into different languages.
You can install the Kirki as a plugin form the WordPress plugin directory. If you are a developer and want to add the Kirki in your theme or plugin, you can download the Kirki plugin and put it in your theme folder. After extracting the plugin file put the Kirki folder with all files anywhere in your theme directory.
Currently, there are 2 options:
- Recommend (or require) the installation of Kirki as a plugin
- Embed Kirki in your theme.
You can include this simple script in your theme to recommend the installation of Kirki from inside the customizer.
Copy the file from here to your theme (for example in
mytheme/inc/class-kirki-installer-section.php), and then in your
functions.php file add this:
include_once get_theme_file_path( 'inc/class-kirki-installer-section.php' );
Kirki extends the default control fields list with new ones. For the sake of writing a more “complete” tutorial, I will include the core control fields as well as Kirki’s additional control fields.
text-allows you to add a simple text input.
textarea-allows you to add a text area.
editor-allows you to add a WYSIWYG editor.
radio-allows you to add radio buttons.
checkbox-allows you to add checkboxes.
color-alpha(supports transparency) -allow you to select a color with a nice color picker.
background-allows you to add a complete CSS background customizer.
palette-allows you to add a color palette.
select-allows you to add a dropdown menu.
select2-allows you to add a “better” selection menu, different from the default
select2-multiple-allows you to add a selection menu with multiple choices. (Wild guess: This might be merged with the
select2field in the future.)
dropdown-pages-allows you to add a dropdown menu listing the pages in the database.
upload-allows you to add the native uploader.
image-allows you to add the native image selector/uploader.
radio-image-allows you to add images acting as radio buttons.
radio-buttonset-allows you to add a button set acting as radio buttons.
number-allows you to add an HTML5 number input.
slider-allows you to add an HTML5 range slider.
multicheck-allows you to add a list with multiple checkbox inputs.
switch-allows you to add a “switch” button that acts like a checkbox, but prettier.
toggle-allows you to add a “toggle” button that also acts like a checkbox.
sortable-allows you to add a sortable list of checkbox controls.
custom-allows you to add a custom control field, which is basically any valid HTML code fragment.
Kirki has some pretty cool settings for you to make a customized Customizer for your theme. You can display a logo above the control fields, set a different color scheme for the Customizer and so on.
logo_image: Specifies the logo image URL.
description: Specifies a description text that will be displayed upon clicking the logo.
color_active: Specifies the “active” color for menu items, help buttons and such.
color_light: Specifies the “secondary” color for disabled and inactive controls.
color_select: Specifies the “selected” color for, well, selected stuff.
color_accent: Specifies the “accent” color that’s used on slider controls and image selects.
color_back: Specifies the background color for the Customizer.
url_path: Specifies the URL path for Kirki, used for loading CSS files in its
stylesheet_id: The stylesheet ID to set as the handle in CSS enqueueing processes.
To set these style options, you will need to use the
Here are some great resources.
- Kirki Toolkit Documentation
- Theme Options – The Customizer API, from the WordPress.org Theme Handbook
Kirki is actively being developed and supported. Its API and customs control already significantly optimize the time it takes to develop Customizer theme options. This becomes especially important if you’re looking to have your theme listed in the WordPress.org themes repository. In fact, themes that provide customization options are required to do so via the Customizer rather than custom options pages.
What do you think about Kirki? Shoot your thoughts in the Comments section below. And if you liked the article, don’t forget to share it with your friends!