How to Create Theme Options Panel in WordPress With Redux Framework

Are you trying to create an advanced theme options panel in WordPress theme using Redux Framework?  Mostly it’s needed for your client’s website or your own WordPress theme. It’s good for you to choose Redux Framework. In this article, we show you “How to Create Theme Options Panel in WordPress”.

Theme Option is one of the most important parts of a WordPress theme. For WordPress theme developers to build a professional Theme Option is a critical task. 

Thinks about it, You are building a Theme Option for the various users of your WordPress theme.  They don’t know about you and your intention. Make your option clear and understandable. Remember, You are going to control all over the Theme from this theme options panel. 

What is Redux Framework:

I think you should know about Redux Framework. It is the most popular option framework.

1,000+ block templates, layouts, and patterns from your Gutenberg Editor, Gutenberg Block Patterns library support built-in.

But we will use their option framework. Also, it was free. Let’s start creating a theme option: 

Setup Redux API On WordPress Theme:

You have two options to set up Redux API on your WordPress theme. Firstly, You can install an active WordPress plugin “Gutenberg Template and Pattern Library & Redux Framework”. 

But you can add its whole plugin file in your internal theme or plugin file. Then you no need to install an extra plugin for Redux. It will be working well. 

You can add it under Your main WordPress theme or plugin. Let’s add it:

In the first step: You need to create a file named “redux-config.php” in the theme directory. And include it.

require get_template_directory(). '/redux-config.php';

And then: Download the Redux Framework plugin file and extract the file. Copy the file and place your theme directory. And include it.

if(file_exists(get_template_directory().'/redux-framework/redux-framework.php')):
    require get_template_directory().'/redux-framework/redux-framework.php';
endif;

If you do it properly, the redux plugin has included internally in your theme. Now We can go next step: Now we will integrate redux API, Let’s open the file redux-config.php.

Most Importantly, At first setup option name variable:

$opt_name = 'WPK_OPTIONS';

To get current theme data use:

$theme    = wp_get_theme();

Now we will add arguments:

The code should be like this-

if(class_exists('Redux')):
$opt_name = 'WPK_OPTIONS';
$theme    = wp_get_theme();
$args = array(
 'opt_name'    => $opt_name,
 'display_name' => $theme->get('Name'),
 'display_version' => $theme->get('Version') ,
 'menu_type' => 'submenu',
 'menu_title' => esc_html__('Theme Options', 'wpk'),
 'page_title' => esc_html__('ThemeOptions', 'wpk') ,
 'google_api_key' => '',
    'google_update_weekly' => false,
    'async_typography' => true,
    'admin_bar' => true,
    'admin_bar_icon' => '',
    'admin_bar_priority' => 50,
    'global_variable' => $opt_name,
    'dev_mode' => false,
    'update_notice' => false,
    'customizer' => true,
    'page_priority' => null,
    'page_parent' => 'themes.php',
    'page_permissions' => 'manage_options',
    'menu_icon' => '',
    'last_tab' => '',
    'page_icon' => 'icon-themes',
    'page_slug' => 'themeoptions',
    'save_defaults' => true,
    'default_show' => false,
    'default_mark' => '',
    'show_import_export' => true,
);
Redux::set_args( $opt_name, $args );
//start the next code 
endif;

I am not going to explain every argument. I think if you are a good user then you can also change it.  If you do it properly but nothing has changed visually. We will see this in the next section.

Create Section & Field:

If you complete the previews requirement then your theme is ready for creating a redux section. After creating a section your theme options will visually show up. 

Put this code above endif on redux-config.php

Redux::setSection($opt_name, array(
    'title' => esc_html__('Genaral Options', 'wpk') ,
    'id' => esc_html__('wpk-genaral', ' wpk') ,
    'icon' => 'icon-name',
    'fields' => array()
));

Now reload your WordPress admin dashboard. You will see a new option under “Appearance”. 

Carefully see the code you will see array arguments named “fields” are empty arrays. We will add some fields for this section. 

Put this code above endif on redux-config.php. Now we fill fields empty array:

Redux::setSection($opt_name, array(
    'title' => esc_html__('Header Options', 'wpk') ,
    'id' => esc_html__('wpk-header', ' wpk') ,
    'icon' => 'icon-name',
    'fields' => array(
        array(
            'id'    => 'button-set',
            'type'  => 'button_set',
            'title' => esc_html__('Header Design', 'wpk'),
            'subtitle' => esc_html__('Choose Your Website Header Design', 'wpk'),
            'desc'      => 'Exmple fields by wpknifer.com',
            'options' => array('1' => 'Round', '2' => 'Sami Round', '3' => 'Flat'),
            'default' => '2',
        ),
        array(
            'id'    => 'social-button',
            'type'  => 'switch',
            'title' => esc_html__('Social icon', 'wpk'),
            'subtitle' => esc_html__('On Your Social Media Icon', 'wpk'),
            'desc'      => 'Exmple fields by wpknifer.com',
        ),
        array(
            'id'    => 'menu-style',
            'type'  => 'select',
            'title' => esc_html__('Menu Style', 'wpk'),
            'subtitle' => esc_html__('Selact Your Menu Style', 'wpk'),
            'desc'      => 'Exmple fields by wpknifer.com',
            'options'  => array('1' => 'Opt 1', '2' => 'Opt 2', '3' => 'Opt 3'),
        ),
    )
));

We have created two different sections. In General, the option has an empty field, and the other header section has some field.

Don’t worry about field type, Go to Redux Documentation.

Get Field Value: 

I think you did set up full theme options as your wish. Now we will use it. Redux all types of value have to save in one global variable. We are option name “WPK_OPTIONS”.  We can get field value using that. 

But We will create a function that returns the theme option field value. Look like That:

function wpk_get_options($args = ''){
    global $WPK_OPTIONS;
    if($args != ''){
        return $WPK_OPTIONS[$args];
    }
}

Conclusion:

I hope you have already built your theme options. I avoid some theoretical explanations. Because You don’t need to be a computer engineer. Just focus on your job and complete it properly. Then slowly you will understand how to work it. Keep practicing must then one day you will become professional.

I hope you have liked my article. If I mistake in my article, Please correct me. If you comment below,  it is very encouraging. Now you know “How to Create Theme Options Panel in WordPress With Redux Framework”.

See More:

How to Create an Advanced Theme Options Panel in WordPress (Metabox)