New Check out the curated list of the finest design resources I've gathered for you! Take a look →

How to Create Global Options using Kirki Customizer in WordPress

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.

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.

create global options using Kirki Customizer in WordPress
create global options using Kirki Customizer in WordPress

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.

how to render custom global options
how to render custom global options

3. Replace the social media account names and URLs with your desired ones.

Manage content social URL accounts
Manage content social URL accounts

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.

Results
Results

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.

Rizwan Aritonang

An independent WordPress & Front-End Developer from Bandung, Indonesia.

Get In Touch

2 thoughts on “How to Create Global Options using Kirki Customizer in WordPress”

  1. A fascinating discussion is worth comment. I do think that you ought to publish more about this subject matter, it might not be a taboo matter but generally people do not discuss these issues. To the next! Best wishes!!

    Reply

Leave a Comment