Settings API in Wordpress - Mini Project: Build & Apply

WordPress Settings API: Create a Simple Plugin Settings Page

📖 Scenario: You want to create a WordPress plugin that lets users save a simple setting, like a welcome message, from the admin dashboard.This setting will be stored and used later by the plugin.

🎯 Goal: Build a WordPress plugin that adds a settings page under the Settings menu. The page will have a text input for a welcome message. Users can save this message using the WordPress Settings API.

📋 What You'll Learn

Create a plugin file with the plugin header

Register a settings section and a settings field using the Settings API

Add a settings page under the Settings menu

Display and save the welcome message setting

💡 Why This Matters

🌍 Real World

Many WordPress plugins need settings pages to let users customize behavior. The Settings API is the standard way to build these pages safely and consistently.

💼 Career

Understanding the WordPress Settings API is essential for WordPress plugin developers and theme developers who want to add configurable options.

1

Create the plugin header and register the settings page

Create a PHP file with the plugin header comment. Then add a function called myplugin_add_admin_menu that uses add_options_page to add a settings page titled "My Plugin Settings" under the Settings menu. Hook this function to admin_menu.

Wordpress

<?php
// Your code here

Need a hint?

Start by writing the plugin header comment. Then create a function named myplugin_add_admin_menu that calls add_options_page with the page title "My Plugin Settings" and menu title "My Plugin". Hook this function to the admin_menu action.

2

Register the setting and add a settings section and field

Create a function called myplugin_settings_init. Inside it, register a setting named myplugin_options using register_setting. Then add a settings section with ID myplugin_section and title "Settings" using add_settings_section. Finally, add a settings field with ID myplugin_welcome_message, label "Welcome Message", and a callback function myplugin_welcome_message_render using add_settings_field. Hook myplugin_settings_init to admin_init.

Wordpress

<?php
/**
 * Plugin Name: My Plugin
 * Description: A simple plugin to demonstrate the Settings API.
 * Version: 1.0
 * Author: Your Name
 */

function myplugin_add_admin_menu() {
    add_options_page(
        'My Plugin Settings',
        'My Plugin',
        'manage_options',
        'myplugin',
        'myplugin_options_page'
    );
}
add_action('admin_menu', 'myplugin_add_admin_menu');

// Register settings, section, and field
function myplugin_settings_init() {
    // Your code here
}
add_action('admin_init', 'myplugin_settings_init');

Need a hint?

Inside myplugin_settings_init, call register_setting with group 'myplugin' and option name 'myplugin_options'. Then add a section with ID 'myplugin_section' and title "Settings". Finally, add a field with ID 'myplugin_welcome_message', label "Welcome Message", and callback myplugin_welcome_message_render. Hook this function to admin_init.

3

Create the callback to render the welcome message input

Create a function called myplugin_welcome_message_render. Inside it, get the saved options using get_option('myplugin_options'). Then output an HTML input of type text with name myplugin_options[welcome_message] and value set to the saved welcome message or empty string if none.

Wordpress

<?php
// Your code here

Need a hint?

Define myplugin_welcome_message_render to get the saved options with get_option('myplugin_options'). Then output an input box with name myplugin_options[welcome_message] and value set safely using esc_attr.

4

Create the settings page form to display and save options

Create a function called myplugin_options_page. Inside it, output a form with method post and action set to options.php. Call settings_fields('myplugin'), do_settings_sections('myplugin'), and add a submit button with text "Save Settings". This form will display the settings fields and save the options.

Wordpress

<?php
// Your code here

Need a hint?

Define myplugin_options_page to output a form with action="options.php" and method="post". Inside the form, call settings_fields('myplugin'), do_settings_sections('myplugin'), and add a submit button with submit_button('Save Settings').