How to add Custom Fields to a Custom Post Type using the Advanced Custom Fields (ACF) WordPress Plugin

How to add Custom Fields to a Custom Post Type using the Advanced Custom Fields (ACF) WordPress Plugin

You may already know how to add the ACF custom options pages to the WordPress dashboard so now we are going to teach you how to take them a step further by adding them directly to a custom post type.  How to add custom fields to a custom post type using the Advanced Custom Fields (ACF) WordPress plugin and a PHP function.

Step 1: Setup and Attach the Advanced Custom Fields (ACF) Options Page to a Custom Post Type via a PHP Function

In order to add an Advanced Custom Fields (ACF) Options Page to your custom post type in the WordPress dashboard we will need to add a PHP filter to the WordPress functions file. Simply open your functions.php file then copy and paste the code below, please refer to the ‘Items to Note’ below for detailed setup instructions.

PHP

1
2
3
4
5
6
7
8
9
if( function_exists('acf_add_options_page') ) {
acf_add_options_sub_page(array(
'page_title'    => 'YOUR-PAGE-TITLE',
'menu_title'    => 'YOUR-MENU-TITLE',
'menu_slug'     => 'site-options-YOUR-SLUG',
'capability'    => 'edit_posts',
'parent_slug'   => 'edit.php?post_type=YOUR-CUSTOM-POST-TYPE',
));
}

Items to Note:

  • Make sure that you change where it says ‘YOUR-PAGE-TITLE’ to a custom page title of your choice.
  • Make sure that you change where it says ‘YOUR-MENU-TITLE’ to a custom menu title of your choice.
  • Make sure that you change where it says ‘YOUR-SLUG’ to a custom slug of your choice.
  • Make sure that you change where it says ‘YOUR-CUSTOM-POST-TYPE’ to the custom post type that you want to add your custom fields option page to.

Step 2: Create the Advanced Custom Fields (ACF) Field Group in the WordPress Dashboard to attach to your Custom Post Type’s Options Page

After creating your ACF Options Page for your Custom Post Type in Step 1, the next step is to create the Field Group with the ACF Plugin settings panel in the WordPress Dashboard and then attach it to your Post Type’s Options Page. Follow the step by step instructions below:

  1. Log in to the dashboard of your WordPress site
  2. Go to Custom Fields -> Add New
  3. Title your Field Group
  4. Add your desired custom fields
  5. Go to the Locations panel -> Show this field group if -> Select ‘Options Page’ -> Select ‘is equal to’ -> Select your options page
  6. Publish

After completing the above steps your newly create ACF Field Group should now be attached to your Custom Post Type’s Options Page.

How to Display the Advanced Custom Fields (ACF) for your Custom Post Type in the WordPress Theme Template File

In Part 1 of this Advanced Custom Fields (ACF) WordPress plugin tutorial series we taught you how to add custom fields to a custom post type using the Advanced Custom Fields (ACF) WordPress plugin and a PHP function.

Use PHP to display the custom fields for your custom post type in the WordPress theme template file

In order to display your custom fields on your actual WordPress site you will need to use PHP to access the global variable and retrieve them from the database. Open the archive theme template for your custom post type (ex. archive-YOUR-CUSTOM-POST-TYPE.php). Use the PHP code below as a base example for how to display your custom field, please refer to the ‘Items to Note’ below for detailed setup instructions.

PHP

1
<?php $YOUR-CUSTOM-FIELD = get_field('YOUR-CUSTOM-FIELD', 'option'); if ($YOUR-CUSTOM-FIELD) { echo $ YOUR-CUSTOM-FIELD; } ?>

Items to Note:

  • Make sure that you change where it says ‘YOUR-CUSTOM-FIELD’ to match the custom field name you used in the backend.
  • Please keep in mind that this is a basic example of how to output the custom field variable and you may need to modify it to suit your needs.