Advanced Custom Fields (ACF) is a powerful and flexible plugin for creating and managing custom fields in WordPress posts, pages, or products. While ACF Pro excels at backend management, displaying this custom data on the frontend requires some additional coding. In this comprehensive guide, we’ll walk you through the process of adding custom fields and displaying ACF data on your WordPress site.
How to Use ACF to Create and Display Custom Post Meta in WordPress
Step 1: Install ACF and Create Your Custom Fields
Download and install the latest Advanced Custom Fields Pro (ACF) plugin. Then, click on ‘ACF‘ in the WordPress admin menu and start creating custom fields. In this tutorial, we will provide an example of how to create a “Download Link” field.
After creating and saving the field, you will have a custom field in the post with the field name ‘link_download’. We will use this to display Advanced Custom Fields data on the frontend. Since a link should have a title, we will click ‘Add Field’ to create one more field for the title:
Continue, item “Settings”. You can configure the condition to use only this “Group Field” which will be used to display Advanced Custom Fields data for the post or product or page you want.
Remember, this is just a basic example. ACF offers a wide variety of field types, including text areas, select boxes, checkboxes, and more.
Step 2: Display ACF Fields on the Front End (product/post/page)
To display your custom fields on the front end of your WordPress site, we’ll leverage PHP and the the_content filter hook to insert them into your post content.
Edit functions.php:
Open the functions.php file of your active WordPress theme.
Add the Following Code:
<?php
// Add custom Theme Functions here
add_filter('the_content', 'render_html_post_content');
function render_html_post_content($content) {
$post_id = get_the_ID();
if (!isset($post_id)) {
return $content;
}
$link_download = get_field('link_download', $post_id);
$link_title = get_field('link_title', $post_id);
if (!empty($link_download) && !empty($link_title)) {
$link_html = '<h3>Link download: ';
$link_html .= '<a href="' . esc_url($link_download) . '">' . esc_html($link_title) . '</a>';
$link_html .= '</h3>';
return $content . $link_html;
}
return $content;
}
This code retrieves the values of your custom fields using get_field() and appends them to the end of your post content. It includes checks to ensure the fields have values and to prevent unnecessary processing on posts where the fields aren’t used.
Screenshot:
Advanced Custom Fields Pro empowers you to create custom fields and display them seamlessly on your WordPress website. This flexibility allows you to build unique websites and extend the functionality of your WordPress content management system.
