How to add ACF into the WP Portfolio markup?

Sometimes you may need to create Advanced Custom Fields (ACF) for custom requirements. These fields can be added to portfolio edit pages. Once added, ACF will appear on all portfolio types [Website, Video, Image, Single Page].

Here are the steps to add ACF to WP Portfolio markup –

Step 1 – Add required ACF to your site: You can do it with the external plugin or custom code. Save the meta key for ACF.
Step 2 – Add below code snippet into the child theme’s functions.php file. Note: Replace field-1 with your own field name.

/**
 * Add Extra rest field
 *
 * @todo Change the `prefix_` and with your own unique prefix.
 *
 * @since 1.0.0
 */
if( ! function_exists( 'prefix_add_post_meta' ) ) :
    
    // Add `field-1` for post type `astra-portfolio`.
    function prefix_add_post_meta() {
        register_rest_field(
            'astra-portfolio', // Post type.
            'field-1', // Post meta key.
            array(
                'get_callback' => 'prefix_rest_field_1',
                'schema'       => null,
            )
        );
    }
    add_action( 'rest_api_init', 'prefix_add_post_meta' );
endif;

// Callback of `field-1` for post type `astra-portfolio`.
if( ! function_exists( 'prefix_rest_field_1' ) ) :
    /**
    * Return meta value
    *
    * @since 1.0.0
    * @param  string $object     Rest Object.
    * @param  string $field_name Rest Field.
    * @param  array  $request    Rest Request.
    * @return mixed              Null or Site Featured Image.
    */
    function prefix_rest_field_1( $object, $field_name, $request ) {
        return get_post_meta( $object['id'], $field_name, 1 );
    }

endif;

Step 3 – Add ACF to the portfolio edit page: First copy the portfolio page template /includes/tmpl-responsive-view.php into the child theme. Then override it to add ACF at the position you want. You can access the ACF like –

data.items[ key ]['<your-meta-key>']

Use the above code to access and use ACF filed.