How to Create Native Admin Tables in WordPress

How to Create Native Admin Tables in WordPress

WordPress list tables are a very common element of the WordPress admin interface. They are used by nearly all default admin list pages, and also often implemented by developers while writing plugins. However, creating one of those tables is not really an intuitive thing to do when you haven't done it before, and I've seen cases where people where trying to replicate one, with techniques such as using the WordPress CSS classes on personal markup, or even replicating the CSS from scratch.

In this article, we'll see how WordPress provides native functionality that can be used to generate some native admin tables. We'll have a look at a typical WordPress table and its different components, showing how it is possible to implement them the right way.

Thank You for Downloading

I'm glad that you found my work useful. If you did, it might help some other people too. So why not helping me spread the word with a tweet? You could also buy me a coffee to thank me for my code and explanations if you prefer ;).
I hope you'll enjoy your download. Regards. Jeremy.

This is a post I wrote for smashing magazine.

Read the rest of this article on smashing magazine

5 Responses to How to Create Native Admin Tables in WordPress

  1. Nice example. It's very helpfull

    Can you make examples to edit and delete process?

    Thanks

  2. Great resource. Many times I wanted to use it , and you are right that all the examples out there are just "hacks" with CSS or markup. It will be very useful if you will add also the action links part (somewhat what the previous comment ) . Great job and thanks again !

  3. How to place the table data in tags in native wordpress admin table.

  4. I am new to wordpress please help.
    I just put this whole file in plugin folder , and then activate the plugin and i click on “WP List Table Test” link so it does not showing the columns of “wp_links” table, it only showing just “no items found” message without any columns to show
    please helpppp

Leave a Reply

Your email address will not be published. Required fields are marked *

Other Useful Resources

Form Cloning jQuery Plugin illustration

Building dynamic forms is a task that a lot of web developers will have to do at some point. By dynamic I mean forms that change based on what the user inputs.

A basic example of dynamic forms, are those that allow the user to add the same group of information several times. For example, an attendance form, where you can add several persons, a booking form where you can add several tickets, a membership with several users, a media page with several pictures or videos and so on, the possibilities are countless.

In order to facilitate the development of such forms, I created a little plugin, that allows you to dynamically clone a specific set of information that will be repeated. So if you ever searched a way of cloning forms, fieldsets or groups of input, this could really be helpful.

Read more
Introducing the Twitter Watch illustration

The Watch is a list of curated quality links about web development. I've been maintaining it for a year now so I thought I would share the results with everyone as this will probably be useful to somebody else. I select the links from Twitter mostly based on their usefulness. They contain interesting reads, points of views, helpful scripts, articles, resources... Well plenty of things worth bookmarking when you are interested in web development.

Read more
How to integrate the new Twitter api (1.1) in php illustration

On October 11th 2012, Twitter introduced some major changes in its API following its plans to clean things up deeply. As is explaining the twitterapi account they have for example shut down or limited access to some of their data and resources. So if you've noticed that some Twitter functionalities you are using on your site are not working any more, you may have to check a few things. In this article written on NOE interactive's blog, you'll learn what has concretely changed, and you'll be able to follow a few steps to get your Twitter feeds back.

Read more
@founyi Sympa ce nouveau logo. 👍17 Jul / 15:42