Lesson 49 (Implementation): Display Professional Success and Error Messages After Bidding

Team Wpnzee on July 4, 2026

bid

In the previous lesson, the Flipnzee Auctions plugin redirected users back to the auction page after a bid was processed. While the functionality worked, users had no confirmation that their bid had been accepted or rejected.

In this implementation lesson, the plugin is enhanced to display clear success and error notifications using URL parameters, providing a much better user experience.

Objective

Implement professional notification messages that inform users whether:

  • Their bid was accepted.
  • Their bid was rejected.

Instead of silently refreshing the page, users now receive immediate feedback.

Step 1: Redirect With Status Parameter

The bid handler already redirects back to the auction page.

Instead of simply redirecting:

wp_safe_redirect( get_permalink( $listing_id ) );
exit;

it was updated to include a status parameter.

Successful bid:

wp_safe_redirect(
    add_query_arg(
        'bid',
        'success',
        get_permalink( $listing_id )
    )
);

exit;

Failed bid:

wp_safe_redirect(
    add_query_arg(
        'bid',
        'failed',
        get_permalink( $listing_id )
    )
);

exit;

This produces URLs like:

https://flipnzee.com/testing/?bid=success

or

https://flipnzee.com/testing/?bid=failed

Step 2: Detect the Status Parameter

Inside includes/class-shortcodes.php, just before displaying the auction details table, a check was added.

<?php

if ( isset( $_GET['bid'] ) ) {

    $status = sanitize_text_field(
        wp_unslash( $_GET['bid'] )
    );

    if ( 'success' === $status ) {
        ?>

        <div class="flipnzee-notice flipnzee-success">
            ✅ Your bid has been placed successfully.
        </div>

        <?php

    } elseif ( 'failed' === $status ) {
        ?>

        <div class="flipnzee-notice flipnzee-error">
            ❌ Your bid could not be accepted.
        </div>

        <?php
    }
}
?>

The plugin now safely reads the URL parameter and displays the appropriate message.

Step 3: Style the Notifications

The following CSS was added to assets/css/frontend.css.

.flipnzee-notice {

    padding: 15px;

    margin: 20px 0;

    border-radius: 6px;

    font-weight: 600;

}

.flipnzee-success {

    background: #ecfdf3;

    color: #046c4e;

    border-left: 5px solid #10b981;

}

.flipnzee-error {

    background: #fef2f2;

    color: #b91c1c;

    border-left: 5px solid #ef4444;

}

These styles make notifications stand out while remaining consistent with modern WordPress admin and frontend design.

Step 4: Test the Feature

Two scenarios were tested.

Successful Bid

After placing a valid bid, the user is redirected to:

?bid=success

and sees:

✅ Your bid has been placed successfully.

Failed Bid

If the bid is rejected, the user is redirected to:

?bid=failed

and sees:

❌ Your bid could not be accepted.

Troubleshooting During Implementation

Several issues were encountered before the feature worked correctly.

1. Notification Did Not Appear

Initially, the URL contained:

?bid=success

but no message appeared.

The issue was that the notification block had been inserted inside a section of code that wasn’t executed at the correct point in the page lifecycle.

Moving the notification logic immediately before the auction details table resolved the problem.

2. PHP Syntax Error

A parse error occurred after moving code.

Using the PHP linter helped identify the exact line causing the issue.

php -l includes/class-shortcodes.php

This quickly revealed an unexpected token error, allowing it to be corrected before uploading the plugin.

3. HTML Structure

During implementation, the winning/outbid status message was accidentally placed inside a <tr> element.

This produced invalid HTML.

The message block was moved outside the table so that the auction metadata table remained structurally correct.

4. User Display Name

While testing, the highest bidder appeared simply as:

user

instead of the expected display name.

The SQL query was working correctly—the WordPress account’s Display Name was simply set to “user”. Updating the profile’s display name fixed the issue.

Final Result

The auction page now provides immediate visual feedback whenever a bid is processed.

Users no longer have to guess whether their action succeeded, making the bidding experience more intuitive and professional.

Download Source Code

Download the starting version of the plugin before the lesson:

⬇ Download Plugin (After Lesson 48) (1 download )

Download the completed version after this lesson:

⬇ Download Plugin (After Lesson 49) (0 downloads )

What We Learned

In this lesson, we learned how to:

  • Redirect users with URL parameters.
  • Read query string values safely using sanitize_text_field() and wp_unslash().
  • Display contextual success and error notices.
  • Style frontend notifications with CSS.
  • Validate PHP files using the built-in linter.
  • Keep HTML structure valid while inserting dynamic content.

Conclusion

Although the underlying bidding logic was already functional, adding user-facing notifications significantly improved the usability of the Flipnzee Auctions plugin. Small enhancements like clear feedback messages create a smoother and more professional user experience, reducing confusion and increasing user confidence during the bidding process.

Leave a Reply