In this tutorial I’ll show you how to use ACF Views; a really easy way to display ACF custom fields on the front end of your WordPress website.
WordPress gives developers options where custom fields are concerned, but if you’re looking for greater usability ACF (Advanced Custom Fields) is the plugin you need.
How to Display ACF Fields on Your WordPress Front End
There are two ways we can do this: firstly using PHP code, and secondly (the easier option) using the ACF Views plugin. Let’s begin with PHP:
Display ACF Fields Using PHP
For the purposes of this demo I’ve installed ACF and created some demo content. I have an ACF group called Page extras. Thanks to a condition I’ve setup, any custom fields within this group are only visible if the post type is “page”.
If I now go to pages in the WordPress admin, and I open a sample page, I’ll see this group of fields underneath the content editor. As you can see in the screenshot above, there’s one field in this case “Page subtitle”, and we can give it whatever textual value we want.
If we visit the front end of the website now, and that sample page specifically, we won’t see the value we’ve just entered. For that to happen we need to do some coding.
In our page.php template, we can add the following:
<?php the_field('page_subtitle'); ?>
In this case page_subtitle is the name of our custom field. Now, the value of whatever we save as our page subtitle will be outputted where we placed this code snippet.
Display ACF Fields Using ACF Views Plugin for WordPress
As we’ve seen, it’s perfectly possible to display ACF content using code. But you need to know the right code snippets, where to put them, and exactly what each field is called. If you’re unused to coding, you might prefer an easier method.
That’s where ACF Views comes in!
In order to use the ACF Views plugin, you need to have the Advanced Custom Fields plugin installed already. Make sure both are plugins active.
Go to ACF Views Options
In your WordPress Admin go to ACF Views, and here you can create new views. In my case you’ll see I’ve already created 2 views:
I’ll click on the Page extras view to see more details about it.
ACF View Details
In my Page extras view (which can be called whatever we like, by the way) you’ll see I’ve linked it to the Page extras custom fields group I defined earlier.
Underneath that, I then link up the custom field I want to display (the Page subtitle field in this case) and hit Save, or Update.
The Magic of Shortcodes
With that done, you’ll see a selection of shortcodes displayed to the right, which you can use to display the field data. Copy whichever one you need, and then go to edit the page where you want to output the content.
Here we’ve added a shortcode block in the WordPress Gutenberg editor, and pasted the value in.
Easy! And all done without writing a single line of code.
Conclusion
ACF Views is a great code-free way of working with Advanced Custom Fields in WordPress. Don’t forget to use use the promo code envato when you checkout for a 20% discount on the Pro version!