WordPress Settings API: Multiple Sections On Same Page

This tutorial will show you how to add multiple sections on the same page using the Settings API.

NOTE: if what you need is multiple forms on the same page, then read my other article Multiple forms on the same settings page

We will add a sub menu page to the Settings menu using add_options_page but this will also work for other kind of menus.

I will not go through each function of the Settings API, as there are enough tutorials out there about this already. Instead, I’ll go straight to the point to add multiple sections on the same page.

Let’s start by adding a single section on our settings page. The plugin will be called “Test Plugin”, and we will create a setting called “Some Setting” that the user will be able to configure. Below is the code and a print screen of the settings page with single section.

Your settings page should now look like this:

Settings API single section
Settings page with single section

test-plugin is the slug of the settings page which we specified in add_options_page() function.

Slug of the settings page
Slug of the settings page

Adding Multiple Sections

Let’s now figure out how we can add multiple sections on the same page. In addition to our section called “Main Settings”, let’s add a second section called “Additional Settings” containing a field called “Another Setting” that the user will be able to configure.

Basically all we have to do, is adding a new section, a new field and register a new option name in the same option group.

Below is the modified register_settings() function:

This is how our page with multiple sections will look like:

Settings API multiple sections
Settings page with multiple sections

And here is the full code of the settings page:

Below you will find a RAR file containing three plugins that you can paste to your plugins directory, demonstrating a settings page containing:

  1. a single section
  2. multiple sections
  3. multiple forms

Activate the plugins and have a look under the Settings menu.


Post a Comment