Links

Creating an ACF Card

Create an ACF Card to display a set of posts or CPT items and their ACF fields.

Step by step

  1. 1.
    Visit the ACF Views tab in WordPress backend.
  2. 2.
    Switch to the ACF Cards tab.
  3. 3.
    Click on the ‘Add New’ button.
  4. 4.
    Enter a Name for your Card.
  5. 5.
    In the Card Settings Basic tab enter a description in the Description text area. Note: This description is visible to admins only.
  6. 6.
    Enter your custom CSS classes in the CSS classes text field.
  7. 7.
    In the ACF View dropdown, select your ACF View to assign it to the Card.
  8. 8.
    Switch to the Filters tab.
  9. 9.
    In the Post Type dropdown, select the post type to filter by that type.
  10. 10.
    In the Post Status dropdown, add one or multiple items from the list. Note: Leave the default ‘Published’ status to only show published post, page or CPT items.
  11. 11.
    Use Maximum number of posts field to limit the amount of posts shown.
  12. 12.
    In the ‘Pool of posts’ dropdown you can manually select posts to show. Note: This will then show ONLY selected posts.
  13. 13.
    For Exclude posts you can manually exclude posts from your Card. Warning: Don’t use together with ‘Pool of posts’.
  14. 14.
    Turn on the Ignore Sticky Posts option (if needed).
  15. 15.
    Switch to the Sort tab.
  16. 16.
    For the Sort by dropdown, sort posts by date by selecting ‘Date’ from the list.
  17. 17.
    Choose Ascending or Descending for Sort order.
  18. 18.
    Click on ‘Update’ to save and publish your Card .
  19. 19.
    In the right sidebar in the Shortcode Widget Click ‘Copy to clipboard’ to copy the generated shortcode for your Card.
  20. 20.
    Paste the shortcode in your page, post or theme section.
  21. 21.
    Visit the page to see the result.
Note: Adding new fields to your assigned ACF View will automatically include those fields in your ACF Card without you having to copy the shortcode into place again.
Note: Restrict visibility of an ACF Card by using user-with-roles="ROLE1,ROLE2" user-without-roles="ROLE1,ROLE2" shortcode arguments.

Watch the video