"You don't know Advanced Custom Fields (ACF)? I definitely wouldn't use WordPress without ACF." A colleague wrote this to me via Slack a few weeks ago. But he's a developer, I'm a designer. It was at this point, however, that I realized that I should (and wanted to) look into it.
What are Advanced Custom Fields (ACF)?
WordPress itself already offers a wide range of functions. With the Advanced Custom Fields (ACF), you can extend these functions even further - free of charge in the standard version. They give you full control over the content of your website.
By default, we find typical fields such as title, content, date and author in the backend for posts and pages. Advanced Custom Fields, or the plugin mentioned below, give you the opportunity to expand WordPress and thus pages and posts practically at will and individually.
This makes just about anything possible with WordPress - Advanced Custom Fields as a kind of tuning for WordPress.
What do I need Advanced Custom Fields for?
In a nutshell: You probably need Advanced Custom Fields if you can't get any further with the on-board elements in the WordPress backend. You are faced with a challenge that cannot or can only partially be realized with the help of pages or posts. Depending on the customer's requirements, this can happen relatively quickly.
In my case, for example, I was allowed to build a search with filter criteria. So not a simple text search that searches for suitable content across the entire website, but a search in which specific data can be entered beforehand via a form. The user has various filter criteria available. These include
- Name (text field)
- Zip code (text field)
- Country (dropdown)
- Certificates (checkbox)
But more on that later. This use case gave me the idea of using Advanced Custom Fields (ACF). Such a customized search is simply not possible with WordPress board elements without ACF.
Advanced Custom Fields: The free plugin
I was therefore looking for a solution to implement this filter search using Advanced Custom Fields.
The plugin of the same name in the official WordPress plugin directory is constantly being developed further, so new functions are appearing all the time. If you want to be close to the action, you can follow ACF on Twitter.
The ACF plugin is active on well over 1 million websites. It is intensively tested and works flawlessly with the latest WordPress version. It is also impressive that the plugin has already received more than 1,000 ratings with 5 stars. This compares to a measly 40 ratings with just one star - most likely users who gave up after a (very) short time.
With a plugin like this, it's clear that it takes some time and patience to understand how to use it. Of course, I also scratched the surface of Advanced Custom Fields first. I just want to point out that there are other plugins that you install and then they work conveniently in the background - this is different with ACF. You have to actively design and recognize the overall connection between database, backend and frontend.
What is also indispensable with this plugin, which is quite technical, is the support.
I have not yet had to use this myself. The reason is very simple: the first-class documentation, which covers field types, functions, filters and FAQs.
"*" indicates required fields
What are custom post types?
I previously mentioned that active design is necessary. With 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 blog posts. Every time you create new content for a website, you decide which post type is the right one. This depends on various factors, including how the information should be visible and which fields you need in the backend.
But what happens if you want to provide content that can neither be covered by a normal page nor by a post?
You may already have guessed it: you need a new way to enter content in the backend. A kind of input mask with exactly the fields you need. This is what Advanced Custom Fields can offer you. The plugin of the same name mentioned above allows you to conveniently define and create these fields in the backend. Once this structure is in place, the next step follows.
This is when custom post types are used. It is very important here that it makes sense to create a separate custom post type for the use of advanced custom fields. In my case, I simply call the custom post type (CPT) "therapist".
Of course, you can also program the custom post type yourself. However, I used the "Custom Post Type UI" plugin for this, which I will explain in more detail in the next section.
Custom Post Type UI: Free plugin
If the Advanced Custom Fields (ACF) weren't enough magic for you so far, here's the best thing: ACF in combination with Custom Post Type UI, or CPT UI for short.
This allows you to display database content directly in the frontend as required. In my case, I was faced with the challenge of wanting to build a filter search with different fields. I therefore first had to upload all the data to the backend using a CSV import.
I then used the Custom Post Type and Advanced Custom Fields to create the basis for the filter search in the frontend. More on this in the next section.
Practical example: Building a search with filter criteria
So much for the backend for now. Now it's time for the frontend. So that you can also apply the whole thing and use the individual Advanced Custom Fields for your case.
I have used the ACF to build an individual search with filter criteria. But how is it possible to present the content from the backend elegantly in the frontend so that the user can interact with it?
Again, you have the choice between developing it yourself and using a plugin. Once again, I spent a long time looking for a good little helper and finally came across Search & Filter Pro.
This gives me an ingenious way of using the data available in the backend for 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)
This can then look like this in the backend:
You can then use a shortcode to insert the filter search you have just created anywhere in the backend (e.g. on a page).
However, you will see that this will still look a little unattractive. I've improved this with a few CSS changes and I think the result in the frontend is quite impressive:
Links
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 lots of feedback.
Your questions about ACF
What questions do you have about ACF and WordPress? Feel free to use the comment function. Would you like to be informed about new articles on WordPress and web design? Then follow us on Twitter, Facebook, LinkedIn or via our newsletter.