This is the second in our series of case studies dedicated to showing how developers have overcome challenges by using Advanced Custom Fields PRO. You can see the first case study here. Do you have a story to share? Let us know via email to [email protected].
The United Nations High Commissioner for Refugees (UNHCR) is the agency of the United Nations dedicated to refugees, displaced communities, and stateless people around the world. Thousands of people depend on the organization every year, and donations are a major source of funding. Digital marketing agency Noiza has worked with UNHCR Italy since 2017, developing graphic sites, banners, and newsletters.
When UNHCR called on Noiza to create a new donation portal and landing page, they turned to WordPress and Advanced Custom Fields (ACF).
Founded in 2001 and headquartered in Trieste, Italy, Noiza counts among its clients firms like Generali Insurance, Velux, and PokerStars. Many of the company’s clients are based in Italy, but they also do a lot of work with European and international non-profit groups.
“We use a tailor-made approach,” says Martino Stenta, one of Noiza’s founders and the company’s web development manager. “We tend to avoid commercial themes, visual builders, and so on. Instead, we start from the design, through development, trying to use our own workflow and infrastructure and so on.”
It’s an approach that has led to strong and long-lasting relationships with clients big and small. For Noiza, ACF has been an integral part of ensuring that clients are satisfied and projects are delivered on time.
“It’s one of our go-to plugins for all our development needs,” says Martino. “When we put everything in the context of Custom Post Types and custom fields, everything is smoother, especially for the client. They don’t have to learn a new layout, new structure, and new options. They have just the right amount of options to do what they need to do.”
ACF currently has 30 custom field types to choose from. In addition to content fields like text and images, ACF allows you to create a wide selection of jQuery fields, including Google Maps, date and time pickers, and much more.
“It’s error proof. It’s very, very simple for us to set up, and very good on the revenue side, since we produce faster,” says Martino. “We’re happy, and the client is happy. Great!”
Simplicity Drives UNHCR Donation Platform
In 2019, UNHCR wanted to redesign its donation platform. The world of online donations had grown in tandem with the rise in online shopping, and this meant UNHCR needed a new online donation portal that they could edit quickly and easily if the need arose. Noiza delivered by using ACF for one of the central features.
“We looked very deeply into various issues during the course of the new design,” says Martino. “There are technological aspects related to transactions, the experience of the user who wants to donate, and the experience of the editor who has to set up an acquisition campaign.”
Flexibility and the ability to establish and run new campaigns quickly are essential elements of the design. ACF played a vital role in ensuring site editors could build and launch new campaigns as fast as possible.
A very simple landing page leads donors to a customized user interface based on Gravity Forms where they can choose between one-time, monthly, or annual donations. The site’s editors, though, don’t have to interact with the Gravity Forms setting at all. Any changes they need to make are handled in the WordPress admin with ACF.
“For the editor, there’s just three sections for one-off, monthly, and annual donations. They just select the text, the price, and when they click the dropdown, they can choose from a list of icons from the UNHCR brand book,” says Martino. “They can just edit the text to reflect the new campaign and highlight which type of donation is most urgently needed. Thanks to ACF, they can wrap up the donation part almost immediately, and focus on other parts of the page and campaign. They can focus on the content, the wording, and the images, and just let the system do its thing.”
The system indeed does its thing, with nearly a hundred campaigns currently in progress. Given the nature of UNHCR’s work, the need for a new campaign can arise suddenly, often without warning. This is one reason the organization knew they would need a donation portal that offered tremendous flexibility.
In part, that flexibility is provided by multiple uses of if( get_row_layout() ==. The code below is used to populate the form’s checkboxes.
function populate_checkbox( $form ) {
if ( ! is_admin() ) {
foreach( $form['fields'] as &$field ) {
//NOTE: replace 3 with your checkbox field id
$field_id = 46;
if ( $field->id != $field_id ) {
continue;
}
$input_id = 1;
// flag di "c'è un elemento "Selezionato" impostato dall'utente
$preselect = false;
if( have_rows("donazioni") ):
// loop through the rows of data
while ( have_rows("donazioni")) : the_row();
$choice = array( 'text' => '<div class="inner-label '.get_sub_field("icona").'"><div class="big-price">'.get_sub_field('prezzo').' €</div><br>'.get_sub_field('etichetta').'</div>', 'value' => get_sub_field('etichetta'), 'price' => get_sub_field('prezzo') );
$choices[] = $choice;
endwhile;
endif;
$field["choices"] = $choices;
}
}
return $form;
}
For example, the war in Ukraine resulted in a spike of visitors wishing to donate. UNHCR was able to quickly set up a campaign, one which was soon processing over 1,000 donations a day.
“Now it’s been four years that it’s working, and they don’t want to change anything on the platform,” says Martino. “There are changes they want to make, like different layouts, but that’s just on the frontend. The core, the way donations are working, they don’t want to change that. That’s a big win for us. The main system works and has better conversion rates than the previous one.”
ACF Works for Clients Big and Small
UNHCR is a very prominent client, but Martino says Noiza uses ACF for clients of all sizes.
“The main advantage, I think, is flexibility,” says Martino. “In the past, we had a go with another product that had an integration between Custom Post Types and custom fields. At the time, that product was complex to configure and complex to update. It had a lot of possibilities for doing things on the WordPress backend if you don’t know how to code, but in my opinion it wasn’t stable.”
Instead, Martino says they embraced ACF, in part because of how well it works with other tools, including FacetWP.
“It also works really well with import and export tools, and it’s great to have everything neat, clear, and easily queryable in a loop. Once we started using it, we saw a lot of possibilities.”
Above all, a project like the UNHCR donation platform must be stable and consistent. This is essential for making sure the donations come through, but it’s also important in giving donors a sense of trust.
“We tried multiple approaches. I was confident ACF would be able to handle everything, but the main concern was between Gravity Forms and ACF,” says Martino. “We were able to make the two systems talk and push the field results to Gravity Forms and then to the merchant.”
Zero Waste Europe Library and Experts
Noiza also works with Zero Waste Europe, a Brussels based NGO founded to empower communities to rethink their relationship with resources.
“We’re using a lot of ACF on their site, in combination with FacetWP,” says Martino. “For example, their interactive library uses types and categories that are really custom fields made with ACF.”
ACF’s Repeater field is a great solution for times when you need repeating content, such as staff biographies or slides. The Repeater field is extremely flexible, as it allows you to use any type of field within the Repeater, and there are no pre-set limits to the number of repeats.
“We just released an Experts page for a subcompany of this one,” says Martino. “The subcompany is the consulting wing of Zero Waste Europe, so it’s important to not only list all of their qualifications, but make the whole site easily searchable for someone looking to hire a consultant. All of the fields are based on ACF, which makes it easy for the editor to make changes or updates. The editor just has to focus on compiling the content, not on how everything works behind the scenes.”
You can see the PHP for adding a single expert template below, as well as a screenshot showing how skills are displayed.
<?php
$knowledge_keys = [
"reuse_and_repair_initiatives",
"prevention_of_food_waste",
"single-use_plastics_prevention",
"extended_producer_responsibility_schemes",
"recycling_process_for_key_waste_streams",
"organics_management_and_composting",
"separate_collection_of_recyclables_and_residual_waste",
"economic_incentives_for_waste_reduction",
"engaging_the_community",
"residual_waste_disposal_methods",
"key_waste_and_circular_economy_legislation"
];
$args_knowledge = [
"keys" => $knowledge_keys,
"class_name" => "knowledge",
"title" => __('Knowledge', 'zwc')
];
$all_keys = $args["keys"];
?>
<?php foreach ($all_keys as $single_key) {
$acf_single_knowledge_field_object = get_field_object($single_key);
$label = $acf_single_knowledge_field_object['label'];
$value = $acf_single_knowledge_field_object['value'];
?>
<div class="expert-skills-and-knowledge-single-wrapper">
<div class="expert-skills-and-knowledge-single-title">
<p><?= esc_html($label) ?></p>
</div>
<div class="expert-skills-and-knowledge-level-wrapper">
<img src="<?= esc_url( get_template_directory_uri() . "/img/level-" . esc_attr($value) . ".svg" ) ?>" alt="" />
</div>
</div>
Pittini Group Redesign Uses ACF for Flexible Templates
The Pittini Group is a leading Italian steel manufacturer with an annual production of more than 3 million tons. Noiza was recently called upon to redesign the company’s old website. The Pittini Group is a large company with diverse interests in steel manufacturing, and the company’s website reflected that. They wanted an update that would provide a coherent look across pages, while still retaining flexibility.
“Now all of the pages are made using a flexible template, and there are a lot of templates,” says Martino. “This allowed us to address a redesign on a modular level. There are as many modules as the client needs, with whatever they want added to them, but with an organic and coherent layout.”
Before taking the site live, Noiza put together a full page with all of the modules put together. This led to many variations of modules that served essentially the same purpose, but everything continued to function as expected.
“This is great for designing responsive websites,” says Martino. “Since each module lives on its own, we can quickly get to a nicer, more responsive design and still be sure everything is working correctly.
The client appreciates this modular approach, according to Martino. “It gives them the capability to structure the layout in a really free way, without being forced to choose one layout or another. They can use the layout that best suits that particular page. They appreciate this capability very much.”
The screenshots below show one of the Pittini Group pages, in this case for the company’s laboratory. The site editors have a great deal of flexibility when it comes to determining layouts.
Lately, given the rise of visual building tools, Martino says his team has been focusing a lot on the flexible items possible with ACF.
“We’re quite fast at developing these, because we know the platform and we know ACF, so development is fast, fast, fast,” he says. “We’re still exploring everything around Gutenberg and blocks and the Full Site Editor. It’s not our main need since we’re fast and reliable the way we are, but we’ll need to get familiar with it to avoid falling behind the curve.”
Recent updates released in ACF PRO 6.0 help with Gutenberg integration. In particular, ACF 6.0 includes a new block versioning system, allowing you to opt in to new versions which will change things like the markup and structure of ACF Blocks in both the backend and frontend. This may require updates to your theme to support.
Conclusion
ACF gives developers what they need to unlock the possibilities of WordPress custom fields right out of the gate. Savings in time and labor are built in, allowing you to provide clients with the trouble-free editing experience they want, without complications.
With ACF, you can add customized data without writing a single line of code. You can add custom fields to Posts, Pages, Custom Post Types, Taxonomies, Category, and more. ACF PRO can also help you add block support to your custom themes, giving you the ability to offer more customization to your clients.
Our Getting Started guide has everything you need to start building better WordPress sites with ACF. When you’re ready to unlock even more powerful features, you can upgrade to ACF PRO, and gain access to capabilities like ACF Blocks, more field types, and other professional features.
About the Author
Mike is the Senior Editor of Delicious Brains. Based in Hamilton, Ontario, he has an extensive background in business-to-business communications and marketing. His hobbies include reading, writing, and wrangling his four children.
