Lesson 38: Display Live Auctions on the Frontend Using a WordPress Shortcode
So far, every feature we’ve built has been available only to WordPress administrators.
In a real auction marketplace, however, the most important audience is not the administrator—it’s the buyers.
Visitors need a simple way to browse active auctions directly from the website.
In this lesson, we’ll create our first frontend auction shortcode.
What You’ll Build
By the end of this lesson, you’ll have a shortcode like:
[flipnzee_auctions]
that displays all active auctions on any WordPress page.
What Visitors Will See
Each auction will display:
- Listing ID
- Starting Price
- Current Bid
- Buy Now Price
- Auction Status
- Auction End Date
- View Auction button
Example:
---------------------------------------
Listing #105
Current Bid
₹52,000
Buy Now
₹75,000
Ends
12 Jul 2026
Status
Active
[ View Auction ]
---------------------------------------
Why Use a Shortcode?
Shortcodes are one of the simplest ways to expose plugin functionality on the frontend.
Advantages include:
- Works with Gutenberg
- Works with Classic Editor
- Works with Genesis
- Can be inserted anywhere
- Easy to extend later
Our First Frontend Query
Instead of retrieving every auction, we’ll display only:
Status = Active
This keeps the marketplace clean and prevents visitors from seeing:
- Draft auctions
- Closed auctions
Architecture
Visitor
│
▼
Shortcode
│
▼
Auction Manager
│
▼
Database
│
▼
Active Auctions
│
▼
HTML Output
Notice how we’re reusing our Auction Manager instead of writing SQL directly inside the shortcode.
Files We’ll Modify
includes/class-auction-manager.php
includes/class-shortcodes.php
(new file)
flipnzee-auctions.php
New Shortcode
We’ll register:
[flipnzee_auctions]
Later we’ll extend it with parameters like:
[flipnzee_auctions limit="12"][flipnzee_auctions order=”ending”]
Design Goals
Initially we’ll keep the layout simple.
Each auction will appear inside a clean card showing:
- Listing ID
- Prices
- Status
- End Date
Styling will be improved in future lessons.
Production Benefits
Adding a frontend shortcode is an important milestone because it transforms the plugin from an administrative tool into a real auction platform.
For the first time:
- Administrators create auctions.
- Visitors can discover them.
- The auction system becomes visible on the public website.
What You’ll Learn
In this lesson you’ll learn how to:
- Register WordPress shortcodes
- Retrieve database records for the frontend
- Generate HTML safely
- Escape output correctly
- Separate business logic from presentation
- Prepare your plugin for bidding functionality
What’s Next?
In the next lesson, we’ll build the Single Auction View, where visitors can click View Auction to see detailed information, a live countdown timer, bid history, and eventually place bids.
This will be the foundation for the public-facing bidding experience and the future Escrow.com transaction workflow.