Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

What is the recommended way of creating a page with a table, in the style of the tables showing posts or users in the admin area?

I am expanding the Cache Images plugin, and it contains a table with domains and a number of images from that domain. So there is no equivalent existing table that I can build upon (in the first version of this question, I asked about a table with posts, but there I could (maybe) expand the existing post table).

Should I just base myself on the post overview page, and start with a <table class="widefat">, or are there better functions that handle this now? Do you know a clean, empty example of a table with paging that I could base my work on?

share|improve this question
3  
There is a new blog for the WordPress UI styleguide, you may find it helpful. dotorgstyleguide.wordpress.com/outline –  sorich87 Sep 27 '10 at 14:09
2  
Note to self: scribu added a new ajaxified table system in WP 3.1, with a base class WP_List_Table. This question can probably be updated with information on how to use it. –  Jan Fabry Dec 28 '10 at 8:50
add comment

5 Answers

up vote 10 down vote accepted

This is what I generally use:

<table class="widefat fixed" cellspacing="0">
    <thead>
    <tr>

            <th id="cb" class="manage-column column-cb check-column" scope="col"></th> // this column contains checkboxes
            <th id="columnname" class="manage-column column-columnname" scope="col"></th>
            <th id="columnname" class="manage-column column-columnname num" scope="col"></th> // "num" added because the column contains numbers

    </tr>
    </thead>

    <tfoot>
    <tr>

            <th class="manage-column column-cb check-column" scope="col"></th>
            <th class="manage-column column-columnname" scope="col"></th>
            <th class="manage-column column-columnname num" scope="col"></th>

    </tr>
    </tfoot>

    <tbody>
        <tr class="alternate">
            <th class="check-column" scope="row"></th>
            <td class="column-columnname"></td>
            <td class="column-columnname"></td>
        </tr>
        <tr>
            <th class="check-column" scope="row"></th>
            <td class="column-columnname"></td>
            <td class="column-columnname"></td>
        </tr>
        <tr class="alternate" valign="top"> // this row contains actions
            <th class="check-column" scope="row"></th>
            <td class="column-columnname">
                <div class="row-actions">
                    <span><a href="#">Action</a> |</span>
                    <span><a href="#">Action</a></span>
                </div>
            </td>
            <td class="column-columnname"></td>
        </tr>
        <tr valign="top"> // this row contains actions
            <th class="check-column" scope="row"></th>
            <td class="column-columnname">
                <div class="row-actions">
                    <span><a href="#">Action</a> |</span>
                    <span><a href="#">Action</a></span>
                </div>
            </td>
            <td class="column-columnname"></td>
        </tr>
    </tbody>
</table>

Hope that helps.

share|improve this answer
    
awesome, thanks –  ariefbayu Sep 8 '10 at 2:20
    
is it also to have automatic pagination inserted like this? (e.g. showing post 1-20) –  Michiel Standaert Dec 7 '11 at 14:50
add comment

Use this example (written as a plugin) to create your admin tables:

http://wordpress.org/extend/plugins/custom-list-table-example/

It uses the built-in WP_List_Table class.

share|improve this answer
1  
I think this should be the accepted answer. Also see this article in Smashing Magazine that articulates a similar approach: wp.smashingmagazine.com/2011/11/03/… –  julien_c Mar 10 '12 at 13:09
add comment

Use the Core API, not only its CSS

Normally you just use an instance of the WP_List_Table class.

Guides:

Benefits?

YES!

You can add pagination, search boxes, actions and whatever magic you can imagine (and are able to code).

share|improve this answer
2  
+1. this answer should be accepted. –  SachinG Sep 23 '13 at 15:01
1  
Small hint as link to see markup, classes for the admin interface, without only the goal to create tables: github.com/bueltge/WordPress-Admin-Style –  bueltge Nov 4 '13 at 13:33
add comment

Also you can use this small plugin for view the possibilities of the backend in WP: https://github.com/bueltge/WordPress-Admin-Style

share|improve this answer
add comment

Hi @Jan:

You might want to consider adding a filter to your custom post type list in the admin? The linked answer below shows how to do it with a taxonomy but you could easily use other criteria in your restrict_manage_posts hook:

Let me know if you have more questions.

share|improve this answer
    
I apologize for the unclear question. In my first example it was a table of posts, and indeed, I could try to use the existing post table for that (even if I only want to show the post titles and then all custom columns?). But now I have edited my question with a concrete example: I have a table of domains, so there is no equivalent existing table that I can expand. –  Jan Fabry Sep 7 '10 at 7:50
    
@Jan: Ah. Yes, I think you have found the truth, that there is not good encapsulated way to do this other than writing (duplicated) HTML. I've often had the same issue. Maybe create a ticket on trac asking for this enhancement and link the URL/ticket# here so we can support it. –  MikeSchinkel Sep 7 '10 at 23:07
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.