Advanced Custom Fields plugin in Wordpress - Step-by-Step Execution

Concept Flow - Advanced Custom Fields plugin

Install ACF Plugin

↓

Create Field Group

↓

Add Custom Fields

↓

Assign Field Group to Post Types

↓

Edit Post/Page

↓

Fill Custom Fields

↓

Use get_field() in Theme

↓

Display Custom Data on Site

This flow shows how you install the plugin, create fields, assign them, fill data, and display it on your site.

Execution Sample

Wordpress

<?php
// Get and display a custom field value
$value = get_field('subtitle');
if ($value) {
  echo '<h2>' . esc_html($value) . '</h2>';
}
?>

This code fetches the 'subtitle' custom field and shows it inside an H2 tag if it exists.

Execution Table

Step	Action	Function Call	Field Key	Value Retrieved	Output
1	Load post edit screen	N/A	N/A	N/A	Custom fields appear for editing
2	User enters 'My Subtitle' in 'subtitle' field	N/A	subtitle	My Subtitle	Value saved in database
3	Theme calls get_field('subtitle')	get_field('subtitle')	subtitle	My Subtitle	Returns 'My Subtitle'
4	Check if value exists	if ($value)	subtitle	My Subtitle	Condition true, proceed
5	Echo value inside <h2>	echo '<h2>' . esc_html($value) . '</h2>';	subtitle	My Subtitle	<h2>My Subtitle</h2> rendered on page
6	End of script	N/A	N/A	N/A	Output displayed on site

💡 Script ends after displaying the custom field value if it exists.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
$value	null	'My Subtitle'	'My Subtitle'	'My Subtitle'

Key Moments - 3 Insights

Why does get_field('subtitle') sometimes return null?

If the custom field 'subtitle' is empty or not assigned to the post, get_field returns null. See execution_table step 3 where the value is retrieved.

Why do we check if ($value) before echoing?

To avoid showing empty HTML tags or errors if the field is empty. This is shown in execution_table step 4 where the condition decides if output happens.

How does ACF know which fields to show on the post edit screen?

Because you assign field groups to post types or templates in the plugin settings, as shown in concept_flow step 'Assign Field Group to Post Types'.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of $value after step 3?

A null

B empty string

C 'My Subtitle'

D false

💡 Hint

Check the 'Value Retrieved' column at step 3 in the execution_table.

At which step does the script decide whether to display the subtitle or not?

A Step 4

B Step 2

C Step 5

D Step 6

💡 Hint

Look at the 'Action' column where the condition if ($value) is checked.

If the user leaves the 'subtitle' field empty, what will get_field('subtitle') return?

A 'My Subtitle'

B null

C 0

D An error

💡 Hint

Refer to key_moments where get_field returns null if no value is set.

Concept Snapshot

Advanced Custom Fields (ACF) plugin lets you add custom fields to posts.
Create field groups and assign them to post types.
Fill fields in post editor.
Use get_field('field_name') in theme to get values.
Check if value exists before displaying.
Escaping output is important for security.

Full Transcript

The Advanced Custom Fields plugin allows WordPress users to add extra fields to posts or pages easily. First, you install the plugin, then create a group of custom fields. You assign this group to certain post types so that when editing those posts, the fields appear. Users fill in these fields with data. In the theme code, you use the function get_field with the field name to retrieve the saved value. Before showing it on the site, you check if the value exists to avoid empty output. Finally, you display the value safely inside HTML tags. This process helps customize content without coding complex database queries.

Practice

1. What is the main purpose of the Advanced Custom Fields (ACF) plugin in WordPress?

easy

A. To add and manage extra custom fields without changing the database manually

B. To create new WordPress themes automatically

C. To speed up WordPress site loading times

D. To backup WordPress site data

Solution

1. Step 1: Understand what ACF does

   ACF allows users to add custom fields easily without coding database changes.

2. Step 2: Compare options

   Only To add and manage extra custom fields without changing the database manually describes adding and managing extra fields without manual database edits.

3. Final Answer:

   To add and manage extra custom fields without changing the database manually -> Option A

4. Quick Check:

   ACF purpose = add/manage custom fields [OK]

