Advanced Custom Fields plugin in Wordpress - Mini Project: Build & Apply

Create a Custom WordPress Page with Advanced Custom Fields

📖 Scenario: You are building a WordPress site for a local bakery. You want to create a custom page template that shows special offers with custom fields for the offer title, description, and expiration date.

🎯 Goal: Build a WordPress page template that uses the Advanced Custom Fields (ACF) plugin to display a special offer with a title, description, and expiration date.

📋 What You'll Learn

Create custom fields for offer_title, offer_description, and offer_expiration using ACF

Create a PHP array with sample offer data

Add a variable to hold the current date for comparison

Use ACF functions to display the offer fields in the template

Show a message if the offer is expired

💡 Why This Matters

🌍 Real World

Many WordPress sites use Advanced Custom Fields to add flexible content areas that site owners can edit easily without coding.

💼 Career

Understanding how to use ACF and PHP together is essential for WordPress developers building custom themes and client sites.

1

Set up sample offer data array

Create a PHP array called $offer with keys 'offer_title', 'offer_description', and 'offer_expiration'. Set the values exactly to 'Spring Sale', 'Get 20% off all cakes.', and '2024-07-01' respectively.

Wordpress

<?php
// WordPress page template start

// Your code here

Need a hint?

Use a PHP array with keys and exact string values as shown.

2

Add current date variable

Add a variable called $today and set it to the current date in Y-m-d format using the date() function.

Wordpress

 'Spring Sale',
    'offer_description' => 'Get 20% off all cakes.',
    'offer_expiration' => '2024-07-01'
];

// Your code here

Need a hint?

Use date('Y-m-d') to get the current date string.

3

Display offer fields using ACF functions

Use the_field() function calls to display the offer_title, offer_description, and offer_expiration fields from the $offer array. Use echo with the array values to simulate ACF output.

Wordpress

 'Spring Sale',
    'offer_description' => 'Get 20% off all cakes.',
    'offer_expiration' => '2024-07-01'
];

$today = date('Y-m-d');

// Your code here

Need a hint?

Use echo with array values inside HTML tags to show the fields.

4

Show expiration message if offer expired

Add an if statement that compares $today with $offer['offer_expiration']. If $today is greater, echo a paragraph with the text 'This offer has expired.'.

Wordpress

 'Spring Sale',
    'offer_description' => 'Get 20% off all cakes.',
    'offer_expiration' => '2024-07-01'
];

$today = date('Y-m-d');

echo '' . $offer['offer_title'] . '';
echo '' . $offer['offer_description'] . '';
echo 'Expires on: ' . $offer['offer_expiration'] . '';

// Your code here

Need a hint?

Use a simple if condition comparing the date strings.