Create Option/ Setting Page In WordPress

Create an options page in WordPress, you can do so by using the WordPress admin settings API. This allows you to build a custom settings page where users can configure different options. Here's a step-by-step guide to create a basic options page in a WordPress plugin or theme's functions.php file.

Register Setting API

function register_my_cool_plugin_settings(){    
    register_setting('my-cool-plugin-settings-group', 'setting_telephone');
    register_setting('my-cool-plugin-settings-group', 'setting_email');
    register_setting('my-cool-plugin-settings-group', 'setting_location');    
}

add_action( 'admin_init', 'register_my_cool_plugin_settings' );        

Add Menu Page and callback function for Setting/ Option page layout

function add_setting_page(){
    add_menu_page(
        'Setting',
        'Website Setting',
        'manage_options',
        'website-setting',
        'my_settings_page',
        'dashicons-admin-generic',
        3,
    );
        
}
add_action('admin_menu', 'add_setting_page');        

Create Form with Callback function and Store Value in Setting API Fields

function my_settings_page(){

        $telephone = get_option('setting_telephone');
        $email = get_option('setting_email');
        $location = get_option('setting_location');
 
    <section id="optionPageWordPress">
        
        <div><h3>Website Setting</h3></div>
        
        <form method="post" action="options.php" >
           
         <?php $prefix = 'setting_'; ?>
            
            <?php settings_fields('my-cool-plugin-settings-group');?>
            <?php do_settings_sections('my-cool-plugin-settings-group');?>
        
                <div class="optionPageField">
                    <label>Telephone Number :</label>
                    <input type="text" id="telephone" name="<?php echo $prefix; ?>telephone" placeholder="Enter Website Telephone Number" value="<?php echo $telephone; ?>" />
                </div>

                 <div class="optionPageField">
                    <label>Email Address :</label>
                    <input type="text" id="email"  value="<?php echo $email; ?>" name="<?php echo $prefix; ?>email" placeholder="Enter Website Email" />
                </div>

                 <div class="optionPageField">
                    <label>Location Address :</label>
                    <input type="text" id="location"  value="<?php echo $location; ?>" name="<?php echo $prefix; ?>location" placeholder="Enter Location Address" />
                </div>

                <div class="optionPageField">
                    <?php submit_button('Save'); ?>
                </div>
        
        </form>
        
    </section>

<?php }

/* create a option page */

?>        

How to use Option/ Setting Page Values in PHP

$telephone = get_option('setting_telephone');
$email = get_option('setting_email');
$location = get_option('setting_location');        

Form Style CSS

    <style type="text/css">
        .optionPageField{ margin-bottom: 0.25rem; }
        #optionPageWordPress .optionPageField{ display: flex; margin-top: 1rem;  }
        #optionPageWordPress .optionPageField label{ flex-basis: 25%; font-weight: bold; }
        #optionPageWordPress .optionPageField input{ flex-basis: 65%; width: 100%; padding: 0.25rem 0.5rem; font-size: 1rem; font-weight: 500;    }
    </style>