Hint: ACF is for custom fields, not themes or backups [OK]

Common Mistakes:

• Confusing ACF with theme builders
• Thinking ACF speeds up site loading
• Assuming ACF handles backups

2. Which of the following is the correct way to retrieve a custom field value named subtitle using ACF in a WordPress template?

easy

A. the_field('subtitle');

B. fetch_field('subtitle');

C. get_field('subtitle');

D. custom_field('subtitle');

Solution

1. Step 1: Identify the correct ACF function for retrieving values

   The function get_field() returns the value of a custom field.

2. Step 2: Check other options

   the_field() echoes the value, not returns it; others are invalid functions.

3. Final Answer:

   get_field('subtitle'); -> Option C

4. Quick Check:

   Retrieve field value = get_field() [OK]

Hint: Use get_field() to get value, the_field() to print directly [OK]

Common Mistakes:

• Using the_field() when value is needed for logic
• Using non-existent functions like fetch_field()
• Confusing echo and return functions

3. Consider this code snippet in a WordPress template using ACF:

$subtitle = get_field('subtitle');
if ($subtitle) {
  echo "
$subtitle
";
} else {
  echo "
No subtitle found
";
}

What will be the output if the custom field subtitle is empty or not set?

medium

A. PHP error will occur

B.

C. Nothing will be displayed

D. No subtitle found

Solution

1. Step 1: Understand the if condition

   The code checks if $subtitle has a value. If empty or not set, condition is false.

2. Step 2: Check the else block output

   If false, it echoes "

   No subtitle found

   ".

3. Final Answer:

   <h2>No subtitle found</h2> -> Option D

4. Quick Check:

   Empty field triggers else output [OK]

Hint: Empty fields trigger else block output [OK]

Common Mistakes:

• Assuming empty string prints empty <h2>
• Expecting no output when field is empty
• Thinking PHP error occurs on missing field

4. You have this code in your WordPress template:

echo get_field('price');

Sometimes it shows nothing and breaks the page layout. What is the best way to fix this issue?

medium

A. Remove the get_field() call completely

B. Check if the field has a value before echoing it

C. Use the_field() instead of get_field()

D. Change the field name to 'price_value'

Solution

1. Step 1: Identify the problem cause

   Echoing an empty or null field can break layout if no fallback is provided.

2. Step 2: Apply a check before echoing

   Use if (get_field('price')) to ensure value exists before output.

3. Final Answer:

   Check if the field has a value before echoing it -> Option B

4. Quick Check:

   Always check field value before output [OK]

Hint: Always verify field value exists before printing [OK]

Common Mistakes:

• Removing field call instead of fixing output
• Using the_field() which echoes without checks
• Changing field name without updating code

5. You want to display a list of team members with their custom fields: name, role, and photo. Which approach correctly uses ACF to loop through a repeater field called team_members and display each member's info?

hard

A. if (have_rows('team_members')) {
while (have_rows('team_members')) {
the_row();
echo get_sub_field('name');
echo get_sub_field('role');
echo '';
}
}

B. foreach (get_field('team_members') as $member) {
echo $member['name'];
echo $member['role'];
echo '';
}

C. while (have_rows('team_members')) {
echo get_sub_field('name');
echo get_sub_field('role');
echo get_sub_field('photo');
}

D. if (get_field('team_members')) {
echo get_field('team_members')['name'];
echo get_field('team_members')['role'];
echo get_field('team_members')['photo'];
}

Solution

1. Step 1: Understand repeater field usage

   Repeater fields require have_rows() and the_row() to loop through rows.

2. Step 2: Check sub field retrieval

   Use get_sub_field() inside the loop to get each subfield value.

3. Step 3: Verify image field handling

   Image fields return an array; access ['url'] for the image source.

4. Final Answer:

   Correct repeater loop with have_rows(), the_row(), get_sub_field(), and image url access -> Option A

5. Quick Check:

   Repeater loop = have_rows() + the_row() + get_sub_field() [OK]

Hint: Use have_rows() and the_row() to loop repeater fields [OK]

Common Mistakes:

• Using foreach on get_field() without have_rows()
• Missing the_row() call inside loop
• Not accessing image url from array