How to Add Custom Fields (ACF) & Display Data in Post WordPress

Advanced Custom Fields is really flexible to create and manage custom fields in posts, pages or products in WordPress. ACF Pro is mainly focused on creating and managing custom fields in the backend. This includes creating custom fields, displaying rules, and storing data.

However, to display data from custom fields created with ACF Pro on the front end, you will need to code it yourself or customize your interface. In this article ItsmeIT shares how to add custom fields and display Advanced Custom Fields (ACF) data outside the Frontend like on articles or products…

How to Add Custom Fields & Display Data (ACF) in Post or Product WordPress

Step 1: Install the plugin and create your own fields

Download and install the latest Advanced Custom Fields Pro (ACF) plugin. Then click on ACF in the menu and start creating custom fields. In this tutorial, ItsmeIT will give an example to create a “Download Link” field.

After creating the field and saving it, you will have a custom field in the article with the field name “link_download”, we will rely on it to be able to display Advanced Custom Fields data to the front. Since a link will have to come with a title for it. So ItsmeIT will click “Add Field” to continue creating one more field to save 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.

Step 2: How to use Advanced Custom Fields (ACF) to add data

After completing step 1, you can now open edit or add a new post or product. Scroll down to the bottom you will see “Field Group” of ACF. Here you can add your custom data.

Note that this is an illustrative example to get and display data from Advanced Custom Fields (ACF) custom fields outside the front like posts or products. It is similar to other schools. You can create “Field Type” like textarea, select, checkbox, WYSIWYG Editor…

Step 3: Display the ACF Fields outside the product or article page

In this tutorial, ItsmeIT will use PHP code and leverage a the_content hook available in WordPress to insert custom data into Wordpress posts.

Open the functions.php file in the theme you are using and start coding. Now look back at step 1, after creating “Field Group”, ItsmeIT already has 2 fields named link_download and link_title. Thereby we will use the function get_field to call it and display the data as follows:

<?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 .= '</h2>';
        return $content . $link_html;
    }

    return $content;
}

The code above ItsmeIT used the_content and added custom content from Advanced Custom Fields (ACF) at the end of the article. Along with the conditions execute the code only if ACF has data in the article and only display it according to that article’s Purpose so that it doesn’t affect the performance of other articles. And the screenshot below is the result.

With Advanced Custom Fields Pro, you have the flexibility to create and manage custom fields and display custom data on your WordPress site. This helps you create custom websites and extends the capabilities of your CMS content management system.

Link download: Advanced Custom Fields Pro | Full Document (ACF)