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.
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.
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 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 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 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:
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.
textallows you to add a simple text input.
textareaallows you to add a textarea.
editorallows you to add a WYSIWYG editor.
radioallows you to add radio buttons.
checkboxallows you to add checkboxes.
color-alpha(supports transparency) allow you to select a color with a nice color picker.
backgroundallows you to add a complete CSS background customizer.
paletteallows you to add a color palette.
selectallows you to add a dropdown menu.
select2allows you to add a “better” selection menu, different from the default
select2-multipleallows you to add a selection menu with multiple choices. (Wild guess: This might be merged with the
select2field in the future.)
dropdown-pagesallows you to add a dropdown menu listing the pages in the database.
uploadallows you to add the native uploader.
imageallows you to add the native image selector/uploader.
radio-imageallows you to add images acting as radio buttons.
radio-buttonsetallows you to add a button set acting as radio buttons.
numberallows you to add an HTML5 number input.
sliderallows you to add an HTML5 range slider.
multicheckallows you to add a list with multiple checkbox inputs.
switchallows you to add a “switch” button that acts like a checkbox, but prettier.
toggleallows you to add a “toggle” button that also acts like a checkbox.
sortableallows you to add a sortable list of checkbox controls.
customallows 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’s some great resources.
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!