How to Add Settings Section in WordPress Default Settings

Additional-Reading-Settings

It’s very easy to create settings page in WordPress. But sometimes in our plugin we only need a single/few options. And creating dedicated settings page just for this option is overkill.

That’s what I think when I write “f(x) Private Site” Plugin yesterday. You can download the plugin for a full code example:

When it make sense, we can add settings to WordPress default settings page such as “General Settings”, Writing Settings”, “Reading Settings”, etc. And this is how to do that.

WordPress Default Settings

WordPress currently have 6 default settings pages. And each have settings page ID (slug?), here’s the list:

  1. General Settings: “general”
  2. Writing Settings: “writing”
  3. Reading Settings: “reading”
  4. Discussion Settings: “discussion”
  5. Media Settings: “media”
  6. Permalink Settings: “permalink”

You can extend each settings page and add your own option/settings there. WordPress also use the same option group for each settings page.

NOTE: I can’t seem to save settings in “Permalink” page. Maybe there’s a bug in WP, maybe Permalink Settings page need a different treatment.

In this tutorial we will create an additional settings in “Reading Settings” Page, but you can easily implement this to other settings page. The option we are going to add  is just a simple check-box.

Step By Step

#1. Register Setting

This is how we register options. So WordPress can white-list it and save the options, etc.

/* Admin init */
add_action( 'admin_init', 'my_settings_init' );

/* Settings Init */
function my_settings_init(){

    /* Register Settings */
    register_setting(
        'reading',             // Options group
        'my-option-name',      // Option name/database
        'my_settings_sanitize' // Sanitize callback function
    );
}

/* Sanitize Callback Function */
function my_settings_sanitize( $input ){
    return isset( $input ) ? true : false;
}

WP register_setting() function takes 3 parameter

Options Group

Because we add settings in “Reading Settings” we use “reading” in the option group parameter. If you put it in other settings page, use the “WordPress Default Settings” list above.

Option Name

This is the database name where we save our option. In the example above we use my-option-name so to get the option (for example in template) we can use:

<?php echo get_option( 'my-option-name' ); ?>

Sanitize Callback Function

This is the function to make sure we save the right type of data. Because this option is a check-box. We simply need to save it as boolean data (true or false).

#2. Add Setting Section

Now after the register_setting() function complete, we now can add a settings section in our preferred settings page. To do this we can use add_settings_section() function, and we need to add hook them to admin_init hook, just like register_setting() function.

/* Create settings section */
add_settings_section(
    'my-section-id',                   // Section ID
    'My Additional Reading Settings',  // Section title
    'my_settings_section_description', // Section callback function
    'reading'                          // Settings page slug
);

/* Setting Section Description */
function my_settings_section_description(){
    echo wpautop( "This aren't the Settings you're looking for. Move along." );
}

Section ID

To create a section you need to create it with an ID.

Section Title

This is the section title

Section Callback Function

This is callback function for that settings. You can actually put the input field, etc in that function, and it could be a little but faster to code. But because we are going to “do it right” we will use this function only to add description.

If you do not want any description you can simply change the parameter to __return_false.

Settings Page (Slug)

Because we add this in “Reading Settings” we use “reading” in the parameter.

#3. Add Settings Field

Now we actually going to add the option input in the section.

/* Create settings field */
add_settings_field(
    'my-settings-field-id',       // Field ID
    'Droid Identification',       // Field title 
    'my_settings_field_callback', // Field callback function
    'reading',                    // Settings page slug
    'my-section-id'               // Section ID
);

/* Settings Field Callback */
function my_settings_field_callback(){
    ?>
    <label for="droid-identification">
        <input id="droid-identification" type="checkbox" value="1" name="my-option-name" <?php checked( get_option( 'my-option-name', true ) ); ?>> "You don't need to see Identification."
    </label>
    <?php
}

Field ID

To create a option field you need to create it with an ID.

Field Title

The title of the field.

Field Callback Function

This is the callback function where we add out input HTML.

Settings Page Slug

Just like in add_settings_section() function, because we add this in “Reading Settings” we use “reading” in the parameter.

Section ID

This is the section ID where we want this field to appear. This is the ID we assign in add_settings_section() function.

And that’s it. Super Simple ! 😉

Full Code

Here’s the full code:

/* Admin init */
add_action( 'admin_init', 'my_settings_init' );

/* Settings Init */
function my_settings_init(){

    /* Register Settings */
    register_setting(
        'reading',             // Options group
        'my-option-name',      // Option name/database
        'my_settings_sanitize' // sanitize callback function
    );

    /* Create settings section */
    add_settings_section(
        'my-section-id',                   // Section ID
        'My Additional Reading Settings',  // Section title
        'my_settings_section_description', // Section callback function
        'reading'                          // Settings page slug
    );

    /* Create settings field */
    add_settings_field(
        'my-settings-field-id',       // Field ID
        'Droid Identification',       // Field title 
        'my_settings_field_callback', // Field callback function
        'reading',                    // Settings page slug
        'my-section-id'               // Section ID
    );
}

/* Sanitize Callback Function */
function my_settings_sanitize( $input ){
    return isset( $input ) ? true : false;
}

/* Setting Section Description */
function my_settings_section_description(){
    echo wpautop( "This aren't the Settings you're looking for. Move along." );
}

/* Settings Field Callback */
function my_settings_field_callback(){
    ?>
    <label for="droid-identification">
        <input id="droid-identification" type="checkbox" value="1" name="my-option-name" <?php checked( get_option( 'my-option-name', true ) ); ?>> "You don't need to see Identification."
    </label>
    <?php
}

So, if you just need a simple settings, don’t get fancy and use bulky framework to create Settings. Because WordPress Settings API is awesome.

  • Super easy to code.
  • Other dev can extend it, everyone knows how to use it.
  • Streamlined development workflow.
  • Great user experience.

Leave a Reply

Your email address will not be published. Required fields are marked *