AJAXy Admin for WordPress

This project is inspired from the “AJAXify Admin List-type Screens” idea on the GSoC ideas list.

It will make use of JavaScript and AJAX to enhance the user experience and navigation in the WordPress Admin. Currently, navigating list-type views in WordPress Admin means a lot of page refreshes. Moving between pages of items, filtering based on values of columns and searching through a list of items, all require a page refresh.

List-type views are widespread across the WordPress Admin:

  • Edit Posts (edit.php)
  • Tags (edit-tags.php)
  • Categories (categories.php)
  • Media Library (upload.php)
  • Edit Links (link-manager.php)
  • Link Categories (edit-link-categories.php)
  • Edit Pages (edit-pages.php)
  • Edit Comments (edit-comments.php)
  • Manage Themes (themes.php)
  • Manage Plugins (plugins.php)
  • Users (users.php)

Besides, list-type views, there are several other instances where WordPress can make use of JavaScript and AJAX to be more responsive like when publishing/updating a Page/Post, updating template files, etc.

Making the WordPress Admin more AJAXy will improve the overall user experience and make administration of WordPress blogs faster and more fun.

As part of this project, AJAX will replace page refreshes in the following places:

  1. Paging (in list-type views)

    Currently, going from one page of items to the next in a list type view, such as the “Edit Posts” page (edit.php), means a page refresh. Instead, this can be avoided and the content can be updated with the next page’s items using AJAX. This will speed up navigation across pages of items.

  2. When filtering based on column value (in list-type views)

    In list-type views, WordPress currently has ways to filter based on values for certain columns. Example: On the “Edit Posts” page, user can filter posts based on the month a post was published or the category to which a post belongs. For these filters, a page refresh is required. This project will get rid of this refresh and instead use AJAX to fetch the filtered list of items and update the content.

  3. Column based sorting (in list-type views)

    For certain columns, column based sorting will be really useful. Example:

    In the “Edit Posts” view, user will able to sort the list based on:

    1. Post title (character based)
    2. Author (character based)
    3. No. of comments
    4. Date Published

    Additional columns may also be added for some list views to take advantage of sorting by columns. A couple of examples are:

    1. ‘Last Modified’ column in edit.php.
    2. ‘Comment Time’ column in edit-comments.php.

    And this sorting will be done using AJAX so that a page refresh is not required.

  4. Filtering by text based search

    In the list-type views, when the users enters some text and hits ‘Search’, it results in a page refresh to load the filtered list of items.

  5. Switching views (in list-type view)

    Sometimes, a list-view has multiple views. For example, in the “Edit Posts” page, user can view the list of “All”, “Published”, “Drafts” and “Trash” posts.

  6. Trashing/Restoring items

    When trashing or restoring items in the list view. Example: In edit.php, sending a post or page to Trash or clicking on Restore to recover it.

  7. Applying Bulk Actions in List View

    This will be applicable for certain bulk actions. For e.g.:

    1. “Move to Trash” for Posts, Pages and Comments’ list views
    2. “Mark as Spam/Approve/Unapprove” for Comments view

  8. Activating/Deactivating a plugin

    Using AJAX to activate/deactivate plugin will add consistency to match the rest of the “Edit Plugins” list view.

  9. Saving Page/Post

    When saving a draft or publishing or updating a post, a page refresh is very annoying. Users like to save their work periodically and a refresh on every save drives attention away from writing the blogpost. Using AJAX to save the article will make the WordPress editor more reminiscent of a desktop-based editor and make for a much better user experience.

  10. Updating template files

    When editing a template file, updating the file requires a refresh. Using AJAX to update a template file will make for a faster and better user experience.

Implementation

The same concept of sending a GET/POST request with the appropriate parameters will be used almost everywhere throughout this project. jQuery will be used for writing most of the JavaScript code as it is already included in the WordPress core.

The following 3 steps will be followed almost everywhere throughout this project, to replace page redirects with AJAX Requests:

  1. Send an AJAX request (GET/POST) with the required parameters to ‘admin-ajax.php’. Based on the ‘action’ parameter, it will then perform the necessary action and return the appropriate response. A lot of code will be reused from elsewhere here to make the required database calls.

  2. Wait for the response. While waiting, display some visual cue to the user to notify him that we’re waiting for a response (the AJAX loading icon used elsewhere throughout WordPress Admin)

  3. Abstract content from the response to perform content updation and display the appropriate notification message depending upon the response.

Here are some details regarding specific features:

  • Column based sorting

    To sort a list of items on the basis of a column, user will be able to click on the column heading to toggle ascending/descending order of sorting. Up/Down arrow icon next to the heading will give visual cues as to the order of sorting.

    It will not be enabled for columns with multiple values, like “Categories” in “Edit Posts”. This is because most of them already have existing filters that are better suited for them. Also, it is uncertain on what basis reordering may be done for them.

    When the user clicks on the column header, an AJAX request will be sent to the list view with the appropriate parameters. The relevant content will then be abstracted from the response received and will update the content on the page.

    For column based sorting, an action ‘sortlistbycol’ will be added to ‘admin-ajax.php’, which will respond to the ‘sort_by’ and ‘sort_order’ parameters (in addition to the other parameters required by edit.php) and make the proper SQL query. It will then return the appropriate response.

    An example request for sorting items in “Edit Posts” by date might be “admin-ajax.php?action=sortlistbycol&sort_by=date&sort_order=asc”. In addition to this, there will be other parameters like ‘paged’ for paging. A lot of code will be reused here from ‘edit.php’.

    A similar approach will be used to implement AJAX at other places.

Work done so far: Besides, brainstorming the idea, I’ve looked at the WordPress requests and POST parameters sent in list views and how they’re handled. Since this is a popular idea among the ones listed, I’ve posted and keenly followed discussion around this project on the ‘wp-hackers’ mailing list.

Plugin, theme or core: Since this project is so specific, I’ll implement this as a patch for the core. I’ll set up a separate environment where my mentor can see the running state of the project as well as review committed code.

Potential Mentors: Andy Skelton or Noel Jackson might be the appropriate mentors for my project since a major part of it is JavaScript/jQuery and they might be more adept in understanding any AJAX implementation issues. But, if they are not available, I’m prefectly happy with any mentor.

Schedule of Deliverables

Since most of the mentors on WordPress are on a different time zone than me (IST), I would need to adjust my work timings to ensure regular interaction. If I am selected, this project would be my primary work activity during the summer, and I would be willing to move around my work hours to a happy setting for both my mentor and me.

  • 20 April to 22 May:

    • Get acquainted with parts of the WordPress core that I will require to understand for my project.
    • Finalise ideas and discuss project implementation in detail with mentor.
    • Publish my goals to gather feedback and suggestions on my project from the WordPress community.
    • Figure out how feasible it’ll be to build this project as a plugin.

  • 23 May to 5 June: Implement paging using AJAX.

  • 6 June to 15 June: Implement filtering (search text based or otherwise) using AJAX. Fix bugs.

  • 16 June to 10 July: Implement Column based sorting and subview switching using AJAX. Fix bugs.

  • 11 July to 25 July: Implement Post/Page save and template file updating using AJAX. Fix bugs.

  • 26 July to 5 August: Implement trashing/restoring of list items and bulk actions in list view using AJAX. Fix bugs.

  • 6 August to 11 August: Implement activating/deactivating of plugin using AJAX.

  • 11 August to 17 August: Perform testing and remove any withstanding bugs. Implement any left out features. Create documentation and screencast covering all the major features of the project.

© 2012 Ankit Ahuja • Powered By WordPress