Andy Tran

Add Custom Theme Customize Options

by | Sep 6, 2021 | Wordpress

One of the most important usages of WordPress customization settings is to add custom theme customize Options Page. Almost every plugin has custom setting pages, which allows developers to have an options page for their plugin. Some plugins like Akismet ask for integration codes and others have the option to enable or disable their features. WooCommerce has several options to customize shop, and all of them are implemented using Settings API.

We can create our own custom Theme Option Page settings. In this options page, we will create custom options panels in WordPress. If we follow the options page structure WordPress will automatically handle all of the option creation, update, saving, and redirection for you.

 

Benefits of Custom Theme Options Settings

  • Robustness for Website
  • Compatibility with WordPress Core
  • Ease of Use for different users

 

Setup Custom Post Type

If you are unfamiliar with how to set up custom post types, check out
Create Custom Post Type in WordPress Without Plugin
Add Sub Menu in Custom Post Type & Add Meta Box in Custom Post Type

Now, We Add Custom Settings Options For That.


       /*Custom Theme Customize Options For Coupon (General Options) */
       function custom_theme_panel_settings($wp_customize){
    $wp_customize->add_section("custom_theme_section_area",array(
        "title" => "Coupon General Settings"
    ));

    $wp_customize->add_setting("custom_theme_bgcolor_setting");
    
    $wp_customize->add_control(new WP_Customize_Color_Control(
        $wp_customize,
        "bg_color",
        array(
            "label" => "Coupon Code Background Color",
            "section" => "custom_theme_section_area",
            "settings" => "custom_theme_bgcolor_setting"
        )
    ));

    $wp_customize->add_setting("custom_theme_tcolor_setting");

    $wp_customize->add_control(new WP_Customize_Color_Control(
        $wp_customize,
        "t_color",
        array(
            "label" => "Coupon Code Text Color",
            "section" => "custom_theme_section_area",
            "settings" => "custom_theme_tcolor_setting"
        )
    ));

    
    $wp_customize->add_setting("custom_theme_fontfamily_setting",array(
        "default" => "Arial"
    ));
    
    $wp_customize->add_control("custom_theme_fontfamily_control",array(
        "section" => "custom_theme_section_area",
        "settings" => "custom_theme_fontfamily_setting",
        "type" => "select", 
        "label" => "Coupon Heading Font Family",
        "choices"=>array(
                'arial'     => 'Arial',
                'arialb'  => 'Arial Black',
                'comic-sans' => 'Comic Sans MS',
                'tnr'     => 'Times New Roman',
                'times'     => 'Times',
                'couriern'   => 'Courier New',
                'courier'   => 'Courier',
                'verdana'   => 'Verdana',
                'georgia'   => 'Georgia',
                'palatino'   => 'Palatino'
        )
    ));
    }
add_action("customize_register","custom_theme_panel_settings");

Now, Go to Appearance -> Customize and You can show your Theme Customizer setting.
add custom theme customize options

Add Offer Configuration Menu.


add_action( 'admin_init', 'Offer_settings_init' );

function Offer_add_admin_menu(  ) { 

    add_options_page( 'Offer Configuration', 'Offer Configuration', 'manage_options', 'offer_configuration', 'Offer_options_page' );

}

AddOffer Configuration Settings


function Offer_settings_init(  ) { 
    register_setting( 'offerPage', 'Offer_settings' );

    add_settings_section(
        'Offer_offerPage_section', 
        __( 'Select Offer Configuration Options', 'offer' ), 
        'Offer_settings_section_callback', 
        'offerPage'
    );

    add_settings_field( 
        'Offer_select_field_0', 
        __( 'Enable', 'offer' ), 
        'Offer_select_field_0_render', 
        'offerPage', 
        'Offer_offerPage_section' 
    );

    add_settings_field( 
        'Offer_select_field_1', 
        __( 'Show Verification Badge', 'offer' ), 
        'Offer_select_field_1_render', 
        'offerPage', 
        'Offer_offerPage_section' 
    );

    add_settings_field( 
        'Offer_select_field_2', 
        __( 'Show Start Date', 'offer' ), 
        'Offer_select_field_2_render', 
        'offerPage', 
        'Offer_offerPage_section' 
    );

    add_settings_field( 
        'Offer_select_field_3', 
        __( 'Show End Date', 'offer' ), 
        'Offer_select_field_3_render', 
        'offerPage', 
        'Offer_offerPage_section' 
    );

    add_settings_field( 
        'Offer_select_field_4', 
        __( 'Enable Social Media', 'offer' ), 
        'Offer_select_field_4_render', 
        'offerPage', 
        'Offer_offerPage_section' 
    );

}


