Make Custom Theme Option using WordPress Theme API

In this article, we’ll learn how to use the WordPress Settings API, and create a WordPress administration page where we demonstrate the use of this API.

WordPress Settings API

The WordPress Settings API was added in WordPress 2.7 and is one of the most popular WordPress APIs. The Settings API allows admin pages to have fields for customizing the way the WordPress theme works. The Settings API is a set of functions to support adding Custom Menus, WordPress Theme options and other Option Pages for themes. These also include API for saving, validating, and retrieving values from user input. Theme developers can use the API to add more powerful and interactive options to their themes

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

codepopular

Hi, My name is Shamim. I am a freelance PHP developer in Bangladesh. I have been working as a freelance developer since 2014. I am a passionate and creative web development person. As a senior level, I focus on your requirements in detail and deliver high-quality work on your budget.