How To Use ACF Pro With Avada

Advanced Custom Fields Pro is a WordPress plugin which allows you to add extra content fields to your WordPress edit screens. These extra Custom Fields include repeatable blocks, intuitive galleries, custom settings pages and reusable fields, and allow you to build websites faster and educate your clients quicker.
As the plugin name indicates, it is a pro tool that can be a huge aid in customizing the Avada experience even further, to anything you envision. Below we provide you the direct link to the ACF PRO docs the developer maintains, and then below that, we offer a real use example of the plugin.
ACF Pro DocumentationACF Pro is a third party plugin, and is fully maintained by the creator Elliot Condon. ThemeFusion is not affiliated with the ACF PRO Plugin – we only bundle it with our theme so our customers have the ability to use it. Therefore, all documentation for the plugin can be found on the vendor』s website. Please click the button to be directed to the full online documentation resources.
ACF Pro DocumentationPlugin UpdatesACF Pro is an Avada bundled plugin and as of Avada 5.4.1, it can be updated independent and outside of an Avada theme update. The update notification will be visible and can be accessed via the Avada > Plugins section.
Example Usage of the pluginSuppose you want to add more fields to the Project Details of Avada』s single portfolio posts. ACF Pro will make that very easy. As an example we will add a new image field, that let』s you present newly created logos of your clients and a file upload field, where a detailed project description could be downloaded as PDF.
Please see the steps below for a short How To. On the right you can see screenshots for the most important steps and what it should look like for you.
Step 1 – In your WP Dashboard click on Custom Fields > Add New. Create a field group and set a name, e.g. Portfolio Fields, and in the Location rules set the post type where the field options should show to Portfolio.
Step 2 – Click the + Add Field. On the opening UI, add a label, e.g. New Logo. The field name will be auto inserted, but you can also change it to what you prefer. Set the Field Type setting to Image and the Return Value setting to Image ID. The image type will make sure that on portfolio post edit screens you』ll find a media dialog button, so that you can add/upload an actual image. And the return value is, what will be used in your custom template later on, that renders the newly added fields.
Step 3 – Add second field, assign e.g. the name Project Description to it, set the Field Type setting to File and the Return Value setting to File URL. This will create a file dialog field and in the template we』ll create below, the actual URL to the file will be returned.
Step 4 – Save the newly created field group.
Step 5 – Open any portfolio post and look for the newly created Portfolio Fields meta box below Fusion Builder. This will be displayed on all portfolio post edit screens now, and only on those, as we limited the field group to the Portfolio post type. From the option dialogs choose a logo image and also a file. Then save the post.
Step 6 – Next we have to create the template to actually render our newly created and populated fields. In order to do that we』ll use the
Copy to Clipboardfusion_after_portfolio_side_content 1fusion_after_portfolio_side_content action hook. You can put the code snippet below to your child theme』s
Copy to Clipboardfunctions.phpxxxxxxxxxx1 1functions.phpCopy to Clipboardadd_action( 'fusion_after_portfolio_side_content', 'add_fields_to_single_portfolio_post' );
function add_fields_to_single_portfolio_post() {
$imgae_id = get_field( 'new_logo' );
$image = wp_get_attachment_image_src( $imgae_id, 'full' );
?>

6 7

11 12​13 14 15

19 20​21 <?php22}What the snippet does is, to retrieve the contents of our custom fields with the
Copy to Clipboardget_field()xxxxxxxxxx1 1get_field() function (this is a function native to ACF Pro plugin, see more info here). Then it loads the actual image of our logo field with WP native functions and renders it with the correct markup for the Project Deatils fields. Similar is done for the detailed project description, but this time we render a link tag, as our fields holds a PDF.
Step 7 – Load the front end of the portfolio post to which you have already added field values and you can see, that our two new fields have correctly been added.
Step 8 – Now you can add field values to all your other portfolio items.
Before custom field addition
Steps to setup new custom fields
After custom field addition