Creating an ACF View

Use ACF View item to display ACF fields for a specific post/page/CPT item.

Step by step

  1. 1.
    Visit the ACF Views tab in WordPress backend.
  2. 2.
    Click on the ‘Add New’ button.
  3. 3.
    Enter a Name for your View.
  4. 4.
    In the View Settings Basic tab enter a description in the Description text area. Note: This is visible to admins only.
  5. 5.
    Enter your custom CSS classes in the CSS classes text field.
  6. 6.
    Click the ‘Add Field’ button in the Fields section.
  7. 7.
    In the Field tab select the field Group from the list.
  8. 8.
    In the Field dropdown select the ACF field to assign it.
  9. 9.
    Enter a Label for your field as prefix (if needed).
  10. 10.
    Repeat steps 6 to 9 until all the fields have been assigned.
  11. 11.
    Scroll up and Click on the ‘Publish’ button to save and publish your View.
  12. 12.
    Select the View Settings Advanced tab and paste your CSS Code.
  13. 13.
    In the same Advanced tab Custom Javascript code can be added in the JS Code field.
  14. 14.
    In the right sidebar in the Shortcode Widget Click ‘Copy to clipboard’ to copy the generated shortcode for your View.
  15. 15.
    Paste the shortcode in your page, post or theme section.
  16. 16.
    Fill the fields as required, then click 'Publish' or 'Update' to save your page/post.
  17. 17.
    Visit your page to see the result.
Note: When you assign new fields to your view the shortcode will automatically display those fields without you having to paste a new shortcode in your theme or page section.
Note: Restrict visibility of an ACF View by using user-with-roles="ROLE1,ROLE2" user-without-roles="ROLE1,ROLE2" shortcode arguments.

Watch the video