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

Hey! Are you trying to create an advanced theme options panel in WordPress? We will show how to create the most advanced theme options panel in WordPress. Theme options are an important part of every WordPress theme developer. Every WordPress theme needed a theme setting. 

Most WordPress theme developers do not have their own field framework. We can get help with a WordPress advanced field framework.  But think at first,  WordPress theme settings are a critical part of WordPress theme development. You need to research well and be prepared for what option you want to be given. Also, Every option should be working well and be easy to understand. We have another article on How to Create Theme Options Panel in WordPress With Redux Framework.

If you develop a premium WordPress theme for various marketplaces or own custom projects for clients. You need to choose an advanced field framework that has multiple possibilities.  If you use multiple frameworks for every single job that makes it difficult to control WordPress theme development or theme version control. That time you can not update the theme version further. 

Required WordPress Framework Plugin:

In this article,  We will need a framework plugin for creating a WordPress theme options panel. Because We are not going to develop a field framework. WordPress has many advanced field frameworks that are pre-made. We will use one of them. 

If you are a professional WordPress theme developer or You want to be a professional Theme developer. You have to develop a lot of WordPress themes. So, We will prefer to know about the Metabox framework. It has unlimited possibilities and is easy to use.

So,  We are going to Create an Advanced Theme Options Panel in WordPress by using the Metabox framework. To create the theme option for this article, You need to buy the Metabox framework. You can ask me, Why do you need to buy it? Let’s discuss it.

Why Buy Metabox Framework:

For professional WordPress developers, this is the most important custom field framework. By using this custom field framework you can add custom fields where you need them. You don’t need much coding knowledge, they have a visual builder. Otherwise, You can create a custom field by passing an array. I think this is all in one package for a custom field. Every developer should try it. 

Easy to Use:  Metabox is the easiest to use. You don’t need extra work to set up the Metabox. You just need to include an extension file in your development plugin or theme.  Otherwise,  just install the plugin file. But my recommendation is you will include a plugin file in your development plugin. Then start working.

No complicated coding: It’s super easy to create a custom field by using Metabox. When you include a plugin file then just create an array and pass by a necessary filter, hook, or function. 

Unlimited Possibilities: Possibilities have no limit. Work with your creative mind. Can you invent a new idea in WordPress?  Metabox helps you in all possible ways.

Add custom fields anywhere: You can add custom fields anywhere like the post, page, custom post type, taxonomy, user profile, front end, custom setting page, and all possible places.

Gutenberg and GDPR-compatible: Metabox has an extension named “MB Block”. You can create a Gutenberg block or any Metabox field converted to a Gutenberg block by using this. 

Tons of Options: It has nearly 50 types of custom fields and more than 20 premium extensions, and also a lot of free extensions to use.

Developer friendly: Metabox is made for developers. It makes theme development easy. It is also lightweight. Beginner theme developers can control it. 

To know more about Metabox custom field framework go to this link.

Metabox framework.

Create Theme Options Settings Page on WordPress:

First, you need to create a setting page named “Theme Options” under the main level menu named “Appearance”. But you must have included “MB Setting Page”.  You can read their documentation.

See This code:

<?php
// Register a theme options page
add_filter( 'mb_settings_pages', function ( $settings_pages ) {
    $settings_pages[] = array(
        'id'          => 'theme_options',
        'option_name' => 'theme_options',
        'menu_title'  => 'WPK Theme Options',
        'icon_url'    => 'dashicons-edit',
        'style'       => 'No boxes',
        'parent'      => 'themes.php'
    );
    return $settings_pages;
} );

For creating settings pages we use the mb_settings_pages filter. We create a setting page under the “Appearance” menu. But if you want to create a main level menu.  Just remove the parent parameter from the array. You can create a tab for your setting page.  We use the left style tab, You can use other styles like the “Top” style.

To add tabs, we add tab parameters with an array. A final setting page array with tabs. 

Add this code on function.php:

<?php
// Register a theme options page
add_filter( 'mb_settings_pages', function ( $settings_pages ) {
    $settings_pages[] = array(
        'id'          => 'theme_options',
        'option_name' => 'theme_options',
        'menu_title'  => 'WPK Theme Options',
        'icon_url'    => 'dashicons-edit',
        'style'       => 'No boxes',
        'tab_style'   => 'left',
        'parent'      => 'themes.php',
        'columns'     => 1,
        'tabs'        => array(
            'general' => 'General Settings',
            'header'  => 'Header Settings',
            'blog'  => 'Blog Settings',
            'single'  => 'Single Settings',
            'footer'  => 'Footer Settings',
        ),
    );
    return $settings_pages;
} );

