How to use Advanced Custom Fields on your website?

If you are using WordPress to build websites, you probably already faced some limitations. Limitations such as when you wanted to use more custom solutions and/or designs. There is plenty of ready-to-use, well-designed WordPress templates, they usually have some limitations. It’s hard to find the one which will have everything you need.

You can also create more customized solutions by using WordPress custom fields. However, the interface is not very user-friendly.

Here comes Advanced Custom Fields plugin, which is a great solution for anyone who wants to build custom websites. Along with easily manage content on the website and have full control over how your website will look. So if you have never worked with the advanced custom fields plugin, now is the best time to get to know more about this solution.

Advanced Custom Fields – what is it?

Description

Advanced custom fields (ACF) is a plugin that makes a 👉 WordPress site 👈 a fully-functioning content management system. It allows users to make use of their data. The plugin uses WordPress native custom fields functionality. ACF gives you complete control over your WordPress edit screen/fields. Fields are possible to use in pages, posts (including custom post type), comments, custom options pages, etc.

Advanced Custom Fields Plugin

Advanced Custom Fields plugin, or ACF, has the purpose of giving WordPress developers more control over their fields. It also includes a user interface that displays customized fields in all the themes that you have created.

ACF plugin offers a free version and a professional version. Already with the free version of the ACF plugin, there are more than 30 ACF fields available, to use on your WordPress page. Supported type fields include ranges, buttons, relationship fields, and checkboxes. Along with selected values, true/false, color choices, date pickers, and times and links.

What’s the purpose of Advanced Custom Fields plugin?

In case you still don’t feel convinced yet, there are some more arguments to give the ACF plugin a shot.

With all the build-in functionalities advanced custom fields plugin offers, there is no need to build many things from scratch. This gives the user much easier to input data.

When creating a new post or page, there is no need to remember what this section should look like. The information you enter in a specific field group will display in the same way across the entire website.

It’s also easy to maintain and update. All the setup is in one place (one block, or field group), so in the case of necessity of any change, it’s fast and easy.

Advanced Custom Fields pro – differences

The Pro version of the advanced custom fields plugin at first sight doesn’t apply much more than the basic one. However, with the paid version you get the following:

• repeaters,
• ACF blocks,
• the flexible content,
• option pages,
• a gallery field group,
• and the clone field group.

In fact, these few additions put advanced custom field usage at a totally different level.

ACF blocks

Let’s first take a look at ACF blocks. According to documentation, ACF block is a powerful PHP-based framework and does not require any JavaScript. It maintains native compatibility with WordPress core. Another important aspect is that ACF blocks are not tied to metadata, meaning they can be used anywhere in Gutenberg, and multiple times per post.

Let’s say you need a simple section with a list showing the title and text. You know, that this section will appear in a few places on your website, but with various repetitions. Using ACF blocks you can create a field group that will contain all the elements you need for your section.

Repeater field

Another interesting and very useful field is the repeater. Going back to the example I showed you above, so a simple list block. Thanks to the repeater field there is no need to specify how many list elements you’ll want to add. Instead, you just create one repeater field which contains a title and some text.

The Repeater field will return an array of rows, where each row is an array containing sub-field values. To get sub-fields value, we are using get_sub_field(‘sub_field_name’) function.

$list = 'list';

// Check rows exists.
<?php if (have_rows($list)) : ?>
        <?php $i = 1; ?>

	// Loop through rows.
        <?php while(have_rows($list)) : the_row(); ?>
            <?php 
		// Load sub field value.
                $title = get_sub_field('title');
                $content = get_sub_field('content');
            ?>
            <?php if($title || $content) : ?>

                <div class="acf-block-list-of-advantages__item">
                    <div class="container acf-block-list-of-advantages__container position-relative">
                        <div class="row align-items-center justify-content-between">
                            
                            <?php if($type_of_list == 'columned') : ?>
                                <?php if($title) : ?>

                                    <div class="acf-block-list-of-advantages__title">
                                        <h3 class="text-secondary"><?= $title; ?></h3>
                                    </div>
                                <?php endif; ?>

                                <?php if($content) :  ?>

                                    <div class="acf-block-list-of-advantages__content col-md-5 c-py-5">
                                        <div class="entry-content text-white text-md-end">
                                            <?= $content; ?>
                                        </div>
                                    </div>

                                <?php endif;?>

                            <?php else : ?>

                                <div class="acf-block-list-of-advantages__title">
                                    <span class="ff-secondary text-secondary fz-100 lh-1">
                                        <?= $i <= 9 ? '0'.$i : $i; ?>
                                    </span>
                                </div>
                                <div class="acf-block-list-of-advantages__content col-md-8">

                                    <?php if($title) : ?>

                                        <h3 class="text-pink"><?=$title;?></h3>

                                    <?php endif; ?>

                                    <?php if($content) : ?>

                                        <div class="entry-content"><?=$content;?></div>

                                    <?php endif; ?>

                                </div>

                            <?php endif; ?>

                        </div>
                    </div>
                </div>

            <?php endif; ?>

        <?php $i++; ?>
        <?php endwhile; ?>
    <?php endif; ?>

Options pages

