How do i create a list table in wordpress?
Show
List tables are a common element in WordPress’ administration interface. They are used on nearly all default admin pages with lists, and developers often integrate them into their plugins. But creating one of these tables is not really intuitive if you haven’t done it before, and I’ve seen people try to replicate it by using WordPress CSS classes in custom markup and even by replicating the CSS from scratch. In this article, we’ll see how WordPress provides functionality that can be used to generate native admin tables. We’ll look at a typical WordPress table and its different components and show how to implement it the right way. Further Reading on SmashingMag:
More after jump! Continue reading below ↓ Presentation Of A WordPress TableTo better understand the various elements we’ll be talking about, let’s take the default link manager that you see when you click “Links” in the admin menu. Here’s what you see: The default page for managing links in WordPress 3.2. As you can see, a few different elements precede the table that enable you to perform actions on the table. Then we have the table’s header, the rows, the table’s footer and, finally, some more actions. Before and After the TableWordPress’ admin interface is consistent, so you’ll get used to finding elements in certain places as you navigate. Before and after the admin tables, for example, are where you would usually find options to take action on the table. These include bulk actions, which enable you to edit and delete multiple posts and to filter the list based on a certain criteria. We’ll see in the second part of this article how to interact with these two areas and how to display options there. Header and FooterSpeaking of consistency, every admin table in WordPress has a header and footer. Following the same logic, they display the the same information: the titles of the columns. Some of the titles are simple and some are linked (meaning that the table can be ordered according to that column). The ContentObviously, the reason you would create a table is to put some content in it. This content would go in the rows between the header and footer. How Is This Done In WordPress?As we’ve just seen, a WordPress table has three families of elements. Let’s see how to achieve this, using a concrete example. Our Example TableMost of the time, the data we want to display will be in the form of a SQL table. We’ll use the default links table in WordPress as our example, but the concepts apply to any database table and could easily be adapted to your needs. Our table will have the following structure: This table contains some default data that will be perfect for testing. Using the List Table ClassTo create an HTML table in WordPress, we don’t have to write a lot of HTML. Instead, we can rely on the precious work of the It is tailored for back-end developers, so we can concentrate on the most essential task (the treatment of the data), leaving the other tasks (such as HTML rendering) to WordPress. The Let’s create a class
This is the starting point of our table. We now have an object that has access to the properties and methods of its parent, and we’ll customize it to suit our needs. Keeping in mind the three types of elements we saw earlier, let’s see now what to add to our class to get the same result. How to Add Elements Before and After the TableTo display content before or after the table, we need to add a method named
The
interesting thing here is that the You can then use this to position the various elements that you’d like to appear before and after the table. This function exists in the parent How to Prepare the Table’s Header and FooterIn the header and footer, we have the column’s headers, and some of them are sortable. We’ll add to our class a method named
The code above will build an
array in the form of Plenty of fields are in the links table, but not all of them interest us. With our Unlike the To specify the columns to which to add sorting functionality, we’ll add the
Here again, we’ve built a PHP array. The model for this one is The code we have just written specifies that we would like to add sorting functionality to three columns (“ID,” “Name” and “Visible”). If you don’t want the user to be able to sort any columns or if you just don’t want to implement this method, WordPress will just assume that no columns are sortable. At this point, our class is ready to handle quite a few things. Let’s look now at how to display the data. How to Display the Table’s RowsThe first steps in preparing the list table are very quick. We just have to tackle a few more things in the treatment of data. To make the list table display your data, you’ll need to prepare your items and assign them to the table. This is handled by the
As you can see, this method is a bit more complex than the previous ones we added to our class. So, let’s see what is actually happening here:
This function gets the data prepared by the With this method, you have great control over how to display the data. If you do not wish to add this method to your class, then the class will use the parent’s method to render the data in WordPress’ default style. Your list table class is now finished and ready to be used on one of your pages. All of the methods we’ve added to our class already exist in the parent ImplementationNow that our list table class is ready, let’s see how we can use it on a page of our choice. Where Do We Write It?The code that we’ll cover in this section has to be written on the page where you want to display the admin table. We’ll create a very simple demonstration plugin, named “Test WP List Table.” Basically, this plugin will add a link in the WordPress “Plugins” sub-menu. Our code will, therefore, be written in the plugin file. Before We BeginImportant: the
Also, if you have created your Instantiate the TableThe first step is to create an instance of our list table class, then call the
Display ItThe Build your page’s markup, and wherever you decide to display the table, make a call to the
Calling the In the download accompanying this article, you’ll find the complete PHP file containing the class definition and the example of its implementation. It is named testWPListTable.php, and it is written in the form of a simple plugin that you can put in your WordPress plugin folder and activate if you want to see what it does. ConclusionCreating a PHP class merely to display a table of data might seem like overkill. But this class is very easy to create and customize. And once it’s done, you’ll be happy that the parts of tables that are difficult to implement, such as pagination and reordering, are now taken care of. Also, because the generated markup is exactly what WordPress supports, if an update is released one day, your tables will remain in good shape. The PHP code we’ve used is clean and easy to understand. And mastering the default functionality won’t take a long time. What we’ve seen today is the basic implementation of a WordPress list table, but you can add other supported methods to the class for extra functionality. For more information, read the Codex page dedicated to WordPress list tables, and have a look at another custom list table example. I hope you’ve found this article useful, and I wish you good luck with list tables! (al)How do I make a table list in WordPress?Creating Tables in the WordPress Block Editor
Simply create a new post or page, or edit an existing one. Once inside the content editor, click on the (+) symbol to add a new block, then select 'Table'. You can find it under the 'Formatting' section ,or you can type 'Table' into the 'Search for a block' bar.
What is WP list table?WP_List_Table is base class for displaying a list of items in an ajaxified HTML table. Throughout WordPress the class WP_List_Table is used to display data, e.g. users, plugins, comments, or posts. The class contains almost all necessary methods for displaying, sorting, paginating, and searching data.
How do I create a WordPress table without plugins?First, in Docs, click the Insert button at the top of the document, then hover over the table option and select the dimensions for your table. Next, while still in Google Docs, enter the information into the table which makes formatting easier, and you won't be able to change the rows and columns later on in WordPress.
How do I create a contents list in WordPress?How to Create a Table of Contents in WordPress Manually. Go to the post or page you want to add the table of contents to.. If there are none, create the headings that will be used as the items in the table of contents.. Click into the first heading block.. |