Developing Custom Fields via ACF for WordPress
Advanced Custom Fields (ACF) is the de facto standard for adding structured data to WordPress posts. Editors get proper input fields instead of free-text custom field meta. ACF PRO adds Repeater, Flexible Content, Gallery, and clone—without it, complex data structures are practically unrealizable with standard tools. Configuring fields for a task takes from a few hours to 2 days depending on the number of groups and conditional display logic.
Registering Field Groups via Code
ACF allows registering field groups programmatically (not via /wp-admin)—this is essential for production: configuration lives in code, not in the database:
add_action('acf/init', function () {
acf_add_local_field_group([
'key' => 'group_project_details',
'title' => 'Project Details',
'fields' => [
[
'key' => 'field_project_client',
'label' => 'Client',
'name' => 'project_client',
'type' => 'text',
'required' => 1,
'placeholder' => 'Company name',
],
[
'key' => 'field_project_year',
'label' => 'Year Completed',
'name' => 'project_year',
'type' => 'number',
'min' => 2000,
'max' => 2030,
'default_value' => date('Y'),
],
[
'key' => 'field_project_url',
'label' => 'Project URL',
'name' => 'project_url',
'type' => 'url',
],
[
'key' => 'field_project_tech_stack',
'label' => 'Technologies',
'name' => 'project_tech_stack',
'type' => 'checkbox',
'choices' => [
'react' => 'React',
'vue' => 'Vue.js',
'laravel' => 'Laravel',
'wordpress' => 'WordPress',
'nextjs' => 'Next.js',
],
'layout' => 'horizontal',
],
[
'key' => 'field_project_gallery',
'label' => 'Screenshot Gallery',
'name' => 'project_gallery',
'type' => 'gallery',
'min' => 0,
'max' => 20,
'mime_types' => 'jpg,jpeg,png,webp',
'return_format' => 'array',
],
],
'location' => [
[['param' => 'post_type', 'operator' => '==', 'value' => 'project']],
],
'menu_order' => 0,
'position' => 'normal',
'style' => 'seamless',
'label_placement' => 'top',
]);
});
Repeater — Repeating Data Blocks
[
'key' => 'field_project_results',
'label' => 'Project Results',
'name' => 'project_results',
'type' => 'repeater',
'min' => 1,
'max' => 10,
'layout' => 'table',
'button_label' => 'Add Result',
'sub_fields' => [
[
'key' => 'field_result_metric',
'label' => 'Metric',
'name' => 'metric',
'type' => 'text',
'placeholder' => 'Conversion',
],
[
'key' => 'field_result_before',
'label' => 'Before',
'name' => 'before',
'type' => 'text',
'placeholder' => '1.2%',
],
[
'key' => 'field_result_after',
'label' => 'After',
'name' => 'after',
'type' => 'text',
'placeholder' => '3.8%',
],
],
],
Repeater output on frontend:
if (have_rows('project_results')) {
echo '<table class="results-table">';
echo '<thead><tr><th>Metric</th><th>Before</th><th>After</th></tr></thead><tbody>';
while (have_rows('project_results')) {
the_row();
printf(
'<tr><td>%s</td><td>%s</td><td>%s</td></tr>',
esc_html(get_sub_field('metric')),
esc_html(get_sub_field('before')),
esc_html(get_sub_field('after'))
);
}
echo '</tbody></table>';
}
Flexible Content — Page Builder
Flexible Content lets editors build pages from blocks of different types—essentially an internal page builder:
[
'key' => 'field_page_sections',
'label' => 'Page Sections',
'name' => 'page_sections',
'type' => 'flexible_content',
'button_label' => 'Add Section',
'layouts' => [
'hero' => [
'key' => 'layout_hero',
'name' => 'hero',
'label' => 'Hero Banner',
'sub_fields' => [
['key' => 'field_hero_title', 'label' => 'Title', 'name' => 'title', 'type' => 'text'],
['key' => 'field_hero_bg', 'label' => 'BG', 'name' => 'bg', 'type' => 'image', 'return_format' => 'array'],
['key' => 'field_hero_button', 'label' => 'Button', 'name' => 'button', 'type' => 'link'],
],
],
'text_columns' => [
'key' => 'layout_text_columns',
'name' => 'text_columns',
'label' => 'Text in Columns',
'sub_fields' => [
['key' => 'field_tc_cols', 'label' => 'Columns', 'name' => 'columns', 'type' => 'repeater',
'sub_fields' => [
['key' => 'field_tc_text', 'name' => 'text', 'label' => 'Text', 'type' => 'wysiwyg'],
]],
],
],
],
],
Render:
if (have_rows('page_sections')) {
while (have_rows('page_sections')) {
the_row();
$layout = get_row_layout();
get_template_part("template-parts/sections/{$layout}");
}
}
Conditional Field Display
ACF supports conditional_logic—show field only at a certain value of another:
[
'key' => 'field_show_cta',
'label' => 'Show CTA',
'name' => 'show_cta',
'type' => 'true_false',
'ui' => 1,
],
[
'key' => 'field_cta_text',
'label' => 'Button Text',
'name' => 'cta_text',
'type' => 'text',
'conditional_logic' => [
[['field' => 'field_show_cta', 'operator' => '==', 'value' => '1']],
],
],
Synchronization via JSON
ACF PRO supports group synchronization via /acf-json/*.json files. When structure changes via interface—the file updates automatically. Commit files to git; on another environment click "Sync" or call acf_sync_field_groups().
Get Fields Outside Loop
// Specific post field
$client = get_field('project_client', $post_id);
// Option field (ACF option page)
$phone = get_field('company_phone', 'option');
// Term taxonomy field
$color = get_field('category_color', 'project_category_' . $term_id);
ACF is a tool for quick starts. As projects grow, complex Flexible Content with dozens of layouts becomes a bottleneck: wp_postmeta queries with JOINs over 100+ rows slow pages. At that point, custom tables or headless architecture should be considered.