WordPress ‘Settings API’: A simple visual example

A simple short visual example on what is required to use WordPress 4.1’s “Settings API”.

As the WordPress Settings API requires a number of inter-woven variables to tie it all together, this interactive example is intended to quickly demonstrate which variables go where.

Below is a small plugin that adds a Top-Level menu item, with a corresponding settings page. Although it is simple, it demonstrates 5 major elements.

  • Creating a Menu item
  • Creating a Setting group
  • Creating a Section group within a Setting group
  • Creating a Field element within a Section group
  • Displaying all the elements

Move the mouse over a variable name to highlight all the locations where that variable is required. Move off to deselect the variable.
Click on a variable name to keep the variable locations highlighted. Click anywhere else, or mouse over another variable to deselect the elements. (To view code on a separate page, click here.)

Once the plugin is activated, it should look like this:

A quick reference what the WordPress Settings API demo plugin should look like.

A quick reference what the WordPress Settings API demo plugin should look like.

This is far from an all-inclusive tutorial on WordPress’s Settings API, but hopefully, it presents the required parameters in a more visual and easy to follow layout.

If this tutorial helped you, you can follow us on Facebook or Twitter to keep an eye out for more tutorials.

Posted in WordPress Tagged with: , , , , , , ,

Leave a Reply

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

*