Can I use the WP_List_Table class to render tables on a page?
I am currently using shortcodes to display a list of items obtained from a table and displaying it on a page of my website but since the list of information is very large, I want to add a page and in the future a small filtering menu for the records.
I found the WP_List_Table class in the worpdress documentation which, from what I understood, is a class that allows you to create tables with a list of elements but I have also read in some tutorials like this or this one in which they indicate that this class is used to create a list of elements but for the wordpress admin.
Can I use this class normally in the function my shortcode will render? Or is there any other class that is more appropriate, taking into account the functionalities that I wish to add in the future?
The function and the shortcode that I use to render the information is this:
function opt_menu_cactaceas_frontend() {
global $wpdb;
$tabla_cactaceas = $wpdb->prefix . 'cactaceas2';
$aspirantes = $wpdb->get_results("SELECT * FROM $tabla_cactaceas");
//echo '<table class="wp-list-table widefat fixed striped">';
echo '<table>';
echo '<thead><tr><th width="70%">Nombre Cientifico</th><th width="30%">Imagen</th></tr></thead>';
echo '<tbody id="the-list">';
foreach ( $aspirantes as $aspirante ) {
$genero = esc_textarea($aspirante->genero);
$especie = esc_textarea($aspirante->especie);
$subespecie = esc_textarea($aspirante->subespecie);
$autor = esc_textarea($aspirante->autor);
if ( $subespecie == '' ):
$nombreCactacea = "<i>$genero $especie</i> $autor";
else:
$nombreCactacea = "<i>$genero $especie</i> subsp. <i>$subespecie</i> $autor";
endif;
$imagen_cactus = wp_get_attachment_image( 263, 'thumbnail' );
echo "<tr><td><a href='#' title='$motivacion'>$nombreCactacea</a></td><td>$imagen_cactus</td></tr>";
}
echo '</tbody></table>';
}
//funcion - agrega el shortcode en la pagina que se le llame
add_shortcode('srt_code_add_list_cactaceas', 'formulario_registro');
The table so far is rendered like this:
The WP_List_Table class can be used on the frontend. However, the CSS for the WP admin may conflict with the CSS used on the frontend.
Frontend
The WP plugin contains 2 PHP files.
bxft-shortcode.php
<?php
/**
* BXFT - Shortcode
*
* @package BXFT\Shortcode
*
* Plugin Name: BXFT - Shortcode
* Plugin URI:
* Description: Creating a shortcode with WP_List_Table.
* Version: 1.0
* Author: Box
* Author URI: box@boxoft.net
* License: GPLv2
*/
add_shortcode( 'bxft-table', 'bxft_table_shortcode' );
function bxft_table_shortcode( $atts ) {
ob_start();
include_once plugin_dir_path( __FILE__ ) . 'class-bxft-table.php';
$template = ob_get_contents();
ob_end_clean();
return $template;
}
add_action( 'wp_enqueue_scripts', 'bxft_queue_stylesheet' );
function bxft_queue_stylesheet() {
wp_enqueue_style( 'bxft-table-shortcode-style', admin_url( 'css/wp-admin.css' ), array(), '1.0' );
}
class-bxft-table.php
<?php
if ( ! class_exists( 'WP_List_Table' ) ) {
require_once ABSPATH . 'wp-admin/includes/template.php';
require_once ABSPATH . 'wp-admin/includes/class-wp-screen.php';
require_once ABSPATH . 'wp-admin/includes/screen.php';
require_once ABSPATH . 'wp-admin/includes/class-wp-list-table.php';
}
class BXFT_Table extends WP_List_Table {
public function prepare_items() {
$data = $this->wp_list_table_data();
$per_page = 8;
$current_page = $this->get_pagenum();
$total_items = count( $data );
$this->set_pagination_args(
array(
'total_items' => $total_items,
'per_page' => $per_page,
)
);
// $this->items = $data;
$this->items = array_slice(
$data,
( ( $current_page - 1 ) * $per_page ),
$per_page
);
$columns = $this->get_columns();
$hidden = $this->get_hidden_columns();
$this->_column_headers = array( $columns, $hidden );
}
public function wp_list_table_data() {
$data = array(
array(
'id' => 1,
'name' => 'Dilan',
'email' => 'deverleighj@pen.io',
),
array(
'id' => 2,
'name' => 'Tanner',
'email' => 'tfleischeri@a8.net',
),
array(
'id' => 3,
'name' => 'Darrell',
'email' => 'dspurh@pen.io',
),
array(
'id' => 4,
'name' => 'Dudley',
'email' => 'droistoneg@umn.edu',
),
array(
'id' => 5,
'name' => 'Merrili',
'email' => 'mnutbeanf@tmall.com',
),
array(
'id' => 6,
'name' => 'Brana',
'email' => 'bcasonee@craigslist.org',
),
array(
'id' => 7,
'name' => 'Susannah',
'email' => 'sgolsbyd@netvibes.com',
),
array(
'id' => 8,
'name' => 'Darcey',
'email' => 'dpithiec@cmu.edu',
),
array(
'id' => 9,
'name' => 'Sofie',
'email' => 'sbroskeb@ca.gov',
),
array(
'id' => 10,
'name' => 'Joscelin',
'email' => 'jwestripa@php.net',
),
array(
'id' => 11,
'name' => 'Kalila',
'email' => 'kmacavaddy9@xing.com',
),
array(
'id' => 12,
'name' => 'Marie-jeanne',
'email' => 'mcocci8@1und1.de',
),
array(
'id' => 13,
'name' => 'Darnell',
'email' => 'dlamborne7@linkedin.com',
),
array(
'id' => 14,
'name' => 'Hugibert',
'email' => 'hhelgass6@icio.us',
),
array(
'id' => 15,
'name' => 'Anitra',
'email' => 'alongforth5@cmu.edu',
),
array(
'id' => 16,
'name' => 'Reinaldos',
'email' => 'rburchett4@simplemachines.org',
),
array(
'id' => 17,
'name' => 'Arlan',
'email' => 'adelph3@homestead.com',
),
array(
'id' => 18,
'name' => 'Harwell',
'email' => 'hturbefield2@sciencedaily.com',
),
array(
'id' => 19,
'name' => 'Mikey',
'email' => 'mmoakes1@reuters.com',
),
array(
'id' => 20,
'name' => 'Mira',
'email' => 'mmaciocia0@newsvine.com',
),
);
return $data;
}
public function get_hidden_columns() {
return array( 'id' );
}
public function get_columns() {
$columns = array(
'id' => 'ID',
'name' => 'Name',
'email' => 'Email',
);
return $columns;
}
public function column_default( $item, $column_name ) {
switch ( $column_name ) {
case 'id':
case 'name':
case 'email':
return $item[ $column_name ];
default:
return 'N/A';
}
}
}
function display_bxft_table() {
$bxft_table = new BXFT_Table();
$bxft_table->prepare_items();
?>
<div class="wrap">
<?php $bxft_table->display(); ?>
</div>
<?php
}
display_bxft_table();
I'm learning WP_List_Table by watching https://www.youtube.com/playlist?list=PLT9miexWCpPWD3BOrqHmwaXL2LLVb6kpg. Thanks for the author.