"You don't know Advanced Custom Fields (ACF)? Without ACF, I definitely wouldn't use WordPress anymore." This is what a colleague wrote to me via Slack a few weeks ago. However, he is a developer, I am a designer. At the latest at this point, however, I realized that I should (and wanted to) deal with it.
What are Advanced Custom Fields (ACF)?
WordPress itself already offers a wide range of functions. With Advanced Custom Fields (ACF) you can expand these functions even further - free of charge in the standard version. They allow 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 means that just about anything is possible with WordPress - Advanced Custom Fields as a tuning for WordPress, so to speak.
What do I need Advanced Custom Fields for ?
In a nutshell: You probably need Advanced Custom Fields when you can no longer get on with the on-board elements in the WordPress backend. You are faced with a challenge that cannot or can only partially be realised with the help of pages or posts.
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 was allowed to build a search with filter criteria. This is not a simple text search that searches the entire website for suitable content, but a search in which specific data can be entered beforehand via a form. The user has various filter criteria at his disposal. Among others, these are:
- Name (text field)
- Postcode (text field)
- Country (drop down)
- Certificates (checkbox)
But more about that later. This use case gave me the idea of using Advanced Custom Fields (ACF). Such an individual search is simply not possible with WordPress on-board elements without ACF.
Advanced Custom Fields: The free plugin
So I started looking for a way I could create this filter search using Advanced Custom Fields.
The eponymous pluginin the official WordPress plugindirectory comes from Elliot Condon. The Australian works very actively on it and is constantly developing it further, so that new functions appear again and again. If you want to be close to the action, you can follow ACF on Twitter.
If you have already been brave enough to use the block editor (Gutenberg) introduced in WordPress 5.0, there are also blocks for the new editor at Advanced Custom Fields .
The ACF pluginis currently active on well over 1 million websites. It is tested very intensively and works flawlessly with the latest WordPress version. Also impressive is that the pluginhas already received more than 1,000 ratings with 5 stars. This compares to a measly 16 reviews with only one star - very likely 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 have not yet had to make use of this myself. The reason is simple: the first-class documentation, which covers field types, functions, filters and FAQs.
"*" indicates required fields
What are custom post types?
Earlier I mentioned that active design is necessary. At Advanced Custom Fields , this also means that in certain cases these alone will not be of much use to you. Only in combination with Custom Post Types do further options arise.
The first question is: What is a (normal) post type?
The two best known in WordPress are Pages and posts(Blog Posts). For each new content to be created for a website, you decide which post type is the most suitable. This depends on several factors, including how you want the information to be visible 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 when Custom Post Types come into play. It is very important to know that it makes sense to create a custom post type for the use of Advanced Custom Fields . In my case, I call the Custom Post Type (CPT) simply therapist.
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 of charge 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 was faced with the challenge of building a filter search with different fields. I had to first upload all the data into 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.
Practical example: Building a search with filter criteria
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 have used the ACF to build a custom search with filter criteria. However, how is it possible to present the content from the backend elegantly in the frontend so that interaction by the user is possible?
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:
Further useful links
- 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 looking forward to seeing what else I can implement with Advanced Custom Fields in the future. Do you have any questions or comments about this article? Then I look forward to receiving your feedback.
Your questions about ACF
What questions do you have about ACF and WordPress? Feel free to use the comment function. You want to be informed about new postson the topic of WordPress and web design? Then follow us on Twitter, Facebook, LinkedIn or via our newsletter.