How to Display ACF Fields Data on a Single Post Page in a Table

Advanced Custom Fields (ACF) is one of the most popular WordPress plugins for managing custom meta fields. In this tutorial, we will learn how to display ACF fields dynamically in a table on a single post page. We’ll use a custom Gutenberg block and PHP to fetch and render these fields elegantly.

Why Display ACF Fields in a Table?

• Clarity: Displaying ACF fields in a table ensures data is organized.
• Flexibility: Easily customize the table structure.
• Extensibility: Use WordPress hooks to control visibility and formatting.

Let’s build our block!

---

Step 1: Create a Custom Gutenberg Block Plugin

First, set up your plugin directory.

Folder Structure:

custom-acf-table-block/
├── src/
│   ├── index.js
│   ├── block.js
│   ├── editor.scss
│   ├── style.scss
├── custom-acf-table-block.php
├── package.json
├── webpack.config.js

1.1. Plugin File (custom-acf-table-block.php)

<?php
/**
 * Plugin Name: Custom ACF Table Block
 * Description: Display ACF fields in a table on single post pages.
 * Version: 1.0
 * Author: Your Name
 */

function custom_acf_table_block_register() {
    register_block_type(__DIR__, array(
        'render_callback' => 'custom_acf_table_block_render'
    ));
}
add_action('init', 'custom_acf_table_block_register');

function custom_acf_table_block_render($attributes) {
    global $post;
    if (!$post) return '<p>No post found.</p>';

    $meta_fields = get_post_meta($post->ID);
    $excluded_keys = apply_filters('custom_acf_table_exclude_keys', ['_']);

    $output = '<table class="custom-acf-table">';
    $output .= '<thead><tr><th>Field</th><th>Value</th></tr></thead><tbody>';
    $has_visible_fields = false;

    foreach ($meta_fields as $key => $value) {
        if (strpos($key, '_') === 0 || empty($value)) continue;
        $key = apply_filters('custom_acf_table_display_meta_key', $key, $post->ID);
        $value = apply_filters('custom_acf_table_display_meta_value', implode(', ', $value), $key, $post->ID);

        $output .= '<tr><td>' . esc_html($key) . '</td><td>' . esc_html($value) . '</td></tr>';
        $has_visible_fields = true;
    }

    if (!$has_visible_fields) {
        $output .= '<tr><td colspan="2">No visible fields found.</td></tr>';
    }
    $output .= '</tbody></table>';
    return $output;
}

---

Step 2: Create Block JavaScript

2.1. index.js

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';
import './style.scss';

registerBlockType('custom-acf-table-block/table', {
    title: 'ACF Table Block',
    icon: 'table-col-after',
    category: 'widgets',
    edit: () => {
        return (
            <div {...useBlockProps()}>
                <h4>ACF Table Block</h4>
                <p>This block displays ACF fields in a table.</p>
            </div>
        );
    },
    save: () => null, // Dynamic rendering
});

2.2. editor.scss & style.scss

.custom-acf-table {
    width: 100%;
    border-collapse: collapse;
}
.custom-acf-table th, .custom-acf-table td {
    padding: 8px;
    border: 1px solid #ddd;
}
.custom-acf-table th {
    background-color: #f4f4f4;
}

---

Step 3: Add Filters for Customization

3.1. Exclude Specific Fields

add_filter('custom_acf_table_exclude_keys', function($keys) {
    $keys[] = 'secret_field';
    return $keys;
});

3.2. Format Specific Field Value

add_filter('custom_acf_table_display_meta_value', function($value, $key) {
    if ($key === 'price') {
        return '$' . number_format($value, 2);
    }
    return $value;
}, 10, 2);

---

Step 4: Build the Block

Run the following commands in your terminal:

npm install
npm run build

Activate your plugin in the WordPress admin dashboard.

---

Step 5: Add the Block in a Post

1. Go to a post in the WordPress editor.
2. Add the ACF Table Block.
3. Publish or Update the post.
4. View the post on the front-end.

🎯 Expected Output:

A neatly styled table displaying only user-defined ACF fields, excluding system fields and empty fields.

---

Conclusion

You’ve successfully built a custom Gutenberg block that dynamically displays ACF fields in a table. With hooks and filters, the block is highly customizable and developer-friendly.

Feel free to tweak the styles, add more filters, and adapt this block to your project’s needs!

Happy coding! 🚀