WordPress Custom Fields and ACF: Complete Guide

Introduction

WordPress custom fields allow you to add structured data beyond standard titles and content. Whether you need to add specifications to products, details to team members, or metadata to any post type, custom fields make it possible. Advanced Custom Fields (ACF) transforms this functionality from developer-only territory to user-friendly interface.

Understanding Custom Fields

What Are Custom Fields?

Custom fields (post meta) are additional data attached to posts, pages, or custom post types. They store information in key-value pairs separate from main content.

Examples:

• Product price
• Event date
• Team member title
• Property square footage
• Recipe cooking time

Native vs Plugin Custom Fields

Native WordPress:

• Basic text fields
• Developer-focused
• Limited field types
• Manual output coding

With ACF:

• 30+ field types
• Visual interface
• Conditional logic
• Flexible layouts
• User-friendly

Getting Started with ACF

Installation

Free Version (ACF):

1. Plugins > Add New
2. Search "Advanced Custom Fields"
3. Install and activate

Pro Version ($49/year):

• Repeater field
• Flexible content
• Gallery field
• Options pages
• Clone field
• More features

Creating Your First Field Group

1. Go to ACF > Field Groups
2. Click "Add New"
3. Name your field group
4. Add fields
5. Set location rules
6. Publish

Field Group Settings

Location Rules:

• Post Type equals Post
• Page Template equals Contact
• User Role equals Administrator
• Taxonomy equals Category

Options:

• Position (normal, side, high)
• Style (default, seamless)
• Label placement
• Instruction placement

ACF Field Types

Basic Fields

Text:

• Single line text
• Character limits available
• Placeholder support

Text Area:

• Multi-line text
• Row configuration
• New lines handling

Number:

• Numeric values only
• Min/max settings
• Step increments

Email:

• Email validation
• Proper formatting

URL:

• URL validation
• Link handling

Password:

• Masked input
• Secure storage

Content Fields

WYSIWYG Editor:

• Rich text editing
• Media upload
• Toolbar configuration

Image:

• Image upload/selection
• Return format (array, URL, ID)
• Preview size
• Allowed types

File:

• Document uploads
• File type restrictions
• Return format

Gallery (Pro):

• Multiple images
• Drag-and-drop ordering
• Bulk upload

Choice Fields

Select:

• Single or multiple selection
• AJAX loading
• Stylized UI

Checkbox:

• Multiple selections
• Toggle all option
• Layout options

Radio Button:

• Single selection
• Other option
• Layout control

True/False:

• Boolean toggle
• Stylized checkbox
• Default value

Relational Fields

Link:

• URL and title
• Target option
• Easy linking

Post Object:

• Select existing posts
• Multiple selection
• Filter by post type

Relationship:

• Multiple post selection
• Two-way relations
• Drag ordering

Taxonomy:

• Category/tag selection
• Hierarchical display
• Create new option

User:

• User selection
• Role filtering
• Multiple users

Layout Fields

Repeater (Pro):

• Repeating set of fields
• Add/remove rows
• Min/max rows

Flexible Content (Pro):

• Multiple layouts choice
• Drag-and-drop ordering
• Nested layouts

Group:

• Organize related fields
• Clean data structure
• Collapsible

Clone (Pro):

• Reuse existing fields
• Seamless integration
• Prefix options

Other Fields

Date Picker:

• Calendar interface
• Format control
• Return format

Time Picker:

• Time selection
• Format options

Color Picker:

• Color selection
• HEX output

Google Map:

• Location selection
• API integration
• Coordinates storage

Displaying Custom Fields

Basic Output

In theme files:

<?php
// Get field value
$price = get_field('price');
echo '<p>Price: $' . esc_html($price) . '</p>';

// Get field with formatting
the_field('description');

// Conditional display
if (get_field('featured')) {
    echo '<span class="badge">Featured</span>';
}
?>

Image Fields

<?php
$image = get_field('hero_image');

if ($image) {
    // Array return format
    echo '<img src="' . esc_url($image['url']) . '" alt="' . esc_attr($image['alt']) . '">';

    // Different sizes
    echo '<img src="' . esc_url($image['sizes']['medium']) . '">';
}
?>

Repeater Fields (Pro)

<?php if (have_rows('team_members')) : ?>
    <div class="team">
        <?php while (have_rows('team_members')) : the_row(); ?>
            <div class="member">
                <h3><?php the_sub_field('name'); ?></h3>
                <p><?php the_sub_field('title'); ?></p>
                <?php
                $photo = get_sub_field('photo');
                if ($photo) {
                    echo '<img src="' . esc_url($photo['url']) . '">';
                }
                ?>
            </div>
        <?php endwhile; ?>
    </div>
<?php endif; ?>

Flexible Content (Pro)

