Please wait...

Creating Tables in WordPress based on serialized PHP arrays

Video versionA video overview of PHP array-based wpDataTables

Example of a PHP array-based wpDataTablewpDataTables Table created from PHP array

The format of the serialized array should be the following: 2D-array, where the parent level is an indexed array, and the second level is an associative array. Parent array entries will be parsed as rows, child array keys will be parsed as column headers, and child array values as cell values.

If you’re a developer, or are at least somewhat familiar with PHP, you may find that standard input data types (Google Spreadsheet, Excel, CSV, MySQL query) are not flexible enough for your purposes. You may want to prepare the table data “on the fly”, by depending on some variables in the URL, or  use some other complex logic. Since we do not want to limit your freedom with wpDataTables, we introduced serialized PHP arrays as one of the data source alternatives.

In this example, we are going to prepare a PHP file that returns ID’s, titles, and text previews from this documentation section using WP Query. This can also be thought of as a WordPress integration demo.

Let’s view the resulting table first, and then show the steps required to prepare it.

Please note: if your data set is excessively large (many thousands of rows), a serialized PHP format for creating a wpDataTable would not be a good solution since the page generation time and size would significantly increase. MySQL-based wpDataTables with server-side processing is the best option for large datasets.

Instructions to create the table

<?php

// Initializing the WordPress engine in a stanalone PHP file
include('../wp-blog-header.php');

header("HTTP/1.1 200 OK"); // Forcing the 200 OK header as WP can return 404 otherwise

// Preparing a WP_query
$the_query = new WP_Query(
array(
'post_type' => 'page', // We only want pages
'post_parent' => 244, // We only want children of a defined post ID
'post_count' => -1 // We do not want to limit the post count
// We can define any additional arguments that we need - see Codex for the full list
)
);

$return_array = array(); // Initializing the array that will be used for the table

while( $the_query->have_posts() ){

// Fetch the post
$the_query->the_post();

// Filling in the new array entry
$return_array[] = array(
'Id' => get_the_id(), // Set the ID
'Title' => get_the_title(), // Set the title
'Content preview with link' => get_permalink().'||'.strip_tags( strip_shortcodes( substr( get_the_content(), 0, 200 ) ) ).'...'
// Get first 200 chars of the content and replace the shortcodes and tags
);

}

// Now the array is prepared, we just need to serialize and output it
echo serialize( $return_array );

?>

You first need to prepare a PHP file that fetches and returns the data you want.

In this example, we prepared a standalone PHP file that uses the WordPress WP_Query method to fetch all pages that belong to the documentation, and returns a serialized array that can be used to generate a table. You can view at the code on the left.

Some WP installations return a 404 code when serving standalone PHP files. To prevent this from happening, we force the 200/OK HTTP code (wpDataTables will only render the data if it receives the 200/OK HTTP code).

When the code is prepared, paste it to a PHP file, and copy the URL for use in the next step.

Create a new wpDataTable and paste your PHP file location

Create a table linked to an existing data source

1. Go to wpDataTables -> Create a Table and choose Create a table linked to an existing data source option.

serialized php array input

2. Define a name for your new wpDataTable in the input to help you to find it later.
3. Select the “Serialized PHP array” option in the “Input data source type” select box.
4. Paste the URL of the PHP file that you prepared in step 1 to the “Input file or URL” input field.
5. Press “Apply” so, wpDataTables will read the table data and initialize the columns metadata from the provided URL.

(Optional) - Define additional settings for the table and columns

column type url

Once you’ve clicked “Apply” for the first time, yourwpDataTable is created and available to be inserted in posts or pages; but, you might choose to define additional settings for the table in general, or for some of its columns. For this table above we defined only one additional setting: set “Content preview with link” column type to “URL link“.

When you’ve done with the configuration, click “Apply” once again so wpDataTables will store your settings.

Insert your PHP array based wpDataTable in a WordPress post or page

Inserting wpDataTables shortcode on page or post

Now the table is prepared and the only thing we need to do is to insert it in our post or page.

  1. Open or create a new post or page.
  2. Put the cursor in the position where you wish to place the wpDataTable.
  3. Click the “Insert wpDataTable” button in the editor.
  4. Locate the wpDataTable that you created in the steps 1-3 and click OK.
  5. Save the post or page and open it in the front-end to see the result.

As an alternative, you can paste the generated wpDataTable shortcode manually.

Do you have the best

essential plugins installed?
Grab the best 46 plugins. Tested and sorted.

Plugins for SEO, Caching, Security, Design and UX, Stats & analytics, Social sharing. Only the best ones.

By clicking "subscribe" you consent that the information you provide via this form will be securely processed and stored in compliance with EU privacy laws (GDPR).

Thank you for subscribing!

Please check your inbox to download the WordPress goodies.