Friday, November 11, 2022

How to Use “ACF Views” for Advanced Custom Fields in WordPress

How to Use “ACF Views” for Advanced Custom Fields in WordPress

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. 

ACF Views is a free plugin, but the Pro version unlocks all kinds of extra features (use the promo code envato when you checkout for a 20% discount!)

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”.

screenshot of the custom fields group admin dashboardscreenshot of the custom fields group admin dashboardscreenshot of the custom fields group admin dashboard

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:

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!

acf views pluginacf views pluginacf views plugin

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:

views createdviews createdviews created

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.

link to grouplink to grouplink to group

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.

Shortcodes available in the sidebarShortcodes available in the sidebarShortcodes available in the sidebar

Here we’ve added a shortcode block in the WordPress Gutenberg editor, and pasted the value in.

shortcode pasted inshortcode pasted inshortcode pasted 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!


No comments:

Post a Comment