In this tutorial, we will discuss the finer points of how to create a custom admin page. We are creating an easy-to-use admin page for less advanced users who more than likely will only be adding or editing posts and pages from their WordPress admin area. These are the type of users that hire professionals to do the more complex work. Therefore, the normal user interface will remain in place for those professionals to do their job as well. The new easy-to-use admin area will be for your clients to use without getting confused by all of the other non-essential options in the stock WordPress admin area. You will learn how to use the wp_add_dashboard_widget function and the WP_Query class. You will also learn how to make widgets for your client’s admin page that will allow them to edit or view both pages and posts.
Before Creating a Custom Page
The recommended prerequisites to this tutorial include reading the previous tutorial entitled, “Creating a WordPress Admin Page Plugin” and basic knowledge of HTML, PHP, CSS and WordPress. For those of you reading this who already know how to get to the point where you are coding the PHP code directly into the WordPress file system, you may be able to skip tutorial one and start with this one, but if you get lost, please refer to the first tutorial mentioned above because it explains how we set up the file and how we added the menu and page to the WordPress dashboard for the new easy-to-use admin area. “Creating a WordPress Admin Page Plugin” also describes how to create and add a plugin because we are adding the easy-to-use admin area in the form of a WordPress plugin.
Adding page content to your admin area:
At this point, if you followed our first tutorial about how to add a blank admin page and menu option to the admin area, you should have the PHP file called easy_admin.php or something similar with only basic plugin content in it as follows:
Building a Widget to Edit Blog Posts:
Okay, we are picking up where we left off in the first tutorial. It is now time to add the contents of the admin page. First, we need to figure out exactly what we want the user to be able to do from their new admin area. For our easy-to-use admin, we want the user to only be able to edit and add both posts and pages. Our goal is to use built-in WordPress functionalities everywhere possible, so let’s get started by writing the code to make a widget that enables a user to edit posts.
Firsts of all you will need to create a “hook” for your new function. You should have learned how to do this in the first tutorial, so we will just give an example here:
wp_add_dashboard_widget() Function:
In order to make posts and pages appear on our page from the WordPress database, we need to learn how to access them. As luck would have it, there are built in functions for this. The wp_add_dashboard_widget function allows you to add a widget to your admin page that lists posts and/or pages. The wp_add_dashboard_widget function has the following required parameters:
- $widget_id – is the id of the widget you want to add to the page/dashboard.
- $widget_name – is the name the widget will show in its heading.
- $callback – is the name of the function you make to display widget contents.
The wp_add_dashboard_widget function also has one optional parameter that we won’t use here, but it works as follows:
- $control_callback – for the name of the function you can optionally create to handle the submission of widget option forms and to display the form elements.
We will use the above function in our own function that we will call easy_edit_posts in order to display a list of posts for the admin user to click on in order to edit or view their content. Here is how to make this function:
In the above code, we used only the three required parameters of the wp_add_dashboard_widget function, i.e.:
- $widget_id = easy-posts
- $widget_name = Posts Query Widget
- $callback = easy_post_content
So, the third parameter, $callback, we set to “easy_post_content”. That will be the name of our function we write to display the posts for editing. The first parameter, widget id, we set to “easy-posts”, which means we need to reference the same in the easy_post_content function we are about to write next.
Here is how to write the easy_post_content function:
