Complete Guide to integration with the graphical environment of WordPress (Part V)

This article is the fifth part of the series on the development of plugins and themes with the focus on integration with the native environment of the WordPress administration, the use of graphical components such as Broken parts, tables, frames and other native CSS, including API settings, nonces among other tools that WordPress already offers. Review Part I, Part II, Part III and Part IV of this series.

After discussed how to use different types of UI elements on our website, and see the last part of how we use the API WordPress options, we now work with a very special element which allows us to maintain interoperability with the system. The element “table” (objects list as posts) is very special because it presents an interface with many features. This interface is via a PHP class that allows us to render the table without having to write HTML necesario to the elements that compose it. In this way we obtain a list page with a consistent use and, once again, in order to maintain compatibility with future versions of WordPress without much effort.
Complete Guide to integration with the graphical environment of WordPress (Part V)
To create a new table in a management page will have to create a subclass of the heiress WP_List_Table class so that we can set all the necessary parameters and nourish our table with objects. In today’s article we will focus on steps needed to create this element and so we will feed our table with an external object, an RSS feed. We could list what we wanted from fetching elements to a database; show the last emails of a mail box, etc. I chose to use an RSS feed to be practical and easier to do accomplish this task.
This is the core class that creates all tables listing pages in the WordPress administration. It is with this class we will then make our table. It is located in wp-admin / includes / class-wp-list-table.php in version 3.4 of WordPress. If you open this file you will see the class with several properties and methods. Some methods exist well the Penalty short error message, asking that the heir class (that we build) rebuild this method with its specific features. This is exactly what we will do first.
Let’s open our plugin file, which we have used in all the other articles in this series. At the end of this file we will write our class. Good practices WordPress dictate that we should define this class in a separate PHP file, but for simplicity and portability of this tutorial we will keep everything in the same file:
include_once( ABSPATH . ‘/wp-admin/includes/class-wp-list-table.php’ );
class WP_RSS_List_Table extends WP_List_Table {
First of all we started to include the file of WP_List_Table class so that we can create our Extended WP_RSS_List_Table class. This is the scope of the class but it does not produce any effect. We first need to build the first methods. We will include the main methods as a signature in our class , so you get a general idea of the necessary workflow :
include_once( ABSPATH . ‘/wp-admin/includes/class-wp-list-table.php’ );
class WP_RSS_List_Table extends WP_List_Table {
    // Method constructor of the class
    function __construct() {
        // Let’s call the constructor of the main class
        parent::__construct( array(
            ‘plural’    => ‘Name do object plural’,
            ‘singular’  => ‘Name singular’,
            ‘ajax’      => true, // Se permite Ajax on table
    // This method allows us to evaluate whether the current user
    // Has permissions to make changes via Ajax
    // Required ajax pass = true in the constructor
    function ajax_user_can() {}
    // This method prepares the items and applies them in the variable $ items
    // It should always be an array.
    // In our case this variable is an array with all items
    // Coming from the RSS feed.
    // Here we also create pagination table and create the columns .
    // This method is mandatory
    prepare_items function () { }
    // This method lists the columns we have available
    get_columns function () { }
    // Generate the column that appears the checkbox
    // It is not mandatory if you do not need a checkbox
    function column_cb ( $ item) { }
    // Here is the entire workflow for the columns listed in the table
    function column_default ( $ item , $ column_name ) { }
These are the main methods you should place to start your class. We will now analyze home of the methods and create the necessary workflow .
The _construct () method
This is the constructor of the class that must inherit the parent constructor, however everything concerning the initialization data sources and creating routines must be specified here as well. For example, include a class that will make the connection and start this connection.
This code :
parent::__construct( array(
    ‘plural’    => ‘Name do object plural’,
    ‘singular’  => ‘Name singular’,
    ‘ajax’      => true, // Se Ajax allows the table
It serves to pass certain information useful for the construction parent class, as the nomenclature used for objects that are listed in the table as well as our table allows the use of Ajax or not.
ajax_user_can () method
Returns only if the current user has or not permission to use Ajax table tools to make inline edits or giving away the data by column. The most obvious here is to analyze through current_user_can () function parameter setting in the ability that the user needs to edit the type of object you ‘ve listed .
prepare_items () method
This is very important. This is where everything happens , where the data is received and drawn and which set the table header and pagination. This is the method which by nature does what is necessary.
prepare_items function () {
    // This variable will be an array of all the objects to be shown in the table
    $ This-> items = array (
        0 => (object) array (
            ‘Id’ => 1,
            ‘Name’ => ‘Object Name’
    // Count the total number of items …
    $ TOTAL_ITEMS = count ($ this-> items);
    // We do calculate of pages needed to display all the items
    $ Total_pages = ceil ($ TOTAL_ITEMS / 20);
    // … And put it in an array that will be assigned to the method
    // Class that holds the paging elements
    $ This-> set_pagination_args (array (
        ‘Total_pages’ => $ total_pages,
        ‘Per_page’ => 20
    // Let’s set the table header through an array.
    // We store the data about the header in the variable charge
    // To keep the data for the header.
    $ This -> _ COLUMN_HEADERS = array (
        $ This-> get_columns () // Go get all defined columns
        array (), // You can list here the columns of keys that we want to hide
        $ This-> get_sortable_columns () // Go get the columns that are Drawable
get_columns () method
In this method we list the columns that will be used in the table. This way you only have to mount an array with the key (which will be passed as ID ) column and the corresponding name (or label) :
function get_columns() {
    $posts_columns = array();
    $posts_columns[‘cb’] = ‘<input type=”checkbox” />’;
    $posts_columns[‘name’] = ‘Nome’;
    return $posts_columns;
column_cb () method
This method shows the checkbox, if desired, for each row / Table object. In this case the code is simple and direct, without the need for adaptation:
function column_cb( $item ){
    return sprintf(
        ‘<input type=”checkbox” name=”%1$s[]” value=”%2$s” />’, 
column_default () method
This routine method list of all the other columns in our defined class, for each row :
function column_default( $item, $column_name ){
    switch( $column_name ){
        case ‘name’:
            echo ‘<a href=”‘ . esc_url( $item->permalink ) . ‘” target=”_blank”>’;
            echo $item->name;
            echo ‘</a>’;
These are the main methods of the class. If necessary you can extend the class further by modifying the methods that are defined. For example, you want to have Drawable columns, in which case you can set the get_sortable_columns () method and pass an array of columns that you want to Drawable .
In the next section we will apply a practical example listing in the table using the returned elements of a feed. You can apply what you want, email reader , contact manager , etc. The process is always the same but the objective has no limits.
Complete Guide to integration with the graphical environment of WordPress (Part V)
In the previous section we got to know the basics of how to apply the WP_List_Table class in a WordPress page, this section will then extend this knowledge and apply it to something that can really be helpful. I will not explain all the steps to be taken as in the previous section , but rather put in a few methods that you need to change or add in our class to achieve the desired .
First of all we include WordPress feeds library and receive the desired feed URL in the constructor method:
// Class constructor method
function __construct ( $ url) {
    // We will include the Simple Pie including in Word Press .
    // In this way it becomes easier to seek feed and return them in an array .
    include_once ( ABSPATH WPINC ‘ /feed.php ‘ . . ) ;
    // Save the URL in the variable
    $ This-> = rss esc_url ( $ url, array ( ‘ http ‘, ‘ https ‘));
    // Let’s call the constructor of the main class
    parent :: __ construct (array (
        ‘ Plural ‘ => ‘ Feeds ‘
        ‘ Singular’ => ‘ Feed ‘
        ‘ Ajax ‘ = > true ,
    ) ;
Now let’s go to prepare_items () method and will feed the variable $ items with returned items Feed , but it is necessary to follow some rules , because each stored item must be in the form of simple object . The routine is very simple, using a foreach :
// This method prepares the items and applies them in the variable $ items
// It should always be an array.
// In our case this variable is an array with all items
// Coming from the RSS feed.
// Here we also create pagination table and create the columns.
prepare_items function () {
    // Let’s get the feed of WordPress School and retornamo it to the items array.
    $ This-> = rss FETCH_FEED ($ this-> rss);
    if (is_wp_error ($ this-> rss)) {
        $ This-> items = 0;
    } Else {
        $ Rss_items = $ this-> rss-> get_items (0, $ this-> rss-> get_item_quantity (999));
        foreach ($ rss_items the $ id => $ item) {
            $ This-> items [] = (object) array (
                ‘Id’ => (int) $ id,
                ‘Title’ => $ Item-> get_title ()
                ‘Permalink’ => $ Item-> get_permalink ()
                ‘Description’ => $ Item-> get_description ()
                ‘Date’ => strtotime ($ Item-> get_date (Y-m-d H: i: s’)),
How can analyze the code above, each item is an object of the $ items array and contains 5 properties (ID , title , permalink , description and date) each with the data for the item. Now that we have the data arranged in an array , we are almost in the final straight to the rendering of the items in the table, missing just set the table columns and build the code for each of them. I will not dwell here on this matter because it was already discussed in the previous section , however if any questions arise suffice see the file provided at the end of this article .
Now that we have the full table it’s time to show it on the page that have been building in this series . To do this we remove the options and the elements that we put there and include the following code by modifying the function:
// This function is the display of the page content
// In the future we will put all that is visible here
test_ui_submenu_page_callback function () {
    $ Wp_list_table = new WP_RSS_List_Table ( ‘ ‘);
    $ Wp_list_table- > prepare_items ();
    ? >
< Div class = “wrap “>
    <? Php screen_icon ( ); ? >
    < H2 >
        UI Test Plugin
    < / H2 >
    <! – The body of the page is here ->
    <! – We have created a form pointing to the options.php page ->
    views ( ) <? php $ wp_list_table- ? > ; ? >
    <Form id = ” form ” action = ” options- general.php ? Page = plugin -test- ui” method = “post” >
    < ? Php $ wp_list_table- > search_box ( ‘Search’ , ‘ feed ‘); ? >
    < ? Php $ wp_list_table- > display (); ? >

    < / Form>
< / Div >
    < ? Php
I will just explain what is new in this function, which is relative to the setup and rendering the table. The code
$wp_list_table = new WP_RSS_List_Table( ‘’ );
prepares the table. First we create an instance of the class passing the URL of the feed you want to show on our table. The second line will call the table preparer , you’ll collect items and set the table headers .
<?php $wp_list_table->views(); ?>
<form id=”formulario” action=”options-general.php?page=plugin-test-ui” method=”post”>
<?php $wp_list_table->search_box( ‘Pesquisar’, ‘feed’ ); ?>
<?php $wp_list_table->display(); ?>
The code above is also quite simple. There are three methods that render three different things. The first will render the state of links (which we will see below how to create), the second renders the search box (receiving two parameters, the first is the label and the second an ID) and the third renders the table itself .
There are some options that we can use in conjunction with our table.
Create “position links” above the table :
Widely used in posts listing page , top links by state posts filtering can be easily achieved by adding the following code :
// Mostra as views de uma tabela
function get_views() {
    return array(
        ‘all’ => sprintf( ‘<a href=”%1$s”>%2$s</a>’, ‘index.php’, ‘Ver Tudo’ ),
        ‘change’ => sprintf( ‘<a href=”%1$s”>%2$s</a>’, ‘index.php’, ‘Mudar de Feed’ ),
        ‘um-texto’ => ‘Isto é apenas um texto!’
This code is a method that returns an array with a set of links to be rendered before the table .
Dropbox mass actions
// Mostra a dropdown das acções em massa
function get_bulk_actions() {
    return array(
        ‘edit’ => ‘Editar’,
        ‘remove’ => ‘Remover’
With this code added to the class you can add a mass actions dropbox in the table.
Drawable columns
The Drawable columns Ajax make the sorting of data by column easier. So , simply add the method and return an array of keys for the columns to be Drawable :
// Regista quais as colunas sorteáveis
function get_sortable_columns() {
    return array( 
        ‘title’ => ‘title’,
        ‘date’ => ‘date’
Complete Guide to integration with the graphical environment of WordPress (Part V)
At this point we have all our listing table mounted , you only need to add an option for the user to limit the number of items you want to display per page . The best way to do this is by adding this option to the tab page options . In this sense we will only need to include the following code :
add_filter( ‘set-screen-option’, ‘test_ui_set_screen_option’, 10, 3 );
function test_ui_set_screen_option( $status, $option, $value ) {
    if ( ‘feeds_per_page’ == $option ) 
        return (int) $value;
function test_ui_general_options_input() {
    global $test_ui_page;
    $screen = get_current_screen();
    // get out of here if we are not on our settings page
    if( ! is_object( $screen ) || $screen->id != $test_ui_page )
    $args = array(
        ‘label’ => ‘Feeds por página’,
        ‘default’ => 10,
        ‘option’ => ‘feeds_per_page’
    add_screen_option( ‘per_page’, $args );
In the above code you will have to pass the function that already we have used in previous articles , which is called during the loading of our website , the add_screen_option ( ) function from the various options accepts two arguments : 0 option name and an array with the parameters . In this way the user can go to the options screen and change the value you need.
Finally we have to make the class recognized that this option has been changed . To do this simply add a call to a class method that analyzes this option , that within the prepare_items class ():
// Let’s get the number of items to be displayed.
// The default value is 20 , however the user can choose how much you want to appear
// Through the tab screen options.
$ Per_page = $ this-> get_items_per_page ( ‘ feeds_per_page ‘);
$ Per_page This variable will be used in place of a value (in the case of the initial section of this article 20 used as a value for the number of articles per page) .
Code Download
This was the last article in this series . I hope it was useful for many who develop plugins and themes for WordPress and with this series , may have contributed to the integral growth of the “harmonization” look and the use of native elements of the WordPress admin interface.


Please enter your comment!
Please enter your name here