Displaying ACF Fields in WordPress Templates

Advanced Custom Fields (ACF) is a powerful plugin that enables WordPress developers to add custom fields to posts, pages, and custom post types. By leveraging ACF, you can create highly customized WordPress websites with dynamic content tailored to your needs.

In this guide, we'll walk you through how to display ACF fields in your WordPress templates. Whether you're creating a custom theme or modifying an existing one, this step-by-step tutorial will help you integrate ACF seamlessly

Step 1: Install and Set Up ACF

If you haven’t already, install and activate the ACF plugin. Once installed:

1. Go to Custom Fields in the WordPress admin menu.
2. Click Add New to create a field group.
3. Add your desired custom fields (e.g., text, number, dropdown, etc.).
4. Assign the field group to specific post types or pages where you want these fields to appear.

For example, let’s create a field group with a dropdown field called "Property Type" for a real estate website.

Step 2: Retrieve ACF Fields in Templates

After setting up your custom fields, you can display their values in your WordPress theme templates using PHP. Here's how:

1. Basic Usage

Basic Usage
Use the get_field() function to retrieve field values in your templates. For example:

?

1 2 3 4 5 6

<!--php $custom_field = get_field('field_name'); if ($custom_field) {     echo $custom_field; } ?-->

Replace 'field_name' with the actual name of your custom field.

2. Displaying Image Fields

If your custom field is an image, you can display it like this:

?

1 2 3 4 5 6

<!--php $image = get_field('image_field_name'); if ($image) {     echo '<img src="' . esc_url($image['url']) . '" alt="' . esc_attr($image['alt']) . '"-->'; } ?>

3. Repeater Fields

For repeater fields, use a loop:

?

1 2 3 4 5 6 7

<!--php if (have_rows('repeater_field_name')): ?-->     <ul>         <!--php while (have_rows('repeater_field_name')): the_row(); ?-->             <li><!--php the_sub_field('sub_field_name'); ?--></li>         <!--php endwhile; ?-->     </ul> <!--php endif; ?-->

4. Flexible Content Fields

For flexible content fields, handle layouts conditionally:

?

1 2 3 4 5 6 7

<!--php if (have_rows('flexible_field_name')): ?-->     <!--php while (have_rows('flexible_field_name')): the_row(); ?-->         <!--php if (get_row_layout() == 'layout_name'): ?-->             <p><!--php the_sub_field('field_within_layout'); ?--></p>         <!--php endif; ?-->     <!--php endwhile; ?--> <!--php endif; ?-->

Step 3: Debugging ACF Fields

If the field is not displaying as expected:

• Ensure the field is correctly assigned to the post, page, or template.
• Double-check the field name in the template.
• Use var_dump(get_field('field_name')); to debug the field's value.

Step 4: Best Practices

1. Sanitize Output
   Always sanitize dynamic content to prevent security vulnerabilities. Use esc_html(), esc_url(), and other WordPress sanitization functions where appropriate.

2. Use Conditional Statements
   Wrap your get_field() calls with conditional statements to prevent errors when fields are empty.

3. Leverage Template Parts
   For modular and maintainable code, consider creating template parts for displaying ACF fields.

Conclusion

By following these steps, you can harness the full potential of ACF to create dynamic, user-friendly WordPress sites. Whether you're building a portfolio, an e-commerce site, or a blog, ACF adds flexibility to your development process.

Have you tried using ACF in your projects? Share your thoughts and experiences in the comments below!