Implementing Lesson 38: Creating Your First Frontend Auction Shortcode in the Flipnzee Auctions Plugin

Team Wpnzee on July 2, 2026

frontend shortcode

After completing the backend auction management features in previous lessons, it was time to make our auction data visible to website visitors. In this lesson, we created our first frontend shortcode that retrieves active auctions from the database and displays them on any WordPress page or post.

Although the first version is intentionally simple, it establishes the foundation for building a professional auction marketplace.

What We Built

At the end of this lesson, visitors can insert the following shortcode into any page or post:

[flipnzee_auctions]

When the page is viewed, the plugin automatically retrieves all active auctions and displays information such as:

  • Listing ID
  • Start Price
  • Current Bid
  • Buy Now Price
  • Auction Status
  • Auction End Time

Step 1: Create a Shortcodes Class

Instead of placing shortcode logic inside the main plugin file, we created a dedicated class.

File created:

includes/class-shortcodes.php

This keeps the plugin organized and makes future shortcode development much easier.

Step 2: Register the Shortcode

Inside the class constructor we registered our shortcode.

add_shortcode(
    'flipnzee_auctions',
    array( $this, 'auction_list_shortcode' )
);

Now WordPress knows which function to execute whenever it encounters:

[flipnzee_auctions]

Step 3: Load the Shortcodes Class

Next, we loaded the new class from the main plugin file.

require_once FLIPNZEE_AUCTION_PATH . 'includes/class-shortcodes.php';

Then initialized it.

new Flipnzee_Shortcodes();

Without these two steps, WordPress would never register the shortcode.

Step 4: Retrieve Active Auctions

Inside the shortcode callback, we called the Auction Manager.

$auctions = Flipnzee_Auction_Manager::get_active_auctions();

This keeps all database operations inside the Auction Manager instead of mixing SQL with presentation logic.

Keeping responsibilities separate makes the plugin much easier to maintain.

Step 5: Handle Empty Results

If no active auctions exist, the shortcode returns a friendly message.

if ( empty( $auctions ) ) {

    return '<p>No active auctions found.</p>';
}

This provides a much better user experience than displaying an empty page.

Step 6: Loop Through Auctions

The shortcode loops through every active auction.

Example:

foreach ( $auctions as $auction ) {

    // Display auction details.
}

For each auction we displayed several fields stored in the database.

Step 7: Display Auction Information

The first version displays:

  • Listing ID
  • Start Price
  • Current Bid
  • Buy Now Price
  • Status
  • Auction End Date

Although simple, it proves that our shortcode successfully retrieves data from the database.

Step 8: Test the Shortcode

We created a temporary WordPress post named:

testing

Inside the post we inserted:

[flipnzee_auctions]

Initially the page displayed:

No active auctions found.

This was expected because every auction in the database still had the status:

draft

Step 9: Activate an Auction

For testing purposes, we manually changed one auction in phpMyAdmin.

status

draft
↓

active

After refreshing the page, the shortcode immediately displayed the auction.

This confirmed that:

  • the shortcode was registered correctly,
  • the database query worked,
  • the Auction Manager returned the correct records,
  • and the frontend output functioned as expected.

Final Result

The completed shortcode successfully displayed information similar to:

Listing #2222

Start Price: 333.00

Current Bid: 0.00

Buy Now: 4444444.00

Status: Active

Auction Ends:
2026-07-25 16:35:00

This marks the first working frontend feature of the Flipnzee Auctions plugin.

Lessons Learned

During this implementation, several important WordPress concepts became clearer:

  • Create dedicated classes for related functionality.
  • Register shortcodes using add_shortcode().
  • Keep database queries inside manager classes.
  • Separate business logic from presentation.
  • Always handle empty results gracefully.
  • Test shortcodes with real database records.

Tips for Beginners

  • Always build the simplest working version before focusing on appearance.
  • Test with actual database records rather than assuming the code is wrong.
  • If a shortcode displays “No active auctions found,” first verify the database contains records with status = 'active'.
  • Keeping your code modular now will make future features much easier to add.

Download Source Code

Download the starting version of the plugin before the lesson:

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

Download the completed version after this lesson:

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

What’s Next?

Our shortcode works, but it still displays plain text. In the next lesson, we’ll start transforming this output into attractive auction cards by showing website titles, featured images, and better formatting so the frontend begins to resemble a real website marketplace.

Every professional marketplace starts with a simple data listing. By completing this lesson, you’ve built the foundation on which all future frontend auction features will be added.

Leave a Reply