Lesson 50 Implementation: Prevent Last-Second Bid Sniping with Automatic Auction Time Extension

One of the biggest frustrations in online auctions is bid sniping—when someone waits until the final few seconds before placing a bid, leaving other bidders with no opportunity to respond. Many professional auction platforms solve this by automatically extending the auction if a bid is received near the end.

In this lesson, we implemented the same feature in the Flipnzee Auctions plugin. Whenever a valid bid is placed during the final 60 seconds of an auction, the auction end time is automatically extended by five minutes.


What We Built

The auction system now:

  • Detects every successful bid.
  • Checks how much time remains before the auction ends.
  • If 60 seconds or less remain:
    • Extends the auction by five minutes.
    • Updates the auction end time in the database.
  • Otherwise, the auction continues normally.

This gives every interested bidder a fair opportunity to respond.


Step 1: Locate the Bid Processing Method

Open:

includes/class-bid-manager.php

Locate:

public static function place_bid(

This method already:

  • validates bids,
  • inserts the bid into the database,
  • updates the auction’s current highest bid.

Step 2: Keep the Existing Current Bid Update

After a successful bid, the plugin already updates the auction table.

$wpdb->update(
    $auction_table,
    array(
        'current_bid' => $bid_amount,
    ),
    array(
        'id' => $auction_id,
    ),
    array(
        '%f',
    ),
    array(
        '%d',
    )
);

Immediately after this block, we inserted the anti-sniping logic.


Step 3: Retrieve the Auction End Time

First, fetch the current auction end time.

$auction = $wpdb->get_row(
    $wpdb->prepare(
        "SELECT auction_end
        FROM {$auction_table}
        WHERE id = %d",
        $auction_id
    )
);

This retrieves the existing end time directly from the database.


Step 4: Calculate Remaining Time

Convert the auction end time into a Unix timestamp.

$end_time = strtotime(
    $auction->auction_end
);

$current_time = current_time(
    'timestamp'
);

$seconds_left =
    $end_time - $current_time;

Using timestamps makes it easy to compare dates mathematically.


Step 5: Detect Last-Minute Bids

Only extend the auction if less than one minute remains.

if ( $seconds_left <= 60 ) {

    // Extend auction
}

This prevents unnecessary extensions while protecting against last-second sniping.


Step 6: Extend the Auction

Add five minutes to the existing end time.

$new_end = date(
    'Y-m-d H:i:s',
    $end_time + ( 5 * 60 )
);

Notice that:

5 × 60 = 300 seconds

The new end time is generated in MySQL datetime format.


Step 7: Save the New Auction End Time

Update the auction record.

$wpdb->update(
    $auction_table,
    array(
        'auction_end' => $new_end,
    ),
    array(
        'id' => $auction_id,
    ),
    array(
        '%s',
    ),
    array(
        '%d',
    )
);

The countdown timer will now use this updated value.


Complete Anti-Sniping Code

/*
 * Anti-sniping:
 * Extend auction by 5 minutes if
 * less than 60 seconds remain.
 */
$auction = $wpdb->get_row(
    $wpdb->prepare(
        "SELECT auction_end
        FROM {$auction_table}
        WHERE id = %d",
        $auction_id
    )
);

if ( $auction ) {

    $end_time = strtotime(
        $auction->auction_end
    );

    $current_time = current_time(
        'timestamp'
    );

    $seconds_left =
        $end_time - $current_time;

    if ( $seconds_left <= 60 ) {

        $new_end = date(
            'Y-m-d H:i:s',
            $end_time + ( 5 * 60 )
        );

        $wpdb->update(
            $auction_table,
            array(
                'auction_end' => $new_end,
            ),
            array(
                'id' => $auction_id,
            ),
            array(
                '%s',
            ),
            array(
                '%d',
            )
        );
    }
}

Why This Feature Matters

Many professional auction websites use automatic auction extensions because they:

  • Prevent unfair last-second bidding.
  • Give genuine buyers time to react.
  • Encourage competitive bidding.
  • Increase seller confidence.
  • Often lead to higher final selling prices.

Instead of rewarding the fastest click during the final seconds, the auction rewards the highest genuine bidder.


Testing

Although this lesson was successfully implemented, testing was intentionally postponed.

Because auction end times depend on server time and WordPress timezone settings, it is more practical to verify the feature during a real auction approaching its end. When a bid is placed within the final 60 seconds, the auction end time should automatically increase by five minutes.

Download Source Code

Download the starting version of the plugin before the lesson:

Download the completed version after this lesson:


What We Learned

In this lesson we learned how to:

  • Improve auction fairness with anti-sniping logic.
  • Work with Unix timestamps in PHP.
  • Calculate remaining auction time.
  • Update MySQL datetime values.
  • Extend auction durations dynamically.
  • Build a feature commonly found in commercial auction platforms.

Final Thoughts

A simple five-minute extension can significantly improve the fairness and competitiveness of an online auction. By adding anti-sniping protection, Flipnzee Auctions now behaves much more like established auction marketplaces, ensuring that every bidder has a reasonable opportunity to respond before an auction closes.

Lesson 49: Display Professional Success and Error Messages After Bid Submission

In the previous lesson, we prevented users from bidding on their own highest bid using server-side validation. Although the validation worked correctly, users received no explanation when their bid was rejected.

In this lesson, we’ll build a simple notification system that displays clear success and error messages after every bid submission.

This greatly improves the user experience and makes our auction plugin feel much more professional.


Why User Feedback Matters

Imagine clicking Place Bid and nothing appears to happen.

Questions immediately arise:

  • Was my bid accepted?
  • Was there an error?
  • Should I click again?
  • Did the auction end?

Professional websites always inform users about the result of their actions.


The Solution

We’ll use a simple three-step approach:

  1. Detect whether the bid succeeded or failed.
  2. Redirect back to the auction page with a status parameter.
  3. Display a colored notification at the top of the auction.

Example User Experience

Successful Bid

✅ Your bid has been placed successfully.

Already Highest Bidder

❌ You are already the highest bidder.

Bid Too Low

❌ Your bid must be higher than the current bid.

Auction Closed

❌ This auction has already ended.

Login Required

❌ Please log in before placing a bid.

Step 1: Return Meaningful Error Codes

Our bid manager already returns:

return new WP_Error(
    'already_highest_bidder',
    __( 'You are already the highest bidder.', 'flipnzee-auctions' )
);

We’ll use these error codes to determine which message should be shown after the redirect.


Step 2: Redirect With a Status

Instead of silently redirecting back to the auction page, we’ll append a query parameter.

For example:

?bid=success

or

?bid=already_highest_bidder

or

?bid=too_low

These parameters tell the frontend exactly what happened.


Step 3: Read the Status

When the auction page loads, we’ll check:

$_GET['bid']

Depending on its value, we’ll display the appropriate notification.


Step 4: Style the Notification

Instead of plain text, we’ll create attractive notice boxes.

Examples:

Green success box

✅ Your bid has been placed successfully.

Red error box

❌ You are already the highest bidder.

Yellow warning box

⚠ Auction has ended.

Benefits

Implementing a notification system provides several advantages:

  • Better user experience
  • Immediate feedback after bidding
  • Fewer accidental duplicate submissions
  • Easier troubleshooting
  • More professional interface
  • Consistent behavior across all bid scenarios

Real-World Examples

Many popular platforms provide similar feedback after user actions.

For example:

  • eBay displays confirmation when a bid is accepted.
  • WooCommerce shows notices after adding items to the cart.
  • WordPress displays success and error notices after saving settings.

Users have come to expect this behavior, making it an essential feature for any interactive application.


What You’ll Learn Next

In Lesson 50, we’ll implement an Auction Winner system.

When an auction ends, the plugin will automatically determine the highest bidder and mark them as the winner. This lays the foundation for future features such as winner notifications, payment processing, and auction completion workflows.

Lesson 48: Prevent Users from Bidding on Their Own Highest Bid

In the previous lesson, we showed users whether they are currently winning or have been outbid. However, there is still one issue with our auction system:

A user who is already the highest bidder can continue placing higher bids against themselves.

Real-world auction platforms like eBay don’t allow this because it serves no purpose. In this lesson, we’ll prevent users from bidding again if they already hold the highest bid.


Why Is This Important?

Imagine this scenario:

  • Rajeev bids $500
  • Rajeev is now the highest bidder
  • Rajeev accidentally bids $550
  • Nobody else has bid yet

The auction price increases without any competition.

Preventing this keeps auctions fair and avoids unnecessary price inflation.


The Solution

Before accepting a bid, we need to determine:

  1. Who is currently the highest bidder?
  2. Is the logged-in user the same person?
  3. If yes, reject the bid.

This validation belongs in the bid processing logic, not just the frontend.


Step 1: Retrieve the Highest Bidder

Inside the bid placement function, retrieve the current highest bidder.

$highest_bidder =
    self::get_highest_bidder(
        $auction_id
    );

Step 2: Compare User IDs

Check whether the logged-in user already owns the highest bid.

if (
    $highest_bidder &&
    (int) $highest_bidder->bidder_id === (int) $bidder_id
) {
    return new WP_Error(
        'already_highest_bidder',
        __( 'You are already the highest bidder.', 'flipnzee-auctions' )
    );
}

Step 3: Stop Processing

If this condition is true:

  • No new bid is inserted.
  • Current bid remains unchanged.
  • Bid history remains unchanged.

The function exits immediately.


Step 4: Display the Error

Instead of silently failing, redirect back to the auction page with an error message such as:

You are already the highest bidder.

This provides immediate feedback to the user.


Why Backend Validation Matters

Some developers disable the bid button on the frontend and think the problem is solved.

It isn’t.

A malicious user could still:

  • submit the form manually
  • use browser developer tools
  • send a POST request directly

That’s why validation must happen inside the PHP bid processing code.


Example Flow

Current Auction

BidderAmount
Rajeev$500

Rajeev clicks Place Bid again.

Server checks:

Current Highest Bidder = Rajeev

Current User = Rajeev

Match = TRUE

Result:

❌ Bid rejected.

Another user bids:

BidderAmount
Rajeev$500
Amit$550

Now Rajeev is allowed to bid again because he is no longer the highest bidder.


Benefits

Implementing this validation provides several advantages:

  • Prevents self-bidding
  • Makes auctions behave like professional auction websites
  • Prevents accidental price increases
  • Protects users from unnecessary mistakes
  • Keeps auction history meaningful
  • Enforces rules securely on the server

What You’ll Learn Next

In Lesson 49, we’ll improve the bidding experience further by displaying success and error notifications after a bid is submitted, so users receive clear feedback such as:

  • ✅ Bid placed successfully.
  • ❌ Bid is too low.
  • ❌ You are already the highest bidder.
  • ❌ Auction has ended.

This will make the auction workflow much more user-friendly and professional.

Lesson 47 Implementation – Display the Highest Bidder and Show Winning/Outbid Status

In the previous lesson, we created the method to retrieve the highest bidder from the database. In this implementation lesson, we integrate that functionality into the auction page so visitors can immediately see who is currently leading the auction.

Additionally, logged-in bidders receive a visual message telling them whether they are currently winning or have been outbid.

This makes the auction experience much more interactive and similar to professional auction platforms.


Step 1: Retrieve the Highest Bidder

Open:

includes/class-shortcodes.php

Locate the code where bids are loaded for the Bid History section.

It should look like this:

$bids = Flipnzee_Bid_Manager::get_bids(
    $auction['id']
);

Immediately after it, add:

$highest_bidder =
    Flipnzee_Bid_Manager::get_highest_bidder(
        $auction['id']
    );

The final code becomes:

$bids = Flipnzee_Bid_Manager::get_bids(
    $auction['id']
);

$highest_bidder =
    Flipnzee_Bid_Manager::get_highest_bidder(
        $auction['id']
    );

This retrieves the highest bid record from the database and stores it for use throughout the auction page.


Step 2: Display the Highest Bidder

Locate the auction details table.

Replace the existing Highest Bidder row with:

<tr>

    <th>Highest Bidder</th>

    <td>

        <?php

        if ( $highest_bidder ) {

            echo esc_html(
                $highest_bidder->display_name
            );

        } else {

            esc_html_e(
                'No bids yet',
                'flipnzee-auctions'
            );

        }

        ?>

    </td>

</tr>

Now the auction page displays the current leading bidder instead of the placeholder text.


Step 3: Show the Winning/Outbid Status

After the auction details table closes:

</table>

add:

<?php if ( is_user_logged_in() && $highest_bidder ) : ?>

    <?php if (
        get_current_user_id()
        === (int) $highest_bidder->bidder_id
    ) : ?>

        <div class="flipnzee-bid-status flipnzee-winning">
            🏆 You are currently the highest bidder.
        </div>

    <?php else : ?>

        <div class="flipnzee-bid-status flipnzee-outbid">
            ⚠️ You have been outbid.
        </div>

    <?php endif; ?>

<?php endif; ?>

Because this block is placed outside the table, it produces valid HTML and displays correctly.


Step 4: Add CSS Styling

Open:

assets/css/frontend.css

Add:

.flipnzee-bid-status {

    margin: 15px 0;

    padding: 12px 15px;

    border-radius: 6px;

    font-weight: 600;

}

.flipnzee-winning {

    background: #e9f8ef;

    color: #0b6b35;

    border-left: 4px solid #2ecc71;

}

.flipnzee-outbid {

    background: #fff3f3;

    color: #b30000;

    border-left: 4px solid #e74c3c;

}

This makes the notification visually stand out and improves the overall user experience.


Step 5: Test the Feature

Create two WordPress user accounts.

Log in as the first user and place a bid.

You should see:

🏆 You are currently the highest bidder.

Log in as the second user and place a higher bid.

Now:

  • User 2 sees:
🏆 You are currently the highest bidder.
  • User 1 sees:
⚠️ You have been outbid.

The Highest Bidder row also updates automatically after refreshing the page.


Complete Source Code

Loading the Highest Bidder

$bids = Flipnzee_Bid_Manager::get_bids(
    $auction['id']
);

$highest_bidder =
    Flipnzee_Bid_Manager::get_highest_bidder(
        $auction['id']
    );

Highest Bidder Row

<tr>

    <th>Highest Bidder</th>

    <td>

        <?php

        if ( $highest_bidder ) {

            echo esc_html(
                $highest_bidder->display_name
            );

        } else {

            esc_html_e(
                'No bids yet',
                'flipnzee-auctions'
            );

        }

        ?>

    </td>

</tr>

Winning / Outbid Message

<?php if ( is_user_logged_in() && $highest_bidder ) : ?>

    <?php if (
        get_current_user_id()
        === (int) $highest_bidder->bidder_id
    ) : ?>

        <div class="flipnzee-bid-status flipnzee-winning">
            🏆 You are currently the highest bidder.
        </div>

    <?php else : ?>

        <div class="flipnzee-bid-status flipnzee-outbid">
            ⚠️ You have been outbid.
        </div>

    <?php endif; ?>

<?php endif; ?>

CSS

.flipnzee-bid-status {

    margin: 15px 0;

    padding: 12px 15px;

    border-radius: 6px;

    font-weight: 600;

}

.flipnzee-winning {

    background: #e9f8ef;

    color: #0b6b35;

    border-left: 4px solid #2ecc71;

}

.flipnzee-outbid {

    background: #fff3f3;

    color: #b30000;

    border-left: 4px solid #e74c3c;

}

Download Source Code

Download the starting version of the plugin before the lesson:

Download the completed version after this lesson:


What We Achieved

By completing this implementation:

  • Displayed the current highest bidder on every auction.
  • Replaced the placeholder text with real bidder information from the database.
  • Added personalized Winning and Outbid notifications for logged-in users.
  • Styled the notifications for a more professional appearance.
  • Improved the auction experience by giving bidders immediate feedback on their current status.

With Lesson 47 complete, Flipnzee Auctions now provides real-time auction context that helps users quickly understand whether they are leading the auction or need to place a higher bid.

Lesson 47: Showing the Highest Bidder and Bid Status

Now that our auction system records bids, validates minimum bid increments, and displays bid history, it’s time to improve the user experience.

One of the first things bidders want to know after placing a bid is:

  • Am I currently winning?
  • Who is the highest bidder?
  • Has someone outbid me?

In this lesson, we’ll enhance Flipnzee Auctions by displaying the current highest bidder and showing personalized bid status messages.


Why Is This Important?

Imagine placing a bid and seeing only this:

Current Bid: $2,500

You have no idea whether:

  • you are winning,
  • someone else has already outbid you,
  • or you are still the highest bidder.

Professional auction platforms always provide this information.


What We’ll Build

After this lesson, the auction page will display something like:

Current Bid
$2,500

Highest Bidder
Rajeev B.

✔ You are currently the highest bidder.

Or, if another user submits a higher bid:

Current Bid
$2,700

Highest Bidder
John D.

⚠ You have been outbid.

Step 1: Identify the Highest Bid

Since our bids are already stored in the database, we’ll retrieve the latest highest bid for the auction.

Conceptually:

SELECT *
FROM wp_flipnzee_bids
WHERE auction_id = ?
ORDER BY bid_amount DESC
LIMIT 1;

Step 2: Retrieve the Bidder

Once the highest bid is known, we’ll obtain the bidder’s WordPress user information.

Example:

$user = get_userdata( $highest_bid->bidder_id );

This allows us to display:

  • Display Name
  • Username
  • Or an anonymized version

Step 3: Display the Highest Bidder

The auction details will gain a new row.

Example:

Current Bid      $2,500
Highest Bidder   Rajeev B.
Buy Now          $3,000

This immediately makes the auction more engaging.


Step 4: Detect the Logged-in User

If the visitor is logged in, we can compare:

Current User ID

vs

Highest Bidder ID

If they match:

✔ You are currently the highest bidder.

Otherwise:

⚠ You have been outbid.

Step 5: Improve Privacy

Some auction websites display full names.

Others show only initials.

For example:

Instead of:

Rajeev Bagra

display:

Rajeev B.

or

R*** B***

This balances transparency with user privacy.


Step 6: Handle Auctions Without Bids

When no bids exist, the page should gracefully display:

Highest Bidder

No bids yet.

instead of leaving the section blank.


Expected Result

Before:

Current Bid
$2,500

Bid History
...

After:

Current Bid
$2,500

Highest Bidder
Rajeev B.

✔ You are currently the highest bidder.

Bid History
...

What We’ll Learn

In this lesson you’ll learn how to:

  • Query the highest bid from the database.
  • Retrieve WordPress user information.
  • Compare bidder IDs.
  • Display personalized auction messages.
  • Improve auction transparency.
  • Handle edge cases where no bids exist.

Why This Matters

Displaying the highest bidder transforms the auction from a simple list of numbers into a live, competitive experience. Visitors immediately understand who is leading, and bidders receive instant feedback about whether they are winning or have been outbid.

These small usability improvements make the plugin feel much closer to a production-ready auction platform.


Assignment

Before moving to Lesson 48, try to:

  • Display the current highest bidder.
  • Show “You are currently the highest bidder” when appropriate.
  • Show “You have been outbid” when another user places a higher bid.
  • Display “No bids yet” when an auction has received no bids.

In the next lesson, we’ll build on this by introducing automatic auction closing, so auctions can end on schedule and no longer accept bids after their closing time.

Lesson 46: Enforcing a Minimum Bid Increment in Flipnzee Auctions

One of the easiest ways to improve an auction system is by preventing bidders from increasing the current price by tiny amounts. On professional auction platforms like eBay, each new bid must exceed the current bid by a minimum increment.

In this lesson, we’ll implement the same concept in our Flipnzee Auctions plugin by introducing a Minimum Bid Increment. This ensures every new bid is meaningful and keeps the auction moving smoothly.


Why Is a Minimum Bid Increment Important?

Imagine an auction with a current bid of $1,000.

Without validation, users could place bids like:

  • $1,000.01
  • $1,000.02
  • $1,000.03

Technically, each bid is higher, but they barely advance the auction. This can frustrate bidders and unnecessarily prolong the bidding process.

By requiring a minimum increment—for example, $10—the next valid bid would have to be at least $1,010.


What We’ll Build

At the end of this lesson, bidders will only be allowed to submit bids that satisfy:

New Bid >= Current Bid + Minimum Increment

For example:

Current BidMinimum IncrementMinimum Allowed Bid
$100$5$105
$250$25$275
$1,000$50$1,050

Step 1: Define a Minimum Increment

We’ll begin with a fixed increment.

$minimum_increment = 10;

Later, we’ll make this configurable from the WordPress admin.


Step 2: Calculate the Minimum Allowed Bid

Instead of checking only whether the bid is greater than the current bid, we’ll calculate the next valid amount.

Example:

$minimum_allowed_bid =
    $current_bid +
    $minimum_increment;

Step 3: Validate the Bid

The bidding logic will reject bids below the minimum requirement.

Conceptually:

if (
    $bid_amount <
    $minimum_allowed_bid
) {

    return false;

}

Step 4: Show a Helpful Error Message

Instead of silently rejecting the bid, inform the user why it failed.

Example:

Your bid must be at least $1,010.

Helpful validation messages create a much better user experience.


Step 5: Display the Minimum Bid

Near the bid input box, we’ll display information such as:

Minimum Bid:
$1,010

This tells visitors exactly what they need to bid.


Step 6: Prevent Invalid Form Submission

We’ll add HTML attributes so users cannot enter values below the minimum amount.

For example:

<input
type="number"
min="1010"
step="10">

This provides immediate feedback before the form is even submitted.


Expected Result

Instead of allowing any value above the current bid:

Current Bid:
$1,000

Your Bid:
1001 ❌

Place Bid

Visitors will see:

Current Bid:
$1,000

Minimum Bid:
$1,010

Your Bid:
1010 ✔

Place Bid

What We’ll Learn

In this lesson, you’ll learn how to:

  • Calculate dynamic minimum bid values
  • Validate bids on the server
  • Improve user experience with meaningful validation messages
  • Add client-side validation using HTML attributes
  • Prepare the plugin for configurable bidding rules

Why This Matters

Professional auction platforms don’t simply accept any higher bid—they enforce bidding rules that keep auctions fair, competitive, and easy to follow.

By adding a minimum bid increment, Flipnzee Auctions becomes significantly more professional and prevents users from placing trivial bid increases.


Assignment

Before moving to Lesson 47, try the following:

  • Set the minimum increment to $10.
  • Verify that bids below the required amount are rejected.
  • Confirm that valid bids are still accepted and saved.
  • Display the minimum required bid below the current bid so visitors always know the next valid amount.

In the next lesson, we’ll take this a step further by making the minimum bid increment configurable from the WordPress admin, allowing different auction strategies without changing any code.

Lesson 45: Displaying Bid History in Flipnzee Auctions


In the previous lesson, we built the core bidding engine that allows logged-in users to place bids on an auction. Every successful bid is securely stored in the database and the current highest bid is updated automatically.

However, a real auction is about more than just the latest bid. Participants want to see the competition, understand how the auction has progressed, and gain confidence that the bidding process is transparent.

In this lesson, we’ll build a Bid History feature that displays every bid placed on an auction.


What You’ll Learn

By the end of this lesson you will know how to:

  • Retrieve auction bids from the database
  • Sort bids from highest to lowest
  • Display bidder information
  • Show bid timestamps
  • Build a frontend bid history table
  • Gracefully handle auctions with no bids

Why Bid History Matters

Imagine visiting an auction where only the highest bid is visible.

Questions immediately arise:

  • How many people are bidding?
  • When was the last bid placed?
  • Has the auction been active?
  • Is the current price increasing steadily?

Displaying bid history answers all these questions and makes the auction feel much more trustworthy.


What We Will Build

Each auction page will display something similar to this:

BidderAmountTime
Rajeev$6505 mins ago
John$60015 mins ago
Alice$55030 mins ago

Visitors can immediately understand the progress of the auction.


New Functionality

We’ll enhance our plugin by adding:

  • A database query to fetch bids
  • Bid history retrieval method
  • Frontend HTML table
  • User name lookup
  • Proper currency formatting
  • Date and time formatting

User Experience Improvements

If no bids exist, instead of showing an empty table, visitors will see a friendly message such as:

No bids have been placed yet. Be the first bidder!

This small detail greatly improves usability.


Security Considerations

While displaying bids, we’ll ensure:

  • All output is properly escaped
  • User data is sanitized
  • Only public information is displayed
  • SQL queries use prepared statements

Following WordPress coding standards remains a priority.


Skills You’ll Practice

During this lesson you’ll gain experience with:

  • Database retrieval using $wpdb
  • Looping through database results
  • Fetching WordPress user information
  • Formatting frontend tables
  • Escaping output correctly
  • Improving frontend user experience

Expected Outcome

After completing this lesson, every auction page will show:

  • Current highest bid
  • Complete bid history
  • Bidder names
  • Bid amounts
  • Bid timestamps

The auction will feel much more interactive and transparent.


Coming Up Next

After implementing bid history, we’ll continue improving the auction system with features such as:

  • Minimum bid increments
  • Automatic auction closing
  • Declaring the winning bidder
  • Buy Now functionality
  • Auction status badges
  • Email notifications

Each lesson will move Flipnzee Auctions closer to becoming a fully featured marketplace plugin.

Lesson 44: Building a Bid History Section for Every Auction

Objective

In this lesson, we will add a Bid History section to every auction page.

Instead of only showing the current highest bid, visitors will be able to see the progression of bidding throughout the auction.


Why This Feature Matters

Every successful auction platform provides transparency.

A visible bid history helps users:

  • Build confidence in the auction
  • See bidding activity
  • Understand how quickly prices are increasing
  • Encourage competitive bidding
  • Increase engagement

Without bid history, visitors only know the current highest bid.

With bid history, they can see the auction’s journey.


What We Will Build

Each auction page will include a new section:

Bid History

-----------------------------------
Bidder         Amount        Time
-----------------------------------
Raj            $550         2 mins ago
Anita          $525         10 mins ago
John           $500         25 mins ago
-----------------------------------

Initially, we can display:

  • Bid amount
  • Date & time

Later, when user accounts are fully integrated, we can add bidder names (or anonymised usernames).


Features We’ll Implement

1. Create a Bid History Table

We’ll create a new custom database table to store every bid.

Example fields:

  • Bid ID
  • Auction ID
  • User ID
  • Bid Amount
  • Bid Time

2. Record Every Bid

Instead of simply replacing the current bid, every bid will be stored permanently.

This creates a complete bidding history.


3. Retrieve Bid History

We’ll build helper functions to retrieve bids ordered by:

Newest First

or

Highest First

depending on the display requirement.


4. Display Bid History on the Frontend

Each auction card (or single auction page) will include:

Latest Bids

beneath the auction details.


5. Format Dates

Instead of displaying raw database timestamps, we’ll use WordPress date formatting functions.

Example:

Instead of:

2026-07-03 15:30:00

display

3 July 2026
3:30 PM

or

5 minutes ago

for recent bids.


6. Empty State

If no bids exist yet:

No bids have been placed yet.

Be the first bidder!

What You’ll Learn

By completing this lesson, you’ll gain experience with:

  • Creating another custom database table
  • Database relationships
  • One-to-many data structures
  • Retrieving ordered records
  • Displaying dynamic lists
  • Formatting dates and times
  • Improving auction transparency

Why This Is an Important Milestone

Until now, the plugin has focused primarily on auction setup and presentation.

With bid history, we begin adding the interactive elements that make an auction platform feel alive. It also lays the foundation for future features such as:

  • Highest bidder tracking
  • Automatic winner selection
  • User bidding dashboards
  • Email notifications
  • Auction analytics
  • Escrow integration after auction completion

Each of these features will build naturally on the bid history system.


End Result

After Lesson 44, every auction will not only display its current price but also the complete story of how bidding has progressed, making the Flipnzee Auctions plugin more transparent, engaging, and closer to a production-ready auction platform.

Lesson 44 Implementation: Building the First Working Bidding System

Lesson 43: Displaying Dynamic Auction Status Badges

As the Flipnzee Auctions plugin continues to evolve, the auction cards are becoming much more than simple listings. Visitors can already see verified analytics, pricing information, and a live countdown timer. In this lesson, we’ll make the auction status even more obvious by introducing dynamic status badges.

Instead of requiring buyers to read the countdown or auction dates, a color-coded badge will immediately indicate whether an auction is currently active, approaching its end, or has already closed.


Why Status Badges Matter

People naturally respond to visual indicators faster than text.

Imagine browsing dozens of auction listings.

Without status badges, every listing appears similar.

With status badges, visitors can instantly identify auctions that deserve immediate attention.

For example:

🟢 Live Auction

🟡 Ending Soon

🔴 Auction Ended

These simple indicators improve usability and create a more engaging marketplace.


What You Will Learn

By the end of this lesson, you’ll know how to:

  • Compare auction end dates with the current time.
  • Determine the current auction status.
  • Display different badges based on auction status.
  • Apply different CSS styles for each badge.
  • Keep the logic reusable for future enhancements.

Badge Rules

For the first implementation, we’ll use three simple conditions.

Live Auction

Displayed when the auction is active and has more than 24 hours remaining.

Example:

🟢 Live Auction

Ending Soon

Displayed when less than 24 hours remain before the auction closes.

Example:

🟡 Ending Soon

This helps attract attention to auctions that are approaching their deadline.


Auction Ended

Displayed once the countdown reaches zero.

Example:

🔴 Auction Ended

This clearly communicates that bidding is no longer available.


Why Use Color?

The badges use colors that visitors already understand intuitively.

  • Green → Safe / Active
  • Yellow → Warning / Limited Time
  • Red → Closed / Expired

This allows buyers to recognize the auction state without reading additional text.


Planned Implementation

We’ll build this feature step by step.

Step 1

Determine the current auction status using PHP.

Step 2

Create a reusable badge variable.

Step 3

Display the badge above the auction title.

Step 4

Style each badge using CSS.

Step 5

Test all three auction states.


Expected Result

Each auction card will begin with a prominent status badge.

Example:

🟢 Live Auction

[ Featured Image ]

Calnzee.com

✔ Google Verified Analytics

👥 Monthly Users
📈 Monthly Sessions
🔍 Google Impressions

Start Price
Current Bid
Buy Now

Auction Ends In

5d 12h 14m 38s

View Listing

If the auction has less than one day remaining:

🟡 Ending Soon

If it has already expired:

🔴 Auction Ended

Looking Ahead

These badges are only the beginning.

Future versions of Flipnzee Auctions could introduce additional indicators such as:

  • ⭐ Featured Auction
  • 🔥 Popular Auction
  • 💰 Reserve Met
  • 🆕 Newly Listed
  • 🏆 Highest Bid Reached

Because the badge system will be reusable, new statuses can be added without redesigning the auction card.


What You’ll Gain

Status badges provide immediate visual feedback, helping buyers scan listings more efficiently and focus on auctions that require attention.

Combined with verified analytics, pricing, and the live countdown timer implemented in previous lessons, these badges move Flipnzee Auctions another step closer to becoming a polished, professional website marketplace.


Source Code

Available after implementation.


Next Lesson

In Lesson 43 (Implementation), we’ll calculate the auction status in PHP, display the appropriate badge on each auction card, and style it using CSS so that buyers can instantly distinguish between live, ending soon, and ended auctions.

Lesson 42: Build a Live Auction Countdown Timer in Your WordPress Auction Plugin

One of the defining features of any auction platform is a live countdown timer. Buyers naturally pay more attention when they can see exactly how much time remains before an auction closes. A countdown also creates urgency, encouraging users to place bids before time runs out.

In this lesson, we’ll enhance the Flipnzee Auctions plugin by replacing the static auction end date with a dynamic countdown timer that updates every second.


What You Will Build

Instead of displaying:

Auction Ends
03 Jul 2026

the auction card will display something like:

Auction Ends In

2 Days
14 Hours
36 Minutes
22 Seconds

When the auction expires, the countdown will automatically change to:

Auction Ended

without requiring the page to reload.


Why This Feature Matters

A live countdown provides several advantages:

  • Creates urgency among buyers.
  • Makes auctions feel active and dynamic.
  • Reduces confusion about auction closing time.
  • Improves user engagement.
  • Gives Flipnzee a more professional marketplace appearance.

Nearly every successful auction platform uses countdown timers because they encourage participation during the final hours of an auction.


What You Will Learn

In this lesson, you’ll learn how to:

  • Pass PHP date values to JavaScript.
  • Create HTML placeholders for dynamic content.
  • Write JavaScript countdown logic.
  • Calculate days, hours, minutes, and seconds.
  • Update the display every second.
  • Handle expired auctions gracefully.
  • Keep the implementation lightweight without external libraries.

Implementation Plan

We will complete this lesson in several small steps:

Step 1

Create a countdown placeholder inside the auction card.

Step 2

Pass the auction end time into a data attribute.

Step 3

Create a JavaScript file for countdown functionality.

Step 4

Calculate the remaining time.

Step 5

Refresh the timer every second.

Step 6

Display “Auction Ended” when time reaches zero.

Step 7

Style the countdown using CSS.


Expected Result

Every Flipnzee auction listing will display a real-time countdown similar to:

✔ Google Verified Analytics

👥 Monthly Users        91
📈 Monthly Sessions    109
🔍 Google Impressions    0

Start Price          $111
Current Bid            $0
Buy Now             $333

Auction Ends In

2d 14h 36m 22s

[ View Listing ]

As time passes, the countdown updates automatically without refreshing the page.


Developer Tips

  • Keep countdown calculations in JavaScript instead of PHP.
  • Use setInterval() to update once per second.
  • Always calculate using Unix timestamps to avoid formatting issues.
  • Stop the timer after the auction ends to reduce unnecessary processing.
  • Use CSS classes instead of inline styles for easier maintenance.
  • Ensure the timer respects the visitor’s local time zone by passing a standard date format such as ISO 8601.

Source Code

Available after implementation.


Coming Up Next

In Lesson 43, we’ll make the auction cards even more engaging by adding color-coded auction status badges such as:

  • 🟢 Live Auction
  • 🟡 Ending Soon
  • 🔴 Auction Ended

These visual indicators will help buyers instantly recognize the current state of every auction listing before opening the full listing page.