This members-only tutorial provides the steps to

  • add a custom field group having a `venue` repeater field with `date` and `venue` sub fields using ACF Pro
  • add the PHP necessary to display the rows of data in a Code Block in the Template for single posts in the HTML structure needed by DataTables
  • load DataTables on single posts and initialize it on the table

to display rows of repeater field in the frontend in an instantly searchable responsive table with pagination support in Oxygen.

By the end of this tutorial, you would have something like this:

Backend:

Frontend:

Step 1

Install and activate ACF Pro.

Go to Custom Fields > Add New.

Add a Field Group named say, "Post Meta".

Add a venue repeater-type field having date and location sub fields.

Here (mirror) is an export of the field group from my test site so you can import the entire field group in just a few clicks.

Step 2

Edit your Posts and add as many rows of venue data (date and location) as you need.

Step 3

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site's /wp-content/plugins/my-custom-functionality-master.

Upload datatables.min.css to the plugin's assets/css directory.

Upload datatables.min.js to the plugin's assets/js directory.

Edit plugin.php and replace the content of custom_enqueue_files() function with

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($27/month).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: