After creating the frontend auction shortcode in Lesson 38, visitors could finally see active auctions on the website. However, each auction was still presented as a simple list of database values. Instead of displaying a meaningful website title and image, the shortcode only showed the Listing ID, making the marketplace feel more like a database report than a professional auction platform.

In this implementation, we significantly improved the frontend by connecting our custom auction records with the existing Listing custom post type. This allows each auction to display the actual website title, featured image, and a direct link to its Listing page. We also laid the groundwork for future frontend styling by introducing a dedicated stylesheet and logical HTML structure.

---

What We Implemented

During this lesson we completed the following improvements:

• Retrieved the associated Listing post using listing_id.
• Verified the Listing exists before displaying it.
• Replaced the Listing ID with the Listing title.
• Displayed the Listing’s featured image.
• Added a branded placeholder image when no featured image exists.
• Created a dedicated assets/images folder.
• Created a dedicated assets/css folder.
• Added a frontend stylesheet.
• Loaded the stylesheet using wp_enqueue_style().
• Organized the HTML into thumbnail and content sections.
• Added a View Listing button linking to the Listing page.

---

Step 1 – Retrieve the Listing Post

Our auction table stores only the Listing ID. To display information about the website, we first retrieved the corresponding WordPress post.

$listing = get_post( $auction['listing_id'] );

if ( ! $listing ) {
	continue;
}

If the Listing no longer exists, the shortcode simply skips that auction instead of generating errors.

---

Step 2 – Display the Website Title

Previously the shortcode displayed something similar to:

Listing #2222

We replaced this with:

echo esc_html( get_the_title( $listing ) );

Visitors now see the actual website title, for example:

Calnzee.com

This immediately makes the auction easier to understand.

---

Step 3 – Display the Featured Image

Each Listing already supports WordPress featured images.

We used:

has_post_thumbnail()

and

get_the_post_thumbnail()

to display the website screenshot above the title.

This transforms the auction from plain text into a visual listing.

---

Step 4 – Add a Placeholder Image

Not every Listing has a featured image.

Instead of leaving an empty space, we created:

assets/
└── images/
    └── placeholder.png

Whenever no featured image exists, the shortcode now displays this branded placeholder.

This keeps every auction card visually consistent.

---

Step 5 – Organize the HTML

Rather than placing everything directly inside the auction card, we separated the content into logical sections.

Thumbnail section:

flipnzee-auction-thumbnail

Content section:

flipnzee-auction-content

Although visitors won’t immediately notice this change, it makes future styling much easier.

---

Step 6 – Create a Frontend Stylesheet

To keep presentation separate from functionality, we created:

assets/
└── css/
    └── frontend.css

Instead of mixing inline styles with PHP, all future frontend styling will now be maintained inside this stylesheet.

---

Step 7 – Enqueue the Stylesheet

Creating a CSS file alone isn’t enough.

We registered it using:

wp_enqueue_style()

inside the main plugin file.

Because we had already defined:

FLIPNZEE_AUCTION_URL

and

FLIPNZEE_AUCTION_VERSION

loading the stylesheet became straightforward while following WordPress best practices.

---

Step 8 – Add a View Listing Button

Finally, we connected the Auctions plugin with our Listing pages.

Using:

get_permalink( $listing )

we generated a link directly to the Listing.

Visitors can now move from the auction summary to the complete Listing page where they can view:

• Website description
• Screenshots
• Flipnzee Analytics dashboard
• Traffic statistics
• Additional website information

This creates a much smoother browsing experience.

---

Project Structure After This Lesson

Our plugin now contains the following frontend assets:

flipnzee-auctions/

assets/
│
├── css/
│   └── frontend.css
│
└── images/
    └── placeholder.png

includes/
└── class-shortcodes.php

This organization keeps the plugin scalable and easier to maintain.

---

Why This Implementation Matters

One of the biggest improvements in this lesson wasn’t simply displaying an image or title—it was establishing the relationship between two independent systems.

Our Auctions plugin stores only the Listing ID in its custom database table. Whenever the shortcode runs, it retrieves the corresponding WordPress Listing post to display additional information.

This approach avoids duplicating data and allows us to take advantage of WordPress features such as:

• Post titles
• Featured images
• Permalinks
• Future custom fields

By building on top of the Listing custom post type rather than storing duplicate information in the auction table, the plugin remains cleaner, more flexible, and easier to extend.

---

Tips & Best Practices

• Store only the Listing ID in the custom auction table.
• Always verify the Listing exists before displaying it.
• Escape all output using WordPress escaping functions.
• Keep images inside the plugin instead of relying on external placeholders.
• Separate HTML structure from CSS styling.
• Use WordPress constants for plugin paths and URLs.
• Organize frontend assets into dedicated css and images folders.

---

What We Learned

This lesson demonstrated how a custom database table can work together with native WordPress posts.

Instead of treating auctions as isolated records, we linked each auction to its corresponding Listing, allowing us to reuse existing WordPress functionality while keeping the database simple.

The result is a much more professional-looking marketplace and a solid foundation for future enhancements.

---

Looking Ahead

In the next lesson, we’ll continue improving the frontend by transforming these functional auction cards into a polished marketplace interface. We’ll refine the layout, improve spacing and typography, make the cards responsive, and prepare the design for future features such as bidding buttons, countdown timers, and deeper integration with the Flipnzee Analytics plugin.

In the previous lesson, we added Auction Start and Auction End fields to the Add Auction and Edit Auction forms. However, administrators still could not see these values from the All Auctions page.

In this implementation lesson, we’ll enhance the auction management table by displaying both dates in a clean, human-readable format. We’ll also ensure that missing or invalid dates are handled gracefully.

---

What We’ll Build

By the end of this lesson, the All Auctions table will display:

• Auction Start
• Auction End
• Properly formatted dates
• A dash (—) whenever no date has been configured

Instead of displaying raw database values such as:

2026-07-02 14:06:00

the table will display:

02 Jul 2026 14:06

which is much easier for administrators to read.

---

Step 1: Add the New Columns

Open:

admin/class-auctions-table.php

Locate the get_columns() method.

Add two new columns:

'auction_start' => 'Auction Start',
'auction_end'   => 'Auction End',

Your auctions table will now include two additional headings.

---

Step 2: Format the Dates

Locate the column_default() method.

Instead of returning the raw database value, we’ll format the dates using WordPress’ wp_date() function.

For the Auction Start column:

case 'auction_start':

    $timestamp = strtotime( $item->auction_start );

    if (
        empty( $item->auction_start ) ||
        '0000-00-00 00:00:00' === $item->auction_start ||
        false === $timestamp
    ) {
        return '—';
    }

    return wp_date(
        'd M Y H:i',
        $timestamp
    );

Repeat the same logic for the Auction End column:

case 'auction_end':

    $timestamp = strtotime( $item->auction_end );

    if (
        empty( $item->auction_end ) ||
        '0000-00-00 00:00:00' === $item->auction_end ||
        false === $timestamp
    ) {
        return '—';
    }

    return wp_date(
        'd M Y H:i',
        $timestamp
    );

---

Why Use wp_date()?

Although PHP provides the date() function, WordPress recommends using wp_date() because it:

• Respects the site’s configured timezone
• Produces consistent output across WordPress
• Follows WordPress coding standards
• Makes plugins more portable

---

Step 3: Handle Missing Dates Gracefully

Many auctions may not yet have a configured start or end time.

Instead of showing confusing values like:

0000-00-00 00:00:00

or

30 Nov -0001 00:00

our implementation simply displays:

—

This creates a much cleaner interface for administrators.

---

Step 4: Make the Columns Sortable

To improve usability, add the new columns to the sortable columns list.

Inside get_sortable_columns():

'auction_start' => array( 'auction_start', false ),
'auction_end'   => array( 'auction_end', false ),

Then update the list of allowed database columns inside:

includes/class-auction-manager.php

Add:

'auction_start',
'auction_end',

to the $allowed_columns array.

This allows administrators to sort auctions by either start or end date.

---

Step 5: Test the Implementation

Create a few auctions with different schedules.

Verify that:

• Auction Start displays correctly.
• Auction End displays correctly.
• Empty dates display as —.
• Clicking the column headings sorts the table.
• Existing auctions without dates continue to work normally.

---

Final Result

The All Auctions page now provides administrators with immediate visibility into the auction schedule without opening each auction individually.

The table is easier to scan, easier to sort, and provides a much more professional management experience.

---

Troubleshooting Tips

If you encounter unexpected date values:

• Verify that the database contains valid DATETIME values.
• Use wp_date() instead of date().
• Check that strtotime() returns a valid timestamp.
• Display — whenever the date is empty, invalid, or equal to 0000-00-00 00:00:00.

A quick syntax check can also help before packaging the plugin:

php -l admin/class-auctions-table.php

If the command reports:

No syntax errors detected

your PHP syntax is valid.

---

What We Learned

In this lesson, we learned how to:

