How to create a WordPress options page

by

The first thing that jumps out at me is your use of register_setting():

register_setting( 'bang-options-group', 'joinform_api_url' );

It is missing a critical, third argument: the sanitization callback. While this parameter programmatically is optional, without it, you cannot validate/sanitize/whitelist the data values passed to the DB via your settings form.

Looking further at your code, you seem to be misusing all of the parameters passed to register_setting( $group, $option, $callback ):
* $group: an options group name; fairly arbitrary, but must be unique
* $option: the name of the option as it exists in the DB table
* $callback: sanitization callback

As you’re calling it, you’re telling WordPress that your option name is joinform_api_url, which is itself actually a callback of some sort.

The next problem I see is with your use of do_settings_sections():

do_settings_sections( 'bang_section');

The correct parameter for this function is the $page parameter of your call to add_settings_section( $id, $title, $callback, $page ):

add_settings_section( 'bang_section', 'Joinform configuration', null, 'section_options_page_type' );

As you can see, you’re passing the $id parameter, rather than the $page parameter, to do_settings_sections().

Also, you’re passing null for the section callback parameter. Why?

I completely understand how difficult it can be to keep the function parameter correlation straight among all of the Settings API-related functions. As part of my Settings API tutorial, I included a section to help keep track of this correlation. It may be helpful as you step through your implementation.

Finally: I would recommend putting this together one step at a time, rather than trying to cobble it all together, and then trying to troubleshoot. That way, you find out at each step where any potential problem exists, and can resolve it before that problem compounds itself with each additional step.

  1. Add settings page to menu
  2. Define settings page callback
  3. Register setting
  4. Add settings sections
  5. Add settings fields
  6. Define settings sections callbacks
  7. Define settings fields callbacks
  8. Add sanitization callback

Step through each, one at a time, paying attention to the function-parameter correlation at each step. Ensure that you get expected output before moving to the next step.

Usually, once you’ve gotten a working example one time using this method, it just “clicks”. But is can be incredibly confusing/daunting until you do.