If you include meta box extension properly. Reload your admin page and see a setting page already added.

Create Custom Field for WordPress Theme Settings:

Metabox has nearly 50 types of custom fields for use. They have good documentation. For adding custom fields to the WordPress settings page, We will use the rwmb_meta_boxes filter.

Example Code:

add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
    $meta_boxes[] = array(
        'id'             => 'general',
        'title'          => 'General',
        'settings_pages' => 'theme_options',
        'tab'            => 'general',
        'fields'         => array(
             array(
                'name' => 'Admin Logo',
                'id'   => 'admin_logo',
                'type' => 'file_input',
            ),
        ),
    );
    return $meta_boxes;
} );

That field adds to the theme_options settings page General Settings tabs. We will create a separate custom field group for every tab. 

For Your help, we will add a field for every tab. It’s simple theme settings.

You will get the full code at the end of the article.

Remember, This WordPress Theme option just created is not working. You need to dynamic it.

Get Field Value:

If you have placed the code properly the setting page has been clearly created. Like this:

 Normally Metabox setting page field value return like this:

 rwmb_meta(‘field_ID’, ['object_type' => 'setting'], 'settings_page_ID');

But we will create a simple function that can return value directly.

Use this code: 

function wpk_get_theme_option_value($id){
if(function_exists('rwmb_meta')):
if($id != ''){
$value = rwmb_meta( $id, ['object_type' => 'setting'], 'theme_options');
return $value;
}
endif;
}

Then just call this function like this:

wpk_get_theme_option_value( 'field_ID' );

Conclusion:

Most developers can not buy premium plugins. But if you want WordPress theme development easy and fast. You need to buy a premium plugin. Think smartly in one extension you can complete multiple tasks. Metabox has so many free extensions, You can use it and make easy your development life.

However, You can use an alternative name “redux framework”. If you want an article about redux. If this article helped you a little. And if We were a mistake, please comment below.

Use this code to add a field for your newly added theme setting page.