• Extend a custom WP_List_Table
• Add new columns to an admin table
• Format database dates for display
• Use wp_date() following WordPress best practices
• Handle empty and invalid dates gracefully
• Make custom columns sortable

These improvements make the Flipnzee Auctions plugin feel much closer to a polished, production-ready WordPress plugin while laying the groundwork for future features such as automatic auction activation, countdown timers, and bid management.

Download Source Code

Download the starting version of the plugin before the lesson:

Download the completed version after this lesson:

In Lesson 33, we transformed the Flipnzee Auctions plugin from a basic auction management system into one capable of supporting scheduled auctions.

Instead of auctions existing only in a draft, active, or closed state, administrators can now define exact start and end dates. This lays the foundation for future automation, where auctions will open and close automatically without manual intervention.

---

What We Implemented

During this lesson we added support for:

• Auction Start Date & Time
• Auction End Date & Time
• Saving schedule information while creating auctions
• Editing scheduled auctions
• Updating the schedule after creation
• Database support for scheduling

This is a major step toward building a production-ready auction platform.

---

Step 1 – Extend the Database

The first task was updating the auction table to store scheduling information.

Inside includes/class-database.php we added two new columns:

auction_start DATETIME NULL,
auction_end DATETIME NULL,

These fields allow every auction to have:

• Start date
• End date

Both fields are optional, making the feature flexible.

---

Step 2 – Update the Add Auction Form

Next we modified the Add Auction screen.

Two new fields were added:

• Auction Start
• Auction End

Both use HTML5’s built-in datetime picker.

<input type="datetime-local">

Benefits:

• Native browser calendar
• Native time selector
• No JavaScript library required

---

Step 3 – Save the Schedule

Adding form fields is not enough.

We also updated:

admin/class-admin-posts.php

to read:

$_POST['auction_start']
$_POST['auction_end']

The values are sanitized using:

sanitize_text_field()

before being sent to the Auction Manager.

---

Step 4 – Update create_auction()

The next task was modifying:

Flipnzee_Auction_Manager::create_auction()

Its function signature changed from:

create_auction(
    $listing_id,
    $start_price,
    $reserve_price,
    $buy_now_price
)

to:

create_auction(
    $listing_id,
    $start_price,
    $reserve_price,
    $buy_now_price,
    $auction_start,
    $auction_end
)

The SQL INSERT statement now stores:

'auction_start'
'auction_end'

alongside the other auction fields.

---

Step 5 – Update the Edit Auction Screen

Once scheduling could be saved, administrators also needed the ability to edit it.

Inside:

admin/class-admin.php

we added two additional form fields:

• Auction Start
• Auction End

The stored values are displayed using:

str_replace(
    ' ',
    'T',
    $auction->auction_start
)

This converts the MySQL format:

2026-07-02 14:30:00

into the format expected by HTML5:

2026-07-02T14:30

Without this conversion, the datetime picker would appear empty.

---

Step 6 – Update update_auction()

The update method also required changes.

Its function signature was expanded to accept:

$auction_start
$auction_end

The SQL UPDATE statement now saves:

'auction_start'
'auction_end'

along with:

• Listing ID
• Prices
• Status

This allows administrators to modify auction schedules after creation.

---

Step 7 – Verify Everything

After completing the implementation we tested:

Creating Auctions

✔ Auction created successfully.

Editing Auctions

✔ Auction Start displayed correctly.

✔ Auction End displayed correctly.

Saving Changes

✔ Updated schedule persisted successfully.

No PHP syntax errors were reported during testing.

---

What We Learned

This lesson introduced several useful concepts:

• Extending existing database tables
• Working with HTML5 datetime inputs
• Handling date/time values safely
• Updating SQL INSERT statements
• Updating SQL UPDATE statements
• Passing additional parameters between classes
• Displaying MySQL datetime values inside HTML forms

---

Current Progress

The plugin now supports:

• Creating auctions
• Editing auctions
• Searching auctions
• Sorting auctions
• Status filtering
• Bulk deletion
• Auction scheduling

The scheduling functionality is now fully functional from an administrator’s perspective.

Download Source Code

Download the starting version of the plugin before the lesson:

Download the completed version after this lesson:

What’s Next?

In the next lesson, we’ll complete the scheduling feature by displaying Auction Start and Auction End directly in the All Auctions table. This will allow administrators to view an auction’s schedule at a glance without opening the edit screen.

After that, we’ll be ready to begin implementing automatic auction opening and closing, bringing the plugin one step closer to a production-ready auction platform.