Create a WordPress Admin Page

Your First WordPress Admin Page

Let’s create your first admin page. In order for your users to save settings, you need a setting form and a place to display it. So you need to create an admin page first. Let’s create one. It’s really simple.

Steps to Create a WordPress Admin Page

1. Include the library
2. Extend the library class
3. Define the setUp() method
4. Define the callback methods.
5. Instantiate the extended class

Screenshot

Include the Library

First you need to include the bootstrap file of the framework. The path may be different in your environment. The file name to include is admin-page-framework.php. So make sure you set your correct path here.

Extend the Class

Next, we need to decide a class name to extend the framework abstract class. Here, as an example we use APF_CreatePage. It can be whatever you want but it should consist of alphabetical characters and underscores.

Define the setUp() Method

The setUp() method is defined by the framework internally and automatically triggered by the wp_loaded hook. In the method, we define pages, like which root menu, what sub-pages to add etc.

To get started, let’s create a page that displays simple text.

For that, we need to decide:

1. which root (top-level) menu page that the creating page belongs to.
2. the title of the page.
3. the slug (part of url) of the page.

The created page will be a sub-page of the root page you specify. Let’s use the Settings page as the root page and “1. My First Setting Page” as the page title and “my_first_settings_page.” as the page slug. We are going to use the setRootMenuPage() and addSubMenuItems() methods. The used page slug should only consist of alphabets, numbers, and underscores. Dots(.) and hyphens, dashes(-) should be avoided because the slug becomes a part of the callback method name.

Define Callbacks

Next, we define callback methods that are triggered when a certain framework element is processed internally.

Here we use the do_ + page slug method as an example. This is triggered in the middle of framework’s rendering the content of the page. There are a lot of callback methods besides it. For the other hooks and callbacks, refer to the manual.

As a side node, the method name serves as a filter/action hook name. As you add more methods, the class becomes bigger and bigger and harder to maintain. In that case, you can use the WordPress core functions, add_filter() and add_action() and define the callbacks outside the class. For the above example, the action hook name is do_my_first_settings_page, the same as the method name.

Instantiate Your Extended Class

Lastly, we instantiate the class. Unless it is instantiated, it will do nothing.

See it’s easy and simple, huh?

Code

Try the code below and post comments if you get a problem.