How to display ACF fields without coding

Developers use the Advanced Custom Fields (ACF) plugin on most WordPress websites. Throughout our career, we've seen only a few websites that didn't use ACF, and they were very specific. ACF has many field types, good UI for admins, and extensive docs for developers. So it's easy to get to grips with. And it may look like there's nothing as simple as a task to display ACF fields on the front end of a website. But in practice, it's usually done crudely and takes much more time than expected.

Issues with displaying ACF fields via code

<p><?php the_field('some_field'); ?></p>

So this very simple example above - displays a field. Generally, at a glance, it appears to be straightforward, right? But while developing some issues start to "appear".

Issue №1. Constantly visiting ACF groups in wp-admin

Firstly, it's a field name. Usually, with only the field label it's nearly impossible to know the field name. So every time you'll need to visit the list of field groups, find the relevant one, and check the field name.

Okay, it's sorted. Secondly, what about the return type?

It's fine if we're talking about a text field. But what if it's an image, select, or post? And here we've got a whole zoo. Besides the fact that there are many field types (which is good for sure) every type has different return formats. This means that in the same group, we need to also check the settings of the specific field.

It's okay if ID or Object (WP_Post) is returned, but what if it's an array? Like in the case with an image option. What keys does it have? For sure, when you're displaying ACF fields on a daily basis the names are always top of mind. But what if you've been busy with something else?

Issue №2. Always having to visit ACF docs

We've now reached the second issue. How to get details about the return format and keys of the returning array? Or how to get a label along with a value. In all such cases, we need to visit ACF docs for the related field type. The upside is that the documentation is very good, but the downside is that time is still wasted.

Issue №3. Syncing changes

Practice shows that developers amend existing fields much more often than you'd expect. For example, a field return type has changed. Not to mention field name and type, as that also happens. And it's necessary to make search through all the theme files to find the exact code pieces that get and display the field. So it becomes a real nightmare.

Also, someone could use double quotes in one case, another person could use single quotes somewhere else. And the field name can be short and perhaps not unique. Now try to find them all. Not much fun and it's very time-consuming.

Issue №4. (Optional). Spaghetti code

What haven't we seen? Especially in cases where changes are being made and when not creating a page from scratch. Then there's just heaps of spaghetti code in templates, it's unclear. And even with a big wish, how do you find the beginning and where does it end? In this case, I can't seem to find it.

In the best-case scenario, a developer writes something in the functions.php file by declaring a new shortcode and using that to display fields. Then pasting the shortcode in the target place. And to be honest, when you're amending such "strange" themes there's neither the time nor the will to change something. So you just create another one there and then try to forget what you've seen as soon as possible.

The issue with these functions.php snippets is that in a single day, they could become a file with six or seven thousand lines of code. Of course without structure, without beginning or end, and no clarity at all. What's the goal of this piece of code? Where is it being used? Who really knows?

I simply keep quiet about the outcomes of using these methods as I believe that nightmares will pop up when they're editing or debugging and optimizing. It's the same for everyone who's had to deal with it.

Issue №5. Styles and CSS conflicts

Developers usually do field markup off the cuff, and classes in the markup are derived from that. So they first appear in the mind. Unfortunately, only a few have heard about BEM, and even fewer use it.

In the worst case, developers add styles for the fields globally. And in the best case, for the target page only. So In the first case, there'll be an issue with unused CSS code. It means say hello to zero Google Page Speed. And to conflicts with other elements, as class names are too common. But in the second case, we have an issue with reusing on other pages.

Summary of the above

These issues slow down development time, and suddenly to display 4 fields a developer doesn't spend only a minute on it but ten! And this is besides the fact that the created output now also has many issues with it. Who is going to amend or support it? Very few.

Solution. Display ACF fields with shortcodes

So how can you get around these issues? BTW below I'll be talking about other shortcodes, not about the built-in ACF shortcodes. Unfortunately, they're only fit for use with primitive types of fields like string or number. And furthermore, they display only values, so it's still necessary to add markup.