<?php if (have_rows('page_sections')) : ?>
    <?php while (have_rows('page_sections')) : the_row(); ?>

        <?php if (get_row_layout() == 'hero_section') : ?>
            <section class="hero">
                <h1><?php the_sub_field('headline'); ?></h1>
                <p><?php the_sub_field('subtext'); ?></p>
            </section>

        <?php elseif (get_row_layout() == 'content_block') : ?>
            <section class="content">
                <?php the_sub_field('content'); ?>
            </section>

        <?php elseif (get_row_layout() == 'gallery') : ?>
            <section class="gallery">
                <?php
                $images = get_sub_field('images');
                if ($images) {
                    foreach ($images as $image) {
                        echo '<img src="' . esc_url($image['url']) . '">';
                    }
                }
                ?>
            </section>

        <?php endif; ?>

    <?php endwhile; ?>
<?php endif; ?>

Practical Use Cases

Product Information

Fields:

• Price (Number)
• SKU (Text)
• Weight (Number)
• Dimensions (Group)
• Features (Repeater)
• Gallery (Gallery)

Team Member Profile

Fields:

• Job Title (Text)
• Department (Select)
• Photo (Image)
• Bio (WYSIWYG)
• Social Links (Repeater)
• Email (Email)

Event Listing

Fields:

• Event Date (Date Picker)
• Start Time (Time Picker)
• End Time (Time Picker)
• Location (Google Map)
• Ticket Link (URL)
• Speakers (Relationship)

Property Listing

Fields:

• Price (Number)
• Bedrooms (Number)
• Bathrooms (Number)
• Square Footage (Number)
• Property Type (Select)
• Features (Checkbox)
• Gallery (Gallery)
• Agent (Post Object)

Advanced ACF Features

Conditional Logic

Show/hide fields based on other field values:

1. Edit field
2. Expand "Conditional Logic"
3. Add rules:
   • Show this field if
   • [Field] [equals/not equals] [Value]

Example: Show "Other Description" field if "Category" equals "Other"

Options Pages (Pro)

Global settings accessible anywhere:

// Register options page
if (function_exists('acf_add_options_page')) {
    acf_add_options_page(array(
        'page_title' => 'Theme Settings',
        'menu_title' => 'Theme Settings',
        'menu_slug'  => 'theme-settings',
        'capability' => 'edit_posts',
        'redirect'   => false
    ));
}

// Get option field
$phone = get_field('company_phone', 'option');

Local JSON

Save field groups as JSON for version control:

1. Create folder: your-theme/acf-json/
2. ACF auto-saves groups as JSON
3. Commit to version control
4. Syncs across environments

Custom Location Rules

// Add custom rule
add_filter('acf/location/rule_types', function($choices) {
    $choices['Custom']['custom_rule'] = 'My Custom Rule';
    return $choices;
});

ACF Best Practices

Naming Conventions

// Good
hero_headline
team_member_photo
product_price

// Bad
field1
hh
price1

Performance

Minimize Queries:

// Bad - Multiple queries
$title = get_field('title');
$content = get_field('content');
$image = get_field('image');

// Better - Get all fields
$fields = get_fields();
$title = $fields['title'];
$content = $fields['content'];

Cache When Possible: Use transients for expensive ACF queries.

Organization

• Group related fields
• Use consistent naming
• Document field purposes
• Create logical field groups

Migrating ACF Data

Export/Import

1. Go to ACF > Tools
2. Export Field Groups (JSON or PHP)
3. Import on new site

Sync JSON

1. Set up Local JSON
2. Export to JSON
3. Copy JSON files to new site
4. Sync in ACF

Frequently Asked Questions

Is ACF Pro worth it?

If you need repeaters, flexible content, or options pages—absolutely. These features transform what's possible.

Does ACF slow down my site?

Minimal impact with proper use. Heavy use of repeaters with many rows may need optimization.

Can I use ACF with page builders?

Yes, most builders integrate with ACF. Elementor has native ACF widget support.

What happens if I deactivate ACF?

Data remains in database. You lose the interface and template functions, but data isn't deleted.

ACF vs Pods vs Custom Field Suite?

ACF has the best balance of power and usability. Pods offers more features but steeper learning. CFS is lightweight but less maintained.

Key Takeaways

• Custom fields add structured data beyond standard content
• ACF provides user-friendly interface for creating fields
• 30+ field types cover most use cases
• Pro version essential for repeaters and flexible content
• Proper naming and organization are crucial
• Output with proper escaping for security
• Local JSON enables version control

Next Steps

Start by identifying data that should be structured fields rather than content. Install ACF, create a simple field group, and practice displaying fields in templates. Explore our WordPress Theme Development guide for integration best practices.

Meta Description: Master WordPress custom fields with ACF. Learn field types, display methods, practical examples, and best practices for structured content management.

Keywords: wordpress custom fields, acf, advanced custom fields, wordpress meta, structured data wordpress