What is Advanced Custom Fields (ACF)?

ACF lets you create custom meta fields (like text, image, checkbox, repeater, date, etc.) and assign them to WordPress content. These fields give you more control over content structure and design.

The Advanced Custom Fields (ACF) plugin in WordPress is a powerful tool that allows you to add custom fields to your posts, pages, custom post types, users, taxonomy terms, media, and more. It’s widely used by developers to create flexible, scalable websites.

✅ Key Features of ACF Plugin

1. Add Custom Fields Easily
   Add fields like text, textarea, image, file, select, checkbox, radio button, true/false, etc., to your post edit screens.
2. Field Groups
   Organize multiple fields into groups and assign them to specific post types or pages.
3. Display Fields in Templates
   Use simple PHP functions like the_field() or get_field() in your theme files to display custom field data.
4. Support for Custom Post Types & Taxonomies
   ACF works seamlessly with custom post types and custom taxonomies.
5. Flexible Content Field (Pro)
   Lets you build complex layouts with repeaters, galleries, and nested fields.
6. Repeater Field (Pro)
   Allows repeating a group of sub-fields multiple times (e.g., for testimonials, team members).

How to Use ACF – Step-by-Step

1. Install & Activate Plugin
   • Go to Plugins > Add New
   • Search for “Advanced Custom Fields”
   • Click Install and then Activate
2. Create a Field Group
   • Go to Custom Fields > Add New
   • Name your field group (e.g., “Project Details”)
3. Add Fields
   • Add as many fields as you need (e.g., Client Name, Project Date, Budget)
   • Choose field type (Text, Number, Image, etc.)
4. Set Display Rules
   • Choose where this field group should appear (e.g., only on posts of a certain type)
5. Update or Publish
6. Display Fields in Theme
   • Use the following code in your theme’s template files: phpCopyEdit<?php the_field('client_name'); ?> Or, to store the value: phpCopyEdit<?php $client = get_field('client_name'); echo $client; ?>

ACF Free vs Pro

Use Cases

• Portfolio websites (client info, project URLs)
• Real estate listings (price, location, property type)
• Team member pages (name, role, photo)
• Events (start date, end date, location)

Creating Your First Custom Field

1. Go to ACF → Field Groups.
2. Click Add New.
3. Enter a title (e.g., Book Details).
4. Add a field:
   • Field Label: Author Name
   • Field Name: author_name
   • Field Type: Text
5. Set Location Rules:
   • Show this field group if Post Type = Post.
6. Publish the field group.

Now, whenever you edit a post, the Author Name field appears below the editor

Displaying the Field in a Theme

<?php the_field('author_name'); ?>

Or:

<?php echo get_field('author_name'); ?>

Example:

<h3>Author:
<?php the_field('author_name'); ?>
</h3>

Example: Course Details

Suppose you have a post titled:

BCA (Bachelor of Computer Applications)

Using ACF, create the following fields:

When editing the post, you’ll see:

Course Duration : 3 Years

Course Fees : ₹45,000

Eligibility : 12th Pass

Admission Last Date : 31-08-2026

Steps to Create Custom Fields

Step 1: Install ACF Plugin

• Dashboard → Plugins → Add New
• Search Advanced Custom Fields
• Install and Activate

Step 2: Create Field Group

Go to

ACF → Field Groups

Click

Add New

Title:

Course Details

Step 3: Add Fields

Field 1

Label : Course Duration
Name : course_duration
Type : Text

Field 2

Label : Course Fees
Name : course_fees
Type : Number

Field 3

Label : Eligibility
Name : eligibility
Type : Text

Field 4

Label : Admission Date
Name : admission_date
Type : Date Picker

Step 4: Location Rule

Show this Field Group if

Post Type = Post

Publish the Field Group.

Enter Data

Open a post named BCA Course

Fill the fields:

Course Duration : 3 Years

Course Fees : 45000

Eligibility : 12th Pass

Admission Date : 31-08-2026

Click Update.

Display Data in Theme

Display Course Duration

<?php the_field('course_duration'); ?>

Output

3 Years

Display Course Fees

<?php the_field('course_fees'); ?>