Let me introduce the New (and Free) ACF Views plugin. The plugin is one of the ACF add-ons and allows to display selected ACF fields or Posts anywhere using shortcodes, HTML markup is created automatically by the plugin.

...and if your first thought was "a shortcode for displaying a value by a field name" - then you're wrong.

The ACF Views plugin allows you to create Views and Cards (ordinary CPT items inside) with which you can:

1. To choose ACF field(s) to display (with ACF View CPT)
   Single or multiple fields and the fields can be from different field groups. Chosen from a dropdown
2. Save the View, copy a shortcode
   It looks like this [acf_views view-id="2221" name="Car"]
3. Use the shortcode everywhere
   Chosen fields must be filled on a target object, where the shortcode is pasted, like a page or CPT item. Or you must use the object-id argument of the shortcode to define the id of the object that contains the data
4. Then optionally you can choose Posts and select a View to display (with ACF Card CPT)
   Posts can be chosen manually or by filters. Then the shortcode approach just like in the first case

During execution, the shortcode will be processed by the plugin and replaced with HTML markup that's automatically generated. This also depends on a field's type and field's value.

Benefits

The ACF Views plugin supports all field types, including images and selects. This makes the task much easier, saving you time, and solves all the issues mentioned above:

№1. Constantly visiting ACF groups in wp-admin - Solved

You select the fields from a dropdown, no need to worry about the fields' name or return format.

№2. Always having to visit ACF docs - Solved

The plugin automatically generates markup depending on the field type and return format of selected fields, and there's no need to write HTML markup.

№3. Syncing changes - Solved

The ACF Views plugin stores the field IDs and gets information about the fields dynamically from ACF. This means we can change the fields' as we'd like. Including the fields' name and type, not to mention the return format.

And no other updates will be necessary from our side. The markup will be always up to date.

№4. (Optionally). Spaghetti code - Solved

No chaos in function.php anymore. A separate item is available in the WordPress dashboard with a list of all Views. Also, you can define a name and short description for every View. Or even search if the list is long.

№5. Styles and CSS conflicts - Solved

Now we come to our favorite item. The HTML Markup is generated using the BEM method, so there are no more conflicts. Furthermore, every View has its own CSS code field where you can write styles for these fields.

So This CSS:

1. never creates CSS conflicts (BEM style + ID of the View) and
2. adds only on pages where the current View appears, so no global styles.

Summary

So using the free ACF Views plugin it's possible to display any ACF fields on the website front quickly and without creating issues for those who will need to amend/support it.

Below we attached a video tutorial that shows how to display ACF fields on a single page using the shortcode way. The video is common for all the ACF field types. More video tutorials on the official YouTube channel.

Also, there are text tutorials for different field types. You can see the links below.

• Link field
• File field
• Gallery field
• Image field

The plugin also plays well with any CPT, like WooCommerce Products. See the Woo tutorials below.

• How to display ACF fields on the Woo shop page
• How to add custom fields to the Woo product page

In addition, the Pro version is available. With the Pro, you get these extra features:

• HTML Markup can be edited
• Filter posts by meta and taxonomies. Use AJAX pagination
• Repeater field type supported
• Gallery field supports Masonry style and Lightbox
• Relationship and Post Object fields have extended support
• Custom Gutenberg blocks are generated on the fly
• Plugin’s shortcodes can be added to pages/CPT items without editing code

For Developers

Experienced developers will most likely ask, what about overhead? It's a wrapper and most likely it's much slower than ordinary coding. But that's actually wrong for a few reasons. The plugin's authors have paid special attention to the performance.

For example, they used JSON instead of meta fields for storing data in Views. And even published a test, that shows the difference in using of the code way and the plugin way with shortcodes. It's impossible to notice this with the naked eye.

User Interface

Below we've put several screenshots of the plugin we took, so you can see how the plugin's user interface looks. Simple, Intuitive, and Familiar.

Conclusions

So we've reviewed the disadvantages of the code approach. And reviewed the new way to display any ACF fields using shortcodes, which helps to avoid them.

We hope the article was useful for you and that the plugin will make your experience with ACF even better. So now you know how to display ACF fields anywhere and without any issues.