Worth mentioning feature from the professional version is that with advanced custom fields you can create even custom options pages. With the options pages feature, we can add custom admin pages to store the global settings of the theme. These settings are not tied to a specific post or page but are instead stored in the wp_options table. You can assign custom field data to your page via the “Options Page” location rule in field settings. The custom options pages are great to use when you want to display the same ACF data everywhere on the website, so as for instance the footer text, header logotypes, etc.

Clone field

The clone field group, available in the professional version is also a useful solution. This feature lets you use existing fields in another ACF block. It’s good to use this when we have the same functionality in many blocks, for instance in multiple blocks, we want to apply a select field that will add to our block drop-down list with background decors. Instead of repeating the same process in each ACF block, we can just with only the click of a few buttons, clone the existing field group to our block.

Advanced Custom Fields WordPress – examples of use

I hope after reading the first part of this article, you already have some ideas in your mind about how to use ACF fields. The best idea would be just to show you some real-life examples. I’m gonna show you the simple use of the ACF plugin on the website.

What we want to achieve is to add in our blog post a custom author section with a name, image, and short bio. But we don’t want to have the author visible in every blog post.

What we need to do is to create a field group and add the code in the PHP file for a single post.

Creating ACF field group

The first step is to assign the necessary ACF field to our post. In the WordPress dashboard, go to ACF field builder by selecting custom fields and then add new. The next step is to choose all the ACF fields we’re gonna need to show in the author section.

Adding custom fields is very simple and doesn’t require technical knowledge. To add a single field we have to add the field label, field name, and select field type.

Remember that the field label is what will appear in the editor. The field name is what you’re gonna use later to in your code to get the field value. What the advanced custom fields plugin gives here is that the field name is generated from the field label, so you don’t have to create a new name.

The field type is the information you want to collect from. For example, if you want to collect email addresses, you have a dedicated field type to do so :).

After adding all fields we need, author name and title in our case, which are fields type text and author image (ACF type image). By choosing the image field type we can also decide what type of image format we want to return, which will be important later in our PHP file.

The last step is to select location rules for the field group. In our case, this will be: “post type is equal to post”.

Now if we navigate to a single post, we’re gonna see our author field group.

Conditional logic

While creating any field group, we can add some logic on in which condition the field will appear. Let’s say that in some cases we would like to add a border around our author box with the possibility to choose its color. We could add a field asking if we want a border and if so shows the color picker field.

What we need to do, is to find conditional logic in the field settings, change it to yes and set the logic we need.

The results would be like this:

Getting custom field values

Now everything is ready to add some code to the theme template file. We’re gonna jump to single.php since we want to display author information in a single post. To display acf data, we need to get field values by using the ACF get_field() function with the name of the ACF field as a parameter. The function returns a custom field value.

Registering ACF blocks

As mentioned before, in the professional version of the plugin, we have a very powerful blocks feature. So let’s take a closer look at a real-life example of it.

We should start with registering the block in the functions.php file in our theme’s template files. Registering the block doesn’t require technical knowledge. We’re gonna use acf_register_block_type() function. This function accepts an array of settings that you can use to customize your block. This is a basic example of how to register a block.

add_action('acf/init', 'my_function_name');
function my_function_name() {

    // Check function exists.
    if( function_exists('acf_register_block_type') ) {

        // register a testimonial block.
        acf_register_block_type(array(
            'name'              => 'list-of-advantages',
	    'title' 		=> __('List of Advantages'),
            'render_template'   => 'template-parts/blocks/testimonial/list-of-advantages.php',
            'icon'              => 'admin-comments',
            'keywords'          => array('List of Advantages', 'list', 'advantages'),
	    'mode' 		=> 'edit,
        ));
    }
}

Block types can support any number of built-in core features, like name, title, icon, render template, and mode (see example above).

Adding styles and scripts to the block

These are not all available settings you can use. In case you’ll need to apply some styles or scripts to your ACF blocks, there are en queue scripts and en queue styles arguments. In both cases we are providing URL path to our .css / .js file.

'enqueue_style' => get_template_directory_uri() . '/template-parts/blocks/list-of-advantages/ 
'enqueue_script' => get_template_directory_uri() . '/template-parts/blocks/testimonial/list-of-advantages.js'

All possible settings arguments are very well described in the advanced custom fields plugin documentation.

When we have our block registered, the next step is to go to the WordPress site admin panel to add a new field group.

Adding a new field group is exactly the same process, as in the previous example. The only difference is in the location rules. Since we want to use our field as a block, we have to assign its location to a specific block. In case we would like to display our block only on specific page templates, we can use multiple rules (by adding another rule group to our field group).

With all the fields ready, we can add code to our PHP block template file. So getting all the field values we need and creating HTML markup to display acf data on the frontend.

Why should I use Advanced Custom Fields WordPress plugin?

If you’re still not sure why you should use the advanced custom fields plugin, let’s sum all the information up.

Advanced custom fields give you flexibility when creating WordPress websites. You aren’t limited by ready-to-use templates and at the same time, you deliver user-friendly WordPress themes to your clients.

With advanced custom fields, you can develop reusable custom block types, which will speed up building the website.

Any changes you will need to do in the future are not gonna be a problem. You can edit ACF fields very easily.

ACF is not a forgotten plugin. It’s regularly updated, which makes it safe and reliable.

Check out our 👉 list of must-have plugins 👈, which includes advanced custom fields plugin.