"You don't know about Advanced Custom Fields? Without ACF, I definitely wouldn't be using WordPress anymore." That's the message a colleague sent to me over Slack a few weeks ago. He's a developer and I'm a designer. I realized at this point ACF is something I wanted to - and needed to - know more about!
WordPress itself already offers a wide range of functions. Advanced Custom Fields allows you to extend these functions much further and even for free in the standard version. They give you full control over the content of your website.
In the WordPress backend, we can find generic fields for posts and pages including title, content, date, and author. Advanced Custom Fields, or the plugin mentioned below, allow you to fully customize and adapt your WordPress posts and pages and thus the content of your site.
This makes almost anything possible with WordPress - Advanced Custom Fields is basically tuning for WordPress.
When do I need Advanced Custom Fields?
In a nutshell: You'll probably need Advanced Custom Fields when the basic elements in the WordPress backend aren't enough for what you're trying to do. Perhaps you're faced with a challenge that can only be solved partially, or not at all, with posts and pages.
Depending on your customer's requirements, such a situation could easily come up. If you're a web designer, you may have already encountered such issues yourself.
In my case, for example, I needed to build a search function with filters. This wasn't just a simple text search that looks for any matching content on the entire site, but a search in which specific data can be entered via a form. The user should have various filters available to choose from. It was supposed to include, among others, the following:
- Name (text field)
- Postcode (text field)
- Country (drop down)
- Certificates (checkbox)
We'll come back to this search function later. This is what made me consider using Advanced Custom Fields (ACF) for this case. It's simply not possible to create such a search function with the basic elements included in WordPress without ACF.
So I started looking for a way I could create this filter search using Advanced Custom Fields.
The eponymous plugin in the official WordPress plugin directory is from Australian developer Elliot Condon. He works very actively on it and is constantly developing the plugin further to include new features. If you want to stay up to date with it, you can follow ACF on Twitter.
If you've already taken the plunge and use the block editor (Gutenberg) in WordPress 5.0 onwards, there are also Advanced Custom Fields blocks for the new editor.
The ACF plugin is currently active on well over one million websites. It's been tested extensively and works perfectly with the latest WordPress versions. The plugin has already received an impressive 1,000+ 5-star ratings. This compares to a measly 16 1-star reviews - most likely from users who gave up after a (very) short time.
You do need to have patience with plugins of this kind and spend some time learning how they work. Of course, I've also only scratched the surface of what's possible with Advanced Custom Fields. While there are plugins that you install and they then run by themselves in the background, I want to emphasize that ACF doesn't belong to that category. You have to actively participate in shaping what you're doing and recognize the overall connection between database, backend, and frontend.
Another crucial part of this rather technical plugin is the support.
I've not needed to contact the support myself up to now for one simple reason: The first-class documentation, covering everything from field types, functions, filters, FAQ, and much more.
I mentioned earlier that you need to be active in shaping your work with ACF. This also means that in certain cases ACF on its own won't be of much use to you. Sometimes, you'll need to use it in combination with Custom Post Types to get more options.
The first question is: What is a (normal) post type?
The two best-known post types in WordPress are pages and (blog) posts. You decide which post type is the most appropriate for every new piece of content for your site. This decision depends on various factors, including how the information should be displayed and which fields you need in the backend.
But what happens if you want to publish content that a normal page or post can't manage?
You might already have a clue: You need a new way to add content to the backend. A kind of input mask with exactly the fields you need. This is what Advanced Custom Fields offers you. The plugin with the same name mentioned above allows you to define and create these fields comfortably in the backend. Once this structure is in place, you can move on to the next step.
This is the point where Custom Post Types come into play. It should be mentioned here that it makes sense to create your own Custom Post Type for using Advanced Custom Fields. In my example, I simply call the Custom Post Type (CPT) therapists.
You could always program the Custom Post Type yourself. But I used to the plugin "Custom Post Type UI" instead and I'll explain more about it in the next section.
Custom Post Type UI: Free plugin
If Advanced Custom Fields (ACF) weren't enough wizardry for you so far, we've got something else up our sleeve: ACF in combination with Custom Post Type UI, short CPT UI.
This allows you to display database content directly in the frontend as desired. In my case, I faced the challenge of trying to build a filter search with different fields. So I first had to upload all data to the backend using a CSV import.
After the import, I used Custom Post Type and Advanced Custom Fields for the basis of my filter search in the frontend. More about this in the next section.
Let's leave the backend behind us for now. Now it's on to the frontend so you're able to use the individual Advanced Custom Fields for yourself.
I used ACF to build a customized search with filters. But how can we present the content from the backend elegantly in the frontend to allow user interaction?
Here you can also choose between developing it yourself or using a plugin. I spent a long time looking for a good tool and came across "Search & Filter Pro" (linked at the end of the article).
Now I have an ingenious way to use the data available in the backend for the display in the frontend. In my example, these are:
- Search (normal search field)
- Post Meta (access and search for the respective Advanced Custom Field in the database)
- Submit button (button for submitting the search query or form)
It could look like this in the backend:
Then you can use shortcodes to insert the filter search at any place in the backend (for example on a page).
You'll soon notice, however, that this isn't particularly appealing visually. I made some improvements with CSS and I think the result in the frontend is quite good:
- ACF plugin: https://de.WordPress.org/plugins/advanced-custom-fields
- Custom Post Type UI plugin: https://WordPress.org/plugins/custom-post-type-ui
- Extensions: https://awesomeacf.com
- Search & Filter Pro (premium plugin): https://searchandfilter.com
I'm excited to see what I can use Advanced Custom Fields for in the future. Do you have any questions or comments about this article? I'd love to hear your feedback.
Picture: Shane Aldendorff | Unsplash