Creating a WordPress Plugin Admin Page

If you are building a WordPress plugin, there is a high chance that you want to create a backend page, perhaps a place for Admin settings or options. This post will cover how to do that and I will also build a WP Plugin which has an Admin page that interacts with the WordPress database. The plugin will render a mySQL table in a HTML table with dynamic JavaScript features like sorting, searching, etc. I will show how to include specific JavaScript and CSS files for the plugin Admin page and how to interact with WordPress mySQL tables. The cool think about a plugin admin page is that you can use it test all kinds of WordPress Database queries.

I have covered building WordPress plugin with database queries before but previously, my plugin did not require a special plugin page in the Administration section. Since this is a common use case, I wanted to go through these steps while making a sample WP plugin that explores the users you have saved in your blog. Our plugin will simply grab the wp_users mySQL table and dump it into the plugin page with HTML table markup. I will include special JS and CSS files, a jQuery table plugin, to give the table some rich features.

First lets start with some error debugging. When WordPress plugins fail or have errors, you often do not have visibility into the problem. The following function can be used to grab any plugin activation errors and send them to a file in your plugins folder:

Now, there are a few options when making a WordPress Plugin page. First, you need to decide where to put the link to the page. It could be a top level menu link like Posts, Media, Appearance, etc or it could go under an already created menu like Settings. Next, I could make the page using a function in our main plugin file or I could use a separate PHP file. Here’s how you make a sub-menu link to a page that is rendered using a function:

While this is really simple, I will be loading custom JS, CSS, and querying the database on our backend page so I prefer to actually use a separate PHP file. Also, I am not using this page for plugin settings or options so I prefer to have a top level menu link. Here is how to do that:

As you can see, I am using a adminpage.php file inside our plugin folder to render the page. The second function takes care of loading the JavaScript and style sheets for our page using the admin_enqueue_scripts action. I first made a conditional to make sure that the JS and CSS files are only loaded on our page. The CSS is loaded using wp_enqueue_style and JS is loaded using wp_enqueue_script with jQuery as the third parameter, which tells WordPress to load jQuery for JavaScript file. This is needed as I will use the jQuery dataTables plugin so I don’t want to load another version of jQuery on the page.

Now, lets open the adminpage.php file and query the database table for wp_users. I loop through each items and render the results around HTML table markup. Then I run some JavaScript to enable dataTables on the rendered table. Now I can explore all the users, sort by each column, filter, and search. Here is the code:

Here is the WordPress Plugin: WP Database Explorer.

External:

Build an Option Panel for your WordPress Plugin
Building your first WordPress plugin
WordPress Settings API Tutorial