Friday, November 11, 2022
HomeWeb DevelopmentLearn how to Use “ACF Views” for Superior Customized Fields in WordPress

Learn how to Use “ACF Views” for Superior Customized Fields in WordPress


On this tutorial I’ll present you the way to use ACF Views; a very easy approach to show ACF customized fields on the entrance finish of your WordPress web site.

WordPress offers builders choices the place customized fields are involved, however in the event you’re in search of better usability ACF (Superior Customized Fields) is the plugin you want. 

ACF Views is a free plugin, however the Professional model unlocks every kind of additional options (use the promo code envato while you checkout for a 20% low cost!)

Learn how to Show ACF Fields on Your WordPress Entrance Finish

There are two methods we are able to do that: firstly utilizing PHP code, and secondly (the simpler choice) utilizing the ACF Views plugin. Let’s start with PHP:

Show ACF Fields Utilizing PHP

For the needs of this demo I’ve put in ACF and created some demo content material. I’ve an ACF group known as Web page extras. Because of a situation I’ve setup, any customized fields inside this group are solely seen if the publish sort is “web 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 within the WordPress admin, and I open a pattern web page, I’ll see this group of fields beneath the content material editor. As you may see within the screenshot above, there’s one subject on this case “Web page subtitle”, and we can provide it no matter textual worth we wish.

If we go to the entrance finish of the web site now, and that pattern web page particularly, we received’t see the worth we’ve simply entered. For that to occur we have to do some coding.

In our web page.php template, we are able to add the next:

On this case page_subtitle is the title of our customized subject. Now, the worth of no matter we save as our web page subtitle shall be outputted the place we positioned this code snippet.

Show ACF Fields Utilizing ACF Views Plugin for WordPress

As we’ve seen, it’s completely potential to show ACF content material utilizing code. However it is advisable know the precise code snippets, the place to place them, and precisely what every subject is known as. If you happen to’re unused to coding, you would possibly desire a better technique.

That’s the place ACF Views is available in!

acf views pluginacf views pluginacf views plugin

In an effort to use the ACF Views plugin, it is advisable have the Superior Customized Fields plugin put in already. Be certain each are plugins energetic.

Go to ACF Views Choices

In your WordPress Admin go to ACF Views, and right here you may create new views. In my case you’ll see I’ve already created 2 views:

views createdviews createdviews created

I’ll click on on the Web page extras view to see extra particulars about it.

ACF View Particulars

In my Web page extras view (which may be known as no matter we like, by the best way) you’ll see I’ve linked it to the Web page extras customized fields group I outlined earlier.

link to grouplink to grouplink to group

Beneath that, I then hyperlink up the customized subject I need to show (the Web page subtitle subject on this case) and hit Save, or Replace.

The Magic of Shortcodes

With that finished, you’ll see a collection of shortcodes exhibited to the precise, which you should use to show the sphere information. Copy whichever one you want, after which go to edit the web page the place you need to output the content material.

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

Right here we’ve added a shortcode block within the WordPress Gutenberg editor, and pasted the worth in.

shortcode pasted inshortcode pasted inshortcode pasted in

Simple! And all finished with out writing a single line of code.

Conclusion

ACF Views is a good code-free means of working with Superior Customized Fields in WordPress. Don’t overlook to make use of use the promo code envato while you checkout for a 20% low cost on the Professional model!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments