WordPress Settings API For Make a best Custom Theme Option

In this article, we’ll explore how to use the WordPress Settings API and create a WordPress administration page to demonstrate its functionality. This API makes it easier for developers to add customizable options and interactive features to their themes or plugins.

What is the WordPress Settings API?

The WordPress Settings API was introduced in WordPress 2.7 and has since become one of the most widely used APIs in WordPress development. It allows developers to create admin pages with custom fields, making it simple to customize the way WordPress themes and plugins function.

With the Settings API, you can:

• Add custom menus and submenus in the WordPress admin dashboard.
• Create theme options and other option pages for plugins or themes.
• Save, validate, and sanitize user input securely.
• Retrieve stored values for dynamic functionality in your theme or plugin.

By leveraging the WordPress Settings API, theme and plugin developers can create more powerful, flexible, and interactive options for end users, while maintaining a consistent and secure admin interface.

Benefits of the Settings API

Settings API care of some security issues and a few other things for you. A developer could ignore this API and write their own settings page without it. That begs the question, what benefit does this API bring to the table? Following is a quick rundown of some of the benefits. Relative to creating options pages yourself—and, if you’re foolish, risking things like failing to validate your inputs—the Settings API packages everything together neatly and completely. It’s the Right Way to do admin options in WordPress

It is Providing 3 Major Thing for You

• Handling Form Submissions – Let WordPress handle retrieving and storing your $_POST submissions.
• Include Security Measures – You get extra security measures such as nonce, etc. for free.
• Sanitizing Data – You get access to the same methods that the rest of WordPress uses for ensuring strings are safe to use.

Creating the Plugin

We will introduced try to lean Settings Api by making a WordPress Plugin. flow the below process

• Create a folder inside the plugin directory
• Create a file with .php extension like codepopular-settings-api.php
• Edit the php file any text editor

Creating the Admin Page

After Edit the codepopular-settings-api.php file just writes now the plugins header.

<?php
/**
 * Plugin Name:     CodePopular Settings Api
 * Plugin URI:      PLUGIN SITE HERE
 * Description:     PLUGIN DESCRIPTION HERE
 * Author:          YOUR NAME HERE
 * Author URI:      YOUR SITE HERE
 * Text Domain:     WordPress
 * Domain Path:     /languages
 * Version:         1.0.0
 *
 * @package         CodePopular_Settings_Api
 */

Create Theme Option Page

To create a theme options page you have to register an admin menu page

add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );

We will add Flowing Code In Plugin File.

add_action( 'admin_menu', 'settings_api_admin_menu_callback' );
function settings_api_admin_menu_callback(  ) {
    add_menu_page( 'CodePopular Theme Option', 'Theme Option', 'manage_options', 'theme-option', 'theme_option_callback');
}

After we’ve saved the file (presuming we activated our plugin), we’ll open our administration dashboard, and we’ll find our Theme Option in Administrator Menu.

3 Point We have to Remind

• Settings are combinations of the fields and sections and are registered in the database. You need to register the setting after defining both Fields and Sections.

register_setting( string $option_group, string $option_name, array $args = array() )

• Section is a collection of fields. There should be at least one field in every section on a page. You can add new sections to existing settings pages or create a whole new settings page.

add_settings_section( string $id, string $title, callable $callback, string $page )

• Fields are the individual settings that you want to provide users with control to modify the values.

add_settings_field( string $id, string $title, callable $callback, string $page, string $section = 'default', array $args = array()

do_settings_sections() outputs all the sections, with their respective fields, registered for a specific $page

Example Code

<?php
/**
 * Plugin Name:     CodePopular Settings Api
 * Plugin URI:      PLUGIN SITE HERE
 * Description:     PLUGIN DESCRIPTION HERE
 * Author:          YOUR NAME HERE
 * Author URI:      YOUR SITE HERE
 * Text Domain:     WordPress
 * Domain Path:     /languages
 * Version:         1.0.0
 *
 * @package         CodePopular_Settings_Api
 */
add_action( 'admin_menu', 'settings_api_admin_menu_callback' );
add_action( 'admin_init', 'settings_api_init_callback' );
function settings_api_admin_menu_callback(  ) {
    add_menu_page( 'CodePopular Theme Option', 'Theme Option', 'manage_options', 'theme-option', 'theme_option_callback');
}
function settings_api_init_callback(  ) {
    register_setting( 'option_group', 'option_group_name' );
    add_settings_section(
        'stp_api_section',
        __( 'Our Section Title', 'wordpress' ),
        'settings_api_section_callback',
        'option_group'
    );
    add_settings_field(
        'stp_api_text_field_0',
        __( 'Our Field 0 Title', 'wordpress' ),
        'settings_api_field_0_callback',
        'option_group',
        'stp_api_section'
    );
    add_settings_field(
        'stp_api_select_field_1',
        __( 'Our Field 1 Title', 'wordpress' ),
        'settings_api_field_1_callback',
        'option_group',
        'stp_api_section'
    );
}
function settings_api_field_0_callback(  ) {
    $options = get_option( 'option_group_name' );
    ?>
    <input type='text' name='option_group_name[stp_api_text_field_0]' value='<?php echo $options['stp_api_text_field_0']; ?>'>
    <?php
}
function settings_api_field_1_callback(  ) {
    $options = get_option( 'option_group_name' );
    ?>
    <select name='option_group_name[choose_option]'>
        <option value='1' <?php selected( $options['choose_option'], 1 ); ?>>Male</option>
        <option value='2' <?php selected( $options['choose_option'], 2 ); ?>>Female</option>
    </select>
<?php
}
function settings_api_section_callback(  ) {
    echo __( 'This Section Description', 'wordpress' );
}
function theme_option_callback(  ) {
    settings_errors();
    ?>
    <form action='options.php' method='post'>
        <h2>CodePopular Theme Option Using Settings API</h2>
        <?php
        settings_fields( 'option_group' );
        do_settings_sections( 'option_group' );
        submit_button();
        ?>
    </form>
    <?php
}

Do you have Query? Feel free ask here without any hesitation