Codeable info

WordPress Admin Plugin: Part Two

Posted on by in WordPress Tutorials

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.

Prerequisites

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:


WP Easy Admin

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:

add_action('wp_dashboard_setup', 'easy_edit_posts');

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:

function easy_edit_posts(){
// add the Posts Query widget
wp_add_dashboard_widget( 'easy-posts', 'Posts Query Widget', 'easy_post_content');
}// end easy_edit_posts 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:

function easy_post_content(){
$posts_query = new WP_Query( array(
'post_type' => 'post',    // Leave as "post" if you just want blog posts
'post_status' => 'publish',
'posts_per_page' => 9999,//enables us to see all posts at once;
'orderby' => 'date',
'order' => 'DESC'
) );
$posts =& $posts_query->posts;

	if ( $posts && is_array( $posts ) ) {  
	$list = array();
		foreach($posts as $post) { // Loop through posts
		$url = get_edit_post_link( $post->ID ); // URL of "Edit" post page
		$title = get_the_title( $post->ID ); // post title
		$chars = 30; // char limit
		$item = "

" . esc_html($title) . " " . get_the_time( get_option( 'date_format' ), $post ) . '

'; //get the post descriptions(not used yet but may need later...) if($the_content = preg_split('#\s#', strip_tags( $post->post_content), $chars+1 , PREG_SPLIT_NO_EMPTY)) { $itemdesc = '

' . join( ' ', array_slice( $the_content, 0, $chars ) ) . ( $chars < count( $the_content ) ? '…' : '' ) . '

'; } $list[] = $item; } // End the foreach loop //close php and create list of posts. ?>
  • \n
  • ", $list ); ?>

Okay, admittedly, the above function looks a bit more intimidating than any we have used so far, but don’t worry; it can be easily explained as follows:

  • In the first line of code under where we named the function, we use the WP_Query class to perform a query. The WP_Query class is located in the wp-includes/query.php directory. It does the bulk of the work when querying a WordPress blog. Notice that we put the data from the query in an array named “$posts_query”. Then we set the post_type to “posts” to indicate what we are fetching. We set the post_status parameter to “publish”. That way we only deal with posts that are live on the website. We set the posts_per_page value to an extremely high number so we are sure to get them all. Finally we set order_by to “date” and order to “descending” to make it put the posts in chronological order.
  • Next we have an “if” statement that basically states that if there are any posts, then loop through them and get their location and name to list on the page.
  • The “if” statement is followed by an else statement that says to show an error message if there were no results.

Making the Edit Page Widget:

Now that you have the code to build the widget for editing posts, the widget for editing pages will be easy. We are going to simply copy and paste the code we have made so far in this tutorial and make some simple minor adjustments to it. Here is what to do:

  • Create your add_action function call. Copy and paste the one you made above and simply change “easy_edit_posts” to “easy_edit_pages” so it looks like this:
add_action('wp_dashboard_setup', 'easy_edit_posts');
  • Now copy and post the easy_edit_posts function and change the name to easy_edit_pages . Then change the text that said “easy-posts” to “easy-pages”. Next, change the text that said “easy_post_content'” to “easy_page_content'”. When you are done you should have a function like in the following example:
function easy_edit_pages(){
// add the Posts Query widget
wp_add_dashboard_widget( 'easy-posts', 'Posts Query Widget', 'easy_page_content');
}// end easy_edit_pages  function.

Finally, copy the function called “easy_post_content” and paste it last. Rename it to “easy_page_content”. Then make the following changes to this function:

  • In the first line of the function, change the variable named “$posts_query” to “$pages_query”. There will be one more instance of the $posts_query variable seven or eight lines down, so be sure to rename it the same way.
  • In the next line, change the post_type from “post” to “page”.
  • Next, rename every instance of the variable named $posts to a new variable named $pages. Use notepad’s rename functionality so you don’t miss any, but don not use “rename all” or you will replace the ones in your top function too!
  • Now rename every instance of the variable named $post to a new variable named $page. Be sure to notice the difference of this and the prior step as the variable names are very similar with only the letter S to tell them apart.

That should do it! You now have only one more step and your easy-to-use general admin user interface will be completed! The final step is going to be to edit the top of the easy_admin.php file that we wrote in part one of the tutorial. We need to edit the HTML and PHP code to make use of our new functions. We will be editing the function named WPS_easy_admin_pg, the function that creates the page. Simply add a table and headers that say something like”Edit posts” and “Edit pages” in their respective columns. Next, you need to call your two main functions that call the widgets. The functions to call will be the ones named “easy_post_content” and “easy_page_content”. Here is what the final function should look like when you are finished:

function WPS_easy_admin_pg() {
?>

WP Easy Admin


Edit/View Posts:

Edit/View Pages:

Here is an image of your finished admin area with the ability to view and edit both pages and posts without any clutter or confusing options:

Summary

That isn’t too bad when we spell it out now is it? Well, maybe for some beginners, but you’ll get it sooner or later. You can continue to develop other widgets into your new admin page as you desire. To learn more, read more of our tutorials or Google "WordPress Codex" and you can find reference material on other WordPress functions that will assist you in further development if you so choose. Good luck developing your own easy-to-use WordPress admin page and happy coding!

Comments Closed

Codeable info