Advanced Custom Fields (ACF) allows you to add extra data fields to any part of your website.

Examples of custom fields:

• Price
• Ratings
• Client Name
• Project URL
• Gallery Images
• Download Links
• Additional description

ACF is essential for building dynamic websites, directories, portfolios, and custom templates.

ACF Free Includes:

• Text
• Number
• Image
• Textarea
• File
• Checkbox
• Select

ACF Pro Includes Everything in Free +

• Repeater fields
• Flexible content fields
• Gallery field
• Clone field
• Dynamic relationships
• ACF Blocks for Gutenberg

For advanced websites, ACF Pro is highly recommended.

Install ACF Free:

1. Go to Plugins → Add New
2. Search Advanced Custom Fields
3. Install → Activate

Install ACF Pro:

1. Download from ACF website
2. Upload via Plugins → Add New → Upload Plugin
3. Activate with license

Step 1 — Create a Field Group

1. Go to ACF → Field Groups
2. Click Add New
3. Name it (Example: Service Details)

Step 2 — Add Fields

Click Add Field. Choose from:

• Text
• Number
• Email
• URL
• Textarea
• Select box
• Repeater (Pro)
• Gallery (Pro)
• WYSIWYG editor
• Image upload

Step 3 — Assign Location Rules

Tell ACF where the field should appear.

• Post Type = Services
• Post Type = Page
• Post Template = Custom Template
• User Role = Administrator

Example: Display only on the CPT “Projects”.

Step 4 — Publish

Your custom fields now appear on the selected edit screens.

1. Open any post or custom post type
2. Your ACF fields will appear below the editor
3. Enter the data such as:
   • Price: ₹2999
   • Client Name: John Doe
   • Project URL: https://example.com
   • Gallery images
4. Save / Update

You’ve now added structured content using ACF.

Step 1 — Edit a Template with Elementor

Open a Single Post, Page, or CPT template.

Step 2 — Use Dynamic Tags

1. Drag a widget (Text, Image, Button)
2. Click on its Dynamic Tags icon
3. Select ACF Field
4. Choose the field you created

Examples:

• ACF Image → Display a gallery thumbnail
• ACF Text → Display price
• ACF URL → Link a button to project URL
• Repeater field → Use Elementor Loop Grid

Elementor + ACF is the best combination for dynamic websites.

Use the_field() or get_field() inside your theme template.

Example — Display a custom field “price”:

<h3>Price: ₹</h3>

Example — Display an ACF image:

    <img src="" alt="" />

Using PHP gives you full control over theme customization.

• Service pricing tables
• Portfolio project details
• Team member profiles
• Real estate listings
• Restaurant menu items
• Directory listings
• Product specifications
• Custom WooCommerce layouts

ACF makes any type of structured content possible.

1. ACF Fields Not Showing?

• Check location rules
• Ensure post type supports custom fields
• Enable REST API

2. Dynamic Tags Not Updating?

• Clear cache
• Regenerate Elementor CSS
• Ensure correct template assignment

3. Repeater Field Not Displaying?

Use Elementor Loop Builder or custom PHP loop.

4. Gallery Field Not Working?

Ensure your theme supports wp_get_attachment_image().