Want to know how to create global options using Kirki Customizer in WordPress? This step-by-step guide will show you how to easily customize your website according to your needs.
By the end of this tutorial, you will have successfully created custom global options using Kirki Customizer and displayed them on the front-end of your WordPress website.
This guide will take you through the process of installing and setting up Kirki Customizer, as well as displaying custom features on the front-end of your website using Kirki.
Please note: As a case study example, I will create a custom feature in managing social media accounts that will be displayed in the footer. For this, I will be using the Twenty-Twentyone theme.
Table of Contents
Step 1: Installing and Setting up Kirki Customizer
To get started, follow these steps to install and activate the Kirki Customizer plugin:
1. Go to the “Plugins” section in your WordPress dashboard and click “Add New.”
2. Search for “Kirki Customizer” and click “Install Now” on the Kirki Customizer plugin.
3. After installation, navigate to your theme’s functions.php file.
4. Copy and paste the provided code into your functions.php file, which will register a new panel inside the customizer panel.
/* ======================================================================== */ /* Customizer Setup */ /* ======================================================================== */ require get_template_directory() . '/inc/customizer/customizer.php';
/**
* Panel Footer
*/
new \Kirki\Panel(
'footer',
[
'priority' => 1,
'title' => esc_html__( 'Footer', 'rzwn' ),
'description' => esc_html__( 'Edit & Update for all elements/components inside Footer section.', 'rzwn' ),
]
);5. Paste another code to register a new section inside the footer panel, making it easier to manage custom features.
/**
* Section Socials
*/
new \Kirki\Section(
'social',
[
'title' => esc_html__( 'Social Links', 'rzwn' ),
'panel' => 'footer',
'priority' => 1,
]
);
6. Lastly, copy and paste the code to create a repeater of social items, where you can select a social media platform’s name and enter the corresponding URL.
new \Kirki\Field\Repeater(
[
'settings' => 'social_links',
'section' => 'social',
'label' => esc_html__( 'Social Media', 'rzwn' ),
'priority' => 1,
'row_label' => array(
'type' => 'field',
'value' => esc_html__( 'Social Media', 'rzwn' ),
'field' => 'social_icon',
),
'button_label' => esc_html__( 'Add new Social Media ', 'rzwn' ),
'fields' => array(
'social_name' => array(
'type' => 'select',
'label' => esc_html__( 'Social Name', 'rzwn' ),
'default' => 'facebook',
'choices' => array(
'facebook' => esc_html__( 'Facebook', 'rzwn' ),
'twitter' => esc_html__( 'Twitter', 'rzwn' ),
'instagram' => esc_html__( 'Instagram', 'rzwn' ),
'pinterest' => esc_html__( 'Pinterest', 'rzwn' ),
),
),
'social_url' => array(
'type' => 'link',
'label' => esc_html__( 'Social URL', 'rzwn' ),
),
),
]
);7. Once completed, you have successfully installed and set up Kirki Customizer for custom global options.
Step 2: Displaying Custom Features on the Front-End Using Kirki Customizer
To display your custom global options on the front-end of your website, follow these steps:
1. Open the footer.php file of your WordPress theme.
2. Locate lines 56 to 69 and insert the provided code.
3. Replace the social media account names and URLs with your desired ones.
4. Save the changes and visit the front-end of your website.
5. You should now see the social media icons with corresponding links displayed.
Conclusion
By following these two easy steps, you can create and display custom global options using Kirki Customizer in WordPress. This allows you to fully customize your website and create a unique online presence that stands out from the competition. Don’t forget to check out other helpful WordPress development case studies to enhance your skills.