Output

45000

Display Eligibility

<?php the_field('eligibility'); ?>

Output

12th Pass

Display Admission Date

<?php the_field('admission_date'); ?>

Output

31-08-2026

Complete Example

<h2><?php the_title(); ?></h2>

<p>
<strong>Duration:</strong>
<?php the_field('course_duration'); ?>
</p>

<p>
<strong>Fees:</strong>
₹<?php the_field('course_fees'); ?>
</p>

<p>
<strong>Eligibility:</strong>
<?php the_field('eligibility'); ?>
</p>

<p>
<strong>Admission Last Date:</strong>
<?php the_field('admission_date'); ?>
</p>

Output

BCA

Duration : 3 Years

Fees : ₹45,000

Eligibility : 12th Pass

Admission Last Date : 31-08-2026

Another Example: Faculty Profile

Create the following fields:

Example data:

Faculty Name : Dr. Rajesh Patel

Qualification : Ph.D. in Computer Science

Experience : 12 Years

Email : rajesh@example.com

Photo : faculty.jpg

Display in PHP:

<h2><?php the_field('faculty_name'); ?></h2>

<p>Qualification:
<?php the_field('qualification'); ?></p>

<p>Experience:
<?php the_field('experience'); ?> Years</p>

<p>Email:
<?php the_field('email'); ?></p>

ACF Google Map and Image Field Example

Example 1: Google Map Field

Suppose you are creating a College Information page.

Step 1: Create Google Map Field

Go to:

ACF → Field Groups → Add New

Add a field:

Publish the Field Group.

Step 2: Select Location

While editing the page, search and select your college location on the Google Map.

Example:

Geetanjali Group of Colleges
Rajkot, Gujarat

Step 3: Display Google Map

<?php
$location = get_field('college_location');

if($location):
?>
<div id="map" style="height:400px;width:100%;"></div>

<script>
function initMap() {
    var location = {
        lat: <?php echo $location['lat']; ?>,
        lng: <?php echo $location['lng']; ?>
    };

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: location
    });

    new google.maps.Marker({
        position: location,
        map: map
    });
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

<?php endif; ?>

Output

------------------------------------
|                                  |
|        Google Map                |
|      📍 College Location          |
|                                  |
------------------------------------

Display Address Only

<?php
$location = get_field('college_location');

if($location):
    echo "<h3>".$location['address']."</h3>";
endif;
?>

Output

Geetanjali Group of Colleges,
Rajkot, Gujarat, India

Example 2: Image Field

Suppose you want to upload a College Logo.

Step 1: Create Image Field

Publish the field.

Step 2: Upload Image

Edit the page and upload:

college-logo.png

Step 3: Display Image

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

if($image):
?>

<img src="<?php echo $image['url']; ?>"
     alt="<?php echo $image['alt']; ?>"
     width="250">

<?php endif; ?>

Output

+--------------------+
|                    |
|   College Logo     |
|                    |
+--------------------+

Display Image with Caption

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

if($image):
?>

<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">

<p><?php echo $image['caption']; ?></p>

<?php endif; ?>

Return Format: Image URL

If the return format is Image URL, use:

<img src="<?php the_field('college_logo'); ?>" width="250">

Return Format: Image ID

If the return format is Image ID, use:

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

echo wp_get_attachment_image($image, 'medium');
?>

Complete Example (Google Map + Image)

<?php
$image = get_field('college_logo');
$location = get_field('college_location');
?>

<h2><?php the_title(); ?></h2>

<?php if($image): ?>
<img src="<?php echo $image['url']; ?>" width="200">
<?php endif; ?>

<?php if($location): ?>
<p><strong>Address:</strong> <?php echo $location['address']; ?></p>
<p><strong>Latitude:</strong> <?php echo $location['lat']; ?></p>
<p><strong>Longitude:</strong> <?php echo $location['lng']; ?></p>
<?php endif; ?>

Sample Output

College Name: Geetanjali Group of Colleges

[College Logo]

Address:
Geetanjali Group of Colleges,
Rajkot, Gujarat, India

Latitude : 22.3039
Longitude : 70.8022