After successfully displaying active auctions on the frontend in Lesson 38, our auction listings are still very plain. Visitors only see the Listing ID and auction details, which isn’t how a professional marketplace should look.

In this lesson, we’ll connect each auction to its corresponding WordPress Listing post and display the website’s title and featured image. This is an important milestone because our auction page will begin to resemble a real website marketplace instead of a simple database report.

---

What You’ll Learn

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

• Retrieve the Listing post associated with an auction.
• Display the website title instead of the Listing ID.
• Show the Listing’s featured image.
• Handle missing images gracefully.
• Improve the overall appearance of the auction listing.

---

Why This Matters

Currently, visitors see something like:

Listing #2222

Start Price: ₹333

Current Bid: ₹0

Buy Now: ₹4,444,444

A professional marketplace should instead display something like:

+-------------------------------------------+
| [Featured Image]                          |
|                                           |
| MyBusinessSite.com                        |
|                                           |
| Start Price: ₹333                         |
| Current Bid: ₹0                           |
| Buy Now: ₹4,444,444                       |
| Auction Ends: 25 Jul 2026                 |
+-------------------------------------------+

This makes the auction much easier to browse.

---

Concepts Covered

In this lesson we’ll learn about:

• get_post()
• get_the_title()
• has_post_thumbnail()
• get_the_post_thumbnail()
• Escaping output
• Building reusable HTML

---

Implementation Steps

We will implement the lesson step by step:

1. Retrieve the Listing post using listing_id.
2. Verify the Listing exists.
3. Display the website title.
4. Display the featured image.
5. Keep auction information below the image.
6. Add basic HTML structure.
7. Test the shortcode.

---

Expected Output

Instead of this:

Listing #2222
Start Price: 333
Current Bid: 0

Visitors will see something like:

[ Website Screenshot ]

MyBusinessSite.com

Start Price: ₹333
Current Bid: ₹0
Buy Now: ₹4,444,444
Auction Ends: 25 Jul 2026

---

Files We’ll Modify

• includes/class-shortcodes.php

No database changes are required in this lesson.

---

Difficulty Level

Intermediate

This lesson introduces interaction between custom database tables and native WordPress posts, a common pattern in WordPress plugin development.

---

What You’ll Gain

By completing this lesson, you’ll move beyond simply displaying raw auction data. Your shortcode will start presenting auctions as attractive website listings, laying the foundation for future enhancements such as bidding buttons, countdown timers, reserve price indicators, seller information, and responsive auction cards.

In the next implementation, we’ll enhance the frontend so each auction begins to look like a polished marketplace listing rather than a collection of database fields.

• Category: Building Flipnzee Auction
• Tag: frontend, frontend shortcode