Advanced Custom Fields Tips and Tricks

ACF is the ultimate plugin for me when it comes to custom theme development; this is a swiss army knife for me which helps to make better themes with less effort. I use it from version 4.0, and I’m more than satisfied. I’ve built a massive amount of websites with it without any problem.

If you use ACF or want to use it let me give you some information and show some practices, features what I use on a daily base.

Do I Need the Pro Version?

The pro version comes with some extra field like the repeater, gallery and the flexible-content. For me, the most useful is the repeater which makes it possible to add infinite fields or groups.

The prices of ACF is friendly for a developer license you have to pay $100 on time. The developer(s) of this plugin deserve more because of the quality and the support. Honestly, finding a product with this proper documentation and support forum is hard.

In my opinion, you need a pro version right now! In this article, I refer to this.

Set Metadata to Everywhere

Set any field to any part of WP. Need some new data at your user’s profile? Worry not just set the location of the display to user form. Although to get the data is a little bit different.

Do you have a custom page template and you want to add custom fields to it? Not a problem, set the location to the specific page template. Attach the field to the templates is an excellent way to make the translation of the site less painful.

Set the field group location to a template.

Make Layouts Easily in the Admin Area

By default in WordPress the main fields are the title and the content which is enough in case of a blog post, but in the case of a contact page often we need more.

Using ACF, we can hide all of the blocks/sections like page options, comments, content and so on except the title field. After we bury them, we can declare new custom boxes. We can make any structure as we wish. We can use tabs, repeaters, flexible elements, and ultimately create a new editorial section.

Set Up Your Theme Options

Almost every one of my custom pages gets a general options page where the user can set Analytics code, slider options or footer text.

Advanced Custom Fields give you an easy option to create option page and attach custom fields to them. All you have to do is to register the page(s) with the following code:

if( function_exists('acf_add_options_page') ) {
    
    acf_add_options_page(array(
        'page_title'     => 'Theme General Settings',
        'menu_title'    => 'Theme Settings',
        'menu_slug'     => 'theme-general-settings',
        'capability'    => 'edit_posts',
        'redirect'        => false
    ));
    
    acf_add_options_sub_page(array(
        'page_title'     => 'Theme Header Settings',
        'menu_title'    => 'Header',
        'parent_slug'    => 'theme-general-settings',
    ));
    
    acf_add_options_sub_page(array(
        'page_title'     => 'Theme Footer Settings',
        'menu_title'    => 'Footer',
        'parent_slug'    => 'theme-general-settings',
    ));
    
}

After this, you need to add the fields to the options page.

To get data from a global field on an options page you need to use option as a second parameter when you call the usual functions.

Using option pages, we can create content which is global or don’t relate anywhere else. If you have a custom post type events and you want to declare some global options to the events you can create a new page under the events menu like so:

if( function_exists('acf_add_options_page') ) {
    
    acf_add_options_sub_page(array(
        'page_title'     => 'Event Page Content',
        'menu_title'    => 'event-page-content',
        'parent_slug'    => 'edit.php?post_type=events',
    ));

}

Post Data from The Front-end

Using acf_form_head() function to register the necessary dependencies and the acf_form() function to set up the form you can create front-end forms with Advanced Custom Fields.

<?php
    acf_form_head(); 
    get_header();
?>

    ...

    <?php
        acf_form(array(
            'post_id'		=> 'new_post',
            'post_title'	=> true,
            'post_content'	=> false,
            'new_post'		=> array(
                'post_type'	=> 'event',
                'post_status'	=> 'draft'
            ),
            'submit_value' => __("Send", 'acf'),
            'updated_message' => __("Thank you for your event post!", 'acf'),
            'uploader' => 'basic'
        ));
    ?>

    ...

<?php get_footer(); ?>

Posting from the front-end can be useful if you want to handle some of the parts of your site on front-end like an event submission. In this case, you need a custom post type for the events and a properly parameterized form like so:

The benefit of this technique that you don’t have to send your users to the WP admin and you don’t have to build your form.

Read Fields from Files with acf-json

I think this function is just amazing from a lot of perspectives. If you create a folder in your theme root named acf-json ACF will save all of your field groups and field settings there in a JSON format. If you this format the plugin first will check this local cache file and not call the database to query the fields.

It is efficient because of the less database call, and it is developer friendly because you can submit the fields into your git repository so can share it. ACF can sync these fields in the main list page manually from the JSON file which is needed if there is a change because we can easily create desync.

Handle Google Map and Add an API Key

ACF comes with a Google Map field which is handy because most of the website needed a map at least in the contact page. Google offers an API based system, so you need a key and need to set up in ACF. You can do this with the following snippet using acf/init filter:

function my_acf_init() {
    
    acf_update_setting('google_api_key', 'xxx');
}

add_action('acf/init', 'my_acf_init');

What About Gutenberg?

Gutenberg is here and changes the WordPress development in overall. The big question was how it would affect plugins like ACF. Using Gutenberg editor, we can still use custom fields added into our editor but can we create blocks too? It seems so!

Coming with the following version (5.8) we get potent methods to create blocks for the editor too, and this is awesome.

A lot of theme developer fear the new syntax that comes with the new editor, but ACF could be a great tool to make our life easier.

More information, please check out this post from the official blog!