<?php
add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
    $meta_boxes[] = array(
        'id'             => 'general',
        'title'          => 'General',
        'settings_pages' => 'theme_options',
        'tab'            => 'general',
        'fields'         => array(
             array(
                'name' => 'Admin Logo',
                'id'   => 'admin_logo',
                'type' => 'file_input',
            ),
        ),
    );
    return $meta_boxes;
} );
add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
    $meta_boxes[] = array(
        'id'             => 'header',
        'title'          => 'Header',
        'settings_pages' => 'theme_options',
        'tab'            => 'header',
        'fields'         => array(
             array(
                'name' => 'Logo',
                'id'   => 'logo',
                'type' => 'file_input',
                'std' => get_theme_file_uri('assets/images/logo.png'),
                'desc' => 'Location ex: '.get_template_directory_uri().'/assets/images/logo.png',
            ),
            array(
                'name' => 'Logo White',
                'id'   => 'logo_white',
                'type' => 'file_input',
                'std' => get_theme_file_uri('assets/images/logo-white.png'),
                'desc' => 'Location ex: '.get_template_directory_uri().'/assets/images/logo-white.png',
            ),
            array(
                'name'            => 'Background color',
                'id'              => 'header_bg',
                'type'            => 'color',                
            ),
        ),
    );
    return $meta_boxes;
} );
add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
    $meta_boxes[] = array(
        'id'             => 'blog',
        'title'          => 'Blog settings',
        'settings_pages' => 'theme_options',
        'tab'            => 'blog',
        'fields'         => array(
             array(
                'name'    => 'Layout',
                'id'      => 'layout',
                'type'    => 'image_select',
                'options' => array(
                    'sidebar_left'  => 'https://i.imgur.com/Y2sxQ2R.png',
                    'sidebar_right' => 'https://i.imgur.com/h7ONxhz.png',
                    'no_sidebar'    => 'https://i.imgur.com/m7oQKvk.png',
                ),
            ),
             array(
                'name'        => 'Sidebar',
                'id'          => 'blog_sidebar',
                'type'        => 'sidebar',
                'field_type'  => 'select_advanced',
                'placeholder' => 'Select a sidebar',
                'hidden' => array( 'layout', '=', 'no_sidebar' ),
            ),
              array(
                'name'   => 'Post Metadata display',
                'id'     => 'post_ar_metadata',
                'type'   => 'select_advanced',
                'options' => array(
                    'author' => 'Author',
                    'comment' => 'Comment',
                    'view' => 'post view',
                    'category' => 'Category',
                    'date' => 'Data',
                    'modified' => 'Modified Date',
                ),
                'multiple'  => true,
            ),
            array(
                'name'        => 'Read More length',
                'id'          => 'read_mere_length',
                'type' => 'number',
                'min'  => 20,
                'step' => 1,
            ),            
            array(
                'id'        => 'enable_read_mere',
                'name'      => 'Enable Read More Text?',
                'type'      => 'switch',
                'style'     => 'rounded',
                'on_label'  => 'Enable',
                'off_label' => 'Disable',
            ),
            array(
                'name'        => 'Read More Text',
                'id'          => 'read_mere_text',
                'type'        => 'text',
                'placeholder' => 'Enter something here',
                'hidden' => array( 'enable_read_mere', '!=', 1 ),
            ),
             array(
                'id'        => 'enable_read_mere_button',
                'name'      => 'Enable Read More Button?',
                'type'      => 'switch',
                'style'     => 'rounded',
                'on_label'  => 'Enable',
                'off_label' => 'Disable',
            ),
            array(
                'name'        => 'Read More Button Text',
                'id'          => 'read_mere_btn_text',
                'type'        => 'text',
                'placeholder' => 'Enter something here',
                'columns' => 6,
                'hidden' => array( 'enable_read_mere_button', '!=', 1 ),
            ),
             array(
                'name'   => 'Button Background Type',
                'id'     => 'blog_button_type',
                'type'   => 'select',
                'options' => array(
                    'light' => 'Light',
                    'dark' => 'Dark',
                ),
                'columns' => 6,
                'hidden' => array( 'enable_read_mere_button', '!=', 1 ),
            ),
            array(
                'name'          => 'Button Background color',
                'id'            => 'blog_btn_bg_colors',
                'type'          => 'color',
                'alpha_channel' => true,
                'js_options'    => array(
                    'palettes' => array( '#fff', '#459', '#78b', '#ab0', '#de3', '#f0f' )
                ),
                 'columns' => 6,
                 'hidden' => array( 'enable_read_mere_button', '!=', 1 ),
            ),
            array(
                'name'          => 'Button Hover color',
                'id'            => 'blog_btn_hover_colors',
                'type'          => 'color',
                'alpha_channel' => true,
                'js_options'    => array(
                    'palettes' => array( '#125', '#459', '#78b', '#ab0', '#de3', '#f0f' )
                ),
                 'columns' => 6,
                 'hidden' => array( 'enable_read_mere_button', '!=', 1 ),
            ),
        ),
    );
    return $meta_boxes;
} );
add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
    $meta_boxes[] = array(
        'id'             => 'footer',
        'title'          => 'Footer',
        'settings_pages' => 'theme_options',
        'tab'            => 'footer',
        'fields'         => array(
          array(
              'id'        => 'enable_footer_about',
              'name'      => 'Enable About?',
              'type'      => 'switch',
              'style'     => 'rounded',
              'on_label'  => 'Yes',         
              'off_label' => 'No',
          ),
            array(
                'name' => 'Logo',
                'id'   => 'footer_logo',
                'type' => 'file_input',
                'desc' => 'Location ex: '.get_template_directory_uri().'/assets/images/logo.png',
            ),
            array(
                'name' => 'Description',
                'id'   => 'footer_decs',
                'type' => 'textarea',
            ), 
            array(
              'name' => 'Soical Link',
              'id'   => 'soical_link',
              'type' => 'group',
              'group_title' => '{#}: {social_icon}',
              'fields'  => array(
                  array(
                    'name'     => 'Soical Icon',
                    'id'       => 'social_icon',
                    'type'     => 'select',
                    'options'  => array(
                        'facebook'    => 'Facebook',
                        'twitter'    => 'Twitter',
                        'pinterest'    => 'Pinterest',
                        'youtube'    => 'Youtube',
                        'instagram'    => 'Instagram',
                        'whatsapp'    => 'Whatsapp',
                        'tumblr'    => 'Tumblr',
                        'linkedin'    => 'Linkedin',
                        'telegram'    => 'Telegram',
                        'medium'    => 'Medium',
                        'reddit'    => 'Reddit',
                    ),
                  ),
                  array(
                    'name' => 'Url',
                    'id'   => 'url',
                    'type' => 'text',
                ), 
              ),
               'default_state' => 'collapsed',
              'clone'       => true,
              'collapsible' => true,
            ),
            array(
                'name'            => 'Background color',
                'id'              => 'footer_bg',
                'type'            => 'color',                
            ),            
            array(
                'name' => 'Total widget',
                'id'   => 'total_widget',
                'type' => 'range',
                'min'  => 1,
                'max'  => 5,
                'step' => 1,
            ),
        ),
    );
    return $meta_boxes;
} );
add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
    $meta_boxes[] = array(
        'id'             => 'single',
        'title'          => 'Single Settings',
        'settings_pages' => 'theme_options',
        'tab'            => 'single',
        'fields'         => array(
             array(
                'name'    => 'Layout',
                'id'      => 'single_layout',
                'type'    => 'image_select',
                'options' => array(
                    'sidebar_left'  => 'https://i.imgur.com/Y2sxQ2R.png',
                    'sidebar_right' => 'https://i.imgur.com/h7ONxhz.png',
                    'no_sidebar'    => 'https://i.imgur.com/m7oQKvk.png',
                ),
            ),
             array(
                'name'        => 'Sidebar',
                'id'          => 'single_sidebar',
                'type'        => 'sidebar',
                'field_type'  => 'select_advanced',
                'placeholder' => 'Select a sidebar',
                'hidden' => array( 'single_layout', '=', 'no_sidebar' ),
            ),
            array(
                'name'   => 'Post Metadata display',
                'id'     => 'post_metadata',
                'type'   => 'select_advanced',
                'options' => array(
                    'author' => 'Author',
                    'comment' => 'Comment',
                    'view' => 'post view',
                    'category' => 'Category',
                    'date' => 'Data',
                    'modified' => 'Modified Date',
                ),
                'multiple'  => true,
            ),
            array(
                'name'   => 'Post share',
                'id'     => 'post_share',
                'type'   => 'group',
                'group_title' => '{#}: {social_media} {link_title}',
                'fields' => array(
                    array(
                        'name'   => 'Social media',
                        'id'     => 'social_media',
                        'type'   => 'select_advanced',
                         'options'  => array(
                            'facebook'    => 'Facebook',
                            'twitter'    => 'Twitter',
                            'pinterest'    => 'Pinterest',
                        ),
                    ),
                    array(
                        'name'   => 'Link Title',
                        'id'     => 'link_title',
                        'type'   => 'text',
                    ),
                ),
                'default_state' => 'collapsed',
                'clone'       => true,
                'collapsible' => true,
            ),
            array(
                'id'        => 'enable_author_info',
                'name'      => 'Enable Author Info?',
                'type'      => 'switch',
                'style'     => 'rounded',
                'on_label'  => 'Enable',
                'off_label' => 'Disable',
            ),
            array(
                'id'        => 'enable_ralated_post',
                'name'      => 'Enable Related Post?',
                'type'      => 'switch',
                'style'     => 'rounded',
                'on_label'  => 'Enable',
                'off_label' => 'Disable',
            ),
            array(
                'id'        => 'related_post_title',
                'name'      => 'Related Post title',
                'type'      => 'text',
                'hidden' => array( 'enable_ralated_post', '!=', 1 ),
            ),
            array(
                'name' => 'Related Post Per page',
                'id'   => 'related_post_per_page',
                'type' => 'slider',
                'js_options' => array(
                    'min'   => 3,
                    'max'   => 12,
                    'step'  => 3,
                ),
                'suffix' => ' Posts',
                'hidden' => array( 'enable_ralated_post', '!=', 1 ),
            ),
            array(
                'name'   => 'Related Metadata display',
                'id'     => 'related_post_metadata',
                'type'   => 'select_advanced',
                'options' => array(
                    'author' => 'Author',
                    'comment' => 'Comment',
                    'view' => 'post view',
                    'category' => 'Category',
                    'date' => 'Data',
                    'modified' => 'Modified Date',
                ),
                'multiple'  => true,
                'hidden' => array( 'enable_ralated_post', '!=', 1 ),
            ),
        ),
    );
    return $meta_boxes;
} );

See More:

How to Create Social Share Button in WordPress without Plugin