WordPress Tutorial: How To Extend WP List Table (create grid view in admin)

Blog, Tutorials No Comments

I this tutorial I will show you how to create a List table which can be used in a custom WordPress plugin, with a connection to WordPress DB. The goal is to show data from a database table in a nice grid view. For achieving this we will need to extend WordPress List Table class.

You can find a lot of tutorials on the web, but none that covers all the aspects such as databases uses, sorting and use of filters. I will be using the code from my latest project which was cart abandonment plugin for FastSpring payment provider which is used in our shop.

In the end, our result will be like the screen below:

Wordpress Lsit table

Create WP Plugin

As I already mentioned, we will use our latest plugin for cart recovery.

First of all, we need to prepare the plugin. For this tutorial, I will use one file for better understanding. Let’s call the file pmc-wp-list-table.php.

Our plugin is created so let’s focus on the WP List table.

Create WP List Table

First, we need to be sure that the class WP_List_Table exist.

To build a WordPress UI table, the WP_List_Table> will have to be extended with a couple of its methods overridden by a child class.

Create WordPress database table

Since we get data from the database we need to create a table. We will call a function pmc_db_create() in PMC_FS_WP_List_Table class where we have also defined table name with constant PMC_FS_TABLE. The function dbDelta( ) is used for creating new tables or updating existing tables to a new structure.

Define WP List Columns, Sortable items, Filter options and Search

First, we need to define which columns from the table will be used in our grid. This is done with the function get_columns(). You can include all the columns or only the column that you wish to display.

Now that we have defined the columns for our grid, we need to define default values for these columns. We can use the function column_default( $item, $column_name ).

In the next step, we need to get data from a database and start preparing all the items. For this step, we will use the function prepare_items().

First, we need to call global $wpdb so we can use WordPress database functions.

Next, we define numbers of rows in our grid $per_page = 50;. 50 means 50 rows per page.

For database select we can use WordPress function $wpdb->get_results(). We need to get columns name, last_name, email and action from our DB table. Our query will use search and filter options. That is why there are {$search} {$search_custom_vars}.

We will use filters and so we need to retrieve this filter.

And for our search via email column, we need to retrieve search request.

Because we use sortable table we need to create function get_sortable_columns(). With this function, we will get a list of sortable columns. The format is: ‘internal-name’ => ‘orderby’ or ‘internal-name’ => array( ‘orderby’, true ).

We also need to define columns headers.

Now that we have headers, sortable columns, and data, we just need to define items for our grid.

And finally, we just need to set page navigation.

As you can see we need to get a number of all rows in the table so we will get this via WP get_var() function.

Here is the entire function.

We wish to sort the column action so we need to create a function that does this. This way the above-mentioned column headers are changed to links. The second parameter in the value array of $sortable_columns takes care of a possible pre-ordered column. If the value is set to true, the column is in ascending order, if the value is set to false, the column is in descending order or unordered.

With this data, we can write a method for sorting out the data. Our default sorting field is ID.

We will also use filter display ALL | ABBANDON | RECOVERED. For the reason we need to write a method get_views().

Our class for the extend Wp List Column is complete. Here is the entire class:

Now we only need to set our admin page. We will use the function mentioned above pmc_create_admin_page().

Create WP Admin page with List Table

First, we need to create new WP List Table

Then we need to prepare it.

Because we are using filters and search options, we need to call view and add search form.

And now the entire function for admin page is ready.

And here is the final image of our new WordPress list table and admin page:


I hope that this tutorial helps you create Wp list for your admin pages. If you have any questions or maybe I did something wrong in the code 🙂 please comment on this tutorial. You can download the whole script below:

Thanks for reading.

Other tutorials:

WordPress Tutorial: How to add a custom style to WordPress Admin?

We really appreciate you for visiting PremiumCoding and reading this article! Now you might also want to check out our Themes here.