function Offer_select_field_0_render(  ) { 

    $options = get_option( 'Offer_settings' );
    ?>
    <select name='Offer_settings[Offer_select_field_0]' style="width: 300px;">
        <option value='1' <?php selected( $options['Offer_select_field_0'], 1 ); ?>>YES</option>
        <option value='2' <?php selected( $options['Offer_select_field_0'], 2 ); ?>>NO</option>
    </select>

<?php
}


function Offer_select_field_1_render(  ) { 

    $options = get_option( 'Offer_settings' );
    ?>
    <select name='Offer_settings[Offer_select_field_0]' style="width: 300px;">
        <option value='1' <?php selected( $options['Offer_select_field_1'], 1 ); ?>>YES</option>
        <option value='2' <?php selected( $options['Offer_select_field_1'], 2 ); ?>>NO</option>
    </select>

<?php
}

function Offer_select_field_2_render(  ) { 

    $options = get_option( 'Offer_settings' );
   $options = get_option( 'Offer_settings' );
    ?>
    <select name='Offer_settings[Offer_select_field_0]' style="width: 300px;">
        <option value='1' <?php selected( $options['Offer_select_field_2'], 1 ); ?>>YES</option>
        <option value='2' <?php selected( $options['Offer_select_field_2'], 2 ); ?>>NO</option>
    </select>

<?php
}


function Offer_select_field_3_render(  ) { 

    $options = get_option( 'Offer_settings' );
   $options = get_option( 'Offer_settings' );
    ?>
    <select name='Offer_settings[Offer_select_field_0]' style="width: 300px;">
        <option value='1' <?php selected( $options['Offer_select_field_3'], 1 ); ?>>YES</option>
        <option value='2' <?php selected( $options['Offer_select_field_3'], 2 ); ?>>NO</option>
    </select>

<?php
}

function Offer_select_field_4_render(  ) { 

    $options = get_option( 'Offer_settings' );
    $options = get_option( 'Offer_settings' );
    ?>
    <select name='Offer_settings[Offer_select_field_0]' style="width: 300px;">
        <option value='1' <?php selected( $options['Offer_select_field_4'], 1 ); ?>>YES</option>
        <option value='2' <?php selected( $options['Offer_select_field_4'], 2 ); ?>>NO</option>
    </select>

<?php
}


function Offer_settings_section_callback(  ) { 
    echo __( 'Do Start Offer Configuration', 'offer' );
}


function Offer_options_page(  ) { 
        ?gt;
        <form action='options.php' method='post'>

            <h1>Offer Configuration</h1>

            <?php
            settings_fields( 'offerPage' );
            do_settings_sections( 'offerPage' );
            submit_button();
            ?>

        </form>
        <?php
}

We were added sub menu for custom post type.
At that time we added couponconfiguration() function. Now, We Modify That Function and Enable Offer Configuration Options.


function couponconfiguration(){
    ?>
        <form action='options.php' method='post'>

            <h1>Offer Configuration</h1>

            <?php
            settings_fields( 'offerPage' );
            do_settings_sections( 'offerPage' );
            submit_button();
            ?>

        </form>
        <?php
    return;
}

Now, Go to Coupon -> Coupon Configuration
And You Can Display Coupon Configuration Settings.

add custom theme customize options

In the same way, you should add Deal Configuration Settings.

To Continue Learning,
you can refer our blogpost Add Custom Social Media Sharing without plugin