Adding a Settings Page to Your WordPress Plugin

Posted on 19th June 2023

Adding a Settings Page to Your WordPress Plugin

If you’re developing a WordPress plugin, chances are you’ll need to add a settings page at some point. This is a tutorial on how to do just that.

First, you need to register your settings. You can do this by adding the following code to your plugin file:

function myplugin_register_settings() {
register_setting( ‘myplugin_options’, ‘myplugin_option’, ‘myplugin_callback’ );
}
add_action( ‘admin_init’, ‘myplugin_register_settings’ );

This code will register a new setting, with the name “myplugin_option”, under the “myplugin_options” group. The “myplugin_callback” function is a callback that will sanitize and validate your settings before they’re saved to the database.

Next, you need to add a settings page. You can do this by adding the following code to your plugin file:

function myplugin_settings_page() {
echo ‘

‘;
}

function myplugin_add_menu_item() {
add_options_page( ‘My Plugin Settings’, ‘My Plugin’, ‘manage_options’, ‘myplugin’, ‘myplugin_settings_page’ );
}
add_action( ‘admin_menu’, ‘myplugin_add_menu_item’ );

This code will add a new menu item under the “Settings” menu in the WordPress admin area. Clicking on this menu item will take the user to the settings page, which will display a form where the user can enter their settings.

Finally, you need to add some CSS to style your settings page. You can do this by adding the following code to your plugin file:

function myplugin_admin_scripts() {
wp_enqueue_style( ‘myplugin-admin-css’, plugins_url( ‘myplugin/admin.css’ ) );
}
add_action( ‘admin_enqueue_scripts’, ‘myplugin_admin_scripts’ );

This code will load a CSS file called “admin.css” from your plugin’s “myplugin” folder. You can use this CSS file to style your settings page.

That’s all there is to adding a settings page to your WordPress plugin!

Creating a settings page for your WordPress plugin is a great way to provide more control to your users. Not only does it give them the ability to change the behavior of your plugin, but it also allows them to customize its appearance.

Adding a settings page to your plugin is a two-step process: first, you need to create the settings page itself, and then you need to add the code that will save the settings to the database.

Creating the Settings Page

The first step is to create the settings page. This can be done by creating a new file in your plugin’s directory, and then adding the following code to it:

This code does a few things:

First, it adds a new top-level menu item to the WordPress admin menu called “My Plugin”.

Next, it defines a function called “myplugin_render_settings_page” which is used to output the HTML for the settings page.

Finally, it calls the “add_action” function to hook into the “admin_menu” action, which tells WordPress to run the “myplugin_add_settings_page” function when the admin menu is being rendered.

Adding the Settings Fields

The next step is to add the settings fields to the settings page. This can be done by adding the following code to your plugin:

<?php

// Register the settings

function myplugin_register_settings() {

register_setting(

'myplugin_settings', // Group

'myplugin_settings', // Name

'myplugin_sanitize_settings' // Sanitize callback

);

// Add the "General" section

add_settings_section(

'myplugin_section_general', // ID

'General Settings', // Title

'myplugin_render_section_general', // Callback

'myplugin-settings' // Page

);

// Add the "Advanced" section

add_settings_section(

'myplugin_section_advanced', // ID

'Advanced Settings', // Title

'myplugin_render_section_advanced', // Callback

'myplugin-settings' // Page

);

// Add the "General" settings field

add_settings_field(

'myplugin_field_setting1', // ID

'Setting 1', // Title

'myplugin_render_field_setting1', // Callback

'myplugin-settings', // Page

'myplugin_section_general' // Section

);

// Add the "Advanced" settings field

add_settings_field(

'myplugin_field_setting2', // ID

'Setting 2', // Title

'myplugin_render_field_setting2', // Callback

'myplugin-settings', // Page

'myplugin_section_advanced' // Section

);

}

add_action( 'admin_init', 'myplugin_register_settings' );

// Render the "General" settings section

function myplugin_render_section_general() {

// Section description

echo '

These settings control the general behavior of the plugin.

‘;

}

// Render the “Advanced” settings section

function myplugin_render_section_advanced() {

// Section description

echo ‘

These settings are for advanced users only.

‘;

}

// Render the “Setting 1″ field

function myplugin_render_field_setting1() {

// Get the value of the setting we’ve registered with register_setting()

$setting = get_option( ‘myplugin_settings’ );

// Output the field

?>

<input type="text" name="myplugin_settings[setting1]" value="”>

<input type="text" name="myplugin_settings[setting2]" value="”>

This code does a few things:

First, it calls the “register_setting” function to register a new setting called “myplugin_settings” with the “myplugin_sanitize_settings” callback function.

Next, it calls the “add_settings_section” function twice to add two new sections to the settings page, “General Settings” and “Advanced Settings”.

Finally, it calls the “add_settings_field” function twice to add two new fields to the settings page, “Setting 1” and “Setting 2”.

Adding the Sanitization Callback

The last step is to add the sanitization callback function. This function is used to sanitize the data before it is saved to the database.

This code sanitizes the “setting1” and “setting2” settings before they are saved to the database.

Conclusion

Creating a settings page for your WordPress plugin is a great way to give your users more control over its behavior. By following the steps in this article, you can easily add a settings page to your plugin.