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.