Lesson 98 Implementation: Building the Buyer Dashboard

Team Wpnzee on July 13, 2026

In this lesson, we introduced the Buyer Dashboard, an important milestone in the Flipnzee Auctions plugin. While the earlier lessons focused on auctions, bidding, payments, and watchlists, this lesson begins building the buyer’s personal workspace after logging into the marketplace.

The Buyer Dashboard serves as the central navigation hub for buyers, allowing them to quickly access their purchases, watchlist, active auctions, and support resources.

Why a Buyer Dashboard?

As Flipnzee grows into a specialized marketplace for buying and selling websites, buyers need a dedicated area where they can manage their activity without navigating through multiple pages.

The dashboard is designed to provide:

Quick access to purchased websites
Easy navigation to the watchlist
Direct access to current auctions
Support resources
A foundation for future buyer features

This dashboard will continue to evolve in upcoming lessons as more buyer functionality is introduced.

Registering a Dedicated Shortcode

A new shortcode was created for the dashboard:

[flipnzee_buyer_dashboard]

This shortcode allows the dashboard to be embedded on any WordPress page while keeping the implementation modular and reusable.

The dashboard class registers the shortcode during construction using WordPress’ Shortcode API.

Login Protection

Since the dashboard contains user-specific information, it is only available to authenticated users.

If a visitor is not logged in, the shortcode displays a friendly message requesting authentication before accessing buyer features.

This keeps buyer information private while following WordPress best practices.

Personalized Welcome Section

The dashboard greets the logged-in buyer using their WordPress display name.

Example:

Buyer Dashboard

Welcome, Rajeev Bagra

Personalization creates a much more user-friendly experience and prepares the dashboard for future account-specific information.

Dashboard Cards

Instead of displaying long navigation menus, the dashboard uses clean responsive cards.

Four primary navigation cards were introduced:

My Purchases

Provides access to websites that the buyer has successfully won and purchased.

Future lessons will display:

Purchase history
Pending transfers
Completed transfers
Payment status

My Watchlist

Allows buyers to quickly revisit auctions they are monitoring.

This integrates directly with the Watchlist system developed in previous lessons.

Browse Auctions

Provides a shortcut back to the marketplace so buyers can continue exploring active website auctions.

Support

Offers direct access to marketplace support resources whenever assistance is required during the buying process.

Responsive CSS Grid

A responsive CSS Grid layout was implemented to display the dashboard cards.

Benefits include:

Responsive across desktop, tablet, and mobile devices
Equal spacing between cards
Professional appearance
Easy future expansion

Each card includes:

Title
Description
Action button
Hover animation
Subtle shadows
Rounded corners

Modern User Interface

Several interface improvements were added:

Soft shadows
Rounded card design
Smooth hover animations
Consistent Flipnzee button styling
Responsive spacing
Clean typography

The result is a dashboard that feels modern while remaining lightweight.

Reusing Existing Marketplace Pages

Each dashboard card links to an existing or upcoming marketplace page.

Current destinations include:

/my-purchases/
/watchlist/
/listings/
/support/

This keeps navigation centralized and reduces unnecessary menu complexity.

Debugging Journey

An interesting challenge during this lesson involved the dashboard layout initially rendering as a vertical list instead of the intended responsive grid.

The issue was systematically investigated by verifying:

Shortcode registration
HTML structure
CSS loading
Browser Developer Tools
Network requests
Stylesheet versions
CSS Grid rules

A temporary diagnostic background color confirmed that the correct stylesheet was being loaded, allowing the issue to be isolated and resolved successfully.

This debugging process reinforced the importance of methodical troubleshooting rather than assuming the problem originates in PHP or HTML.

Foundation for Future Lessons

Although the dashboard currently serves as a navigation hub, it lays the groundwork for significantly richer buyer functionality.

Upcoming enhancements will include:

Live purchase summaries
Recent bidding activity
Pending payments
Escrow transaction status
Website transfer progress
Buyer notifications
Personalized marketplace insights

The dashboard is intentionally designed to grow alongside the Flipnzee marketplace.

Download Source Code

Download the starting version of the plugin before the lesson:

⬇ Download Plugin (After Lesson 97) (93 downloads )

Download the completed version after this lesson:

⬇ Download Plugin (After Lesson 98) (91 downloads )

Final Thoughts

Lesson 97 marks the beginning of the buyer experience within Flipnzee Auctions. By introducing a dedicated Buyer Dashboard, the plugin now offers a centralized, user-friendly starting point for every buyer after login.

Rather than overwhelming users with scattered pages and menus, the dashboard provides a clean, responsive interface that will gradually evolve into a comprehensive buyer control panel as future lessons expand payment workflows, purchase management, and ownership transfers.

The Buyer Dashboard represents another important step toward transforming Flipnzee Auctions into a professional marketplace specifically built for buying and selling websites and digital assets.

Lesson 95 – Implementing the Watchlist System with AJAX in Flipnzee Auctions

Team Wpnzee on July 12, 2026

Series: Building the Flipnzee Auctions Plugin
Lesson: 95
Project: Flipnzee Auctions – A WordPress Auction Plugin for Websites & Digital Assets

Introduction

In the previous lesson, we designed the Watchlist feature for Flipnzee Auctions. The objective was to allow registered users to bookmark auctions they are interested in and easily revisit them later from a dedicated My Watchlist page.

This implementation transformed that design into a working feature by introducing a dedicated Watchlist Manager, AJAX-powered interactions, frontend buttons, and a Watchlist shortcode. As with many real-world development tasks, the implementation also involved extensive debugging and refinement to ensure the feature integrates correctly with the rest of the plugin.

Objectives

The primary objectives of this lesson were:

Implement a Watchlist Manager for database operations.
Allow logged-in users to add auctions to their watchlist.
Allow users to remove auctions from their watchlist.
Prevent duplicate watchlist entries.
Display a personalised Watchlist page.
Implement secure AJAX requests using WordPress nonces.
Integrate the Watchlist button into auction listings.

Files Added and Updated

New Components

includes/class-watchlist-manager.php
includes/class-watchlist-ajax.php
assets/js/watchlist.js

Updated Components

includes/class-shortcodes.php
flipnzee-auctions.php

Building the Watchlist Manager

A dedicated manager class was introduced to centralise all watchlist-related database operations.

Its responsibilities include:

Initialising database access.
Checking whether an auction already exists in a user’s watchlist.
Adding auctions.
Removing auctions.
Retrieving all saved auctions.
Counting the number of users watching an auction.

Separating these responsibilities into a dedicated class improves maintainability and follows the plugin’s object-oriented architecture.

Preventing Duplicate Entries

Before inserting a new record, the manager verifies whether the auction has already been saved.

Example:

if ( self::is_in_watchlist( $auction_id, $user_id ) ) {
	return true;
}

This ensures that repeated clicks do not create duplicate database entries.

AJAX Integration

Dedicated AJAX handlers were implemented for both watchlist actions.

The handlers perform:

Nonce verification
Login validation
Input sanitisation
Database updates
JSON success/error responses

This allows watchlist operations to be performed without navigating away from the current page.

Rendering the Watchlist Button

A reusable Watchlist button renderer was implemented.

Depending on the current state, it automatically displays:

❤ Add to Watchlist

❤ Remove from Watchlist

This state is determined dynamically by checking whether the current auction already exists in the logged-in user’s watchlist.

Creating the Watchlist Shortcode

A dedicated shortcode was implemented to display the user’s saved auctions.

The shortcode performs the following steps:

Retrieves the current user’s watchlist.
Loads each saved auction.
Retrieves the associated website listing.
Displays auction information.
Provides a link back to the listing.

Current output includes:

Listing title
Auction ID
Auction status
Current bid
Listing link

This provides users with a simple dashboard for managing their saved auctions.

Database Operations

The Watchlist Manager now supports:

Adding auctions
Removing auctions
Checking whether an auction is already saved
Retrieving all saved auctions
Counting watchers

These methods provide a reusable backend API for future watchlist-related features.

Security Considerations

Several WordPress security practices were implemented throughout this lesson.

These include:

Nonce verification using check_ajax_referer()
Login verification
Sanitising incoming POST values
Prepared SQL statements
Escaping frontend output
Using the WordPress database API

These measures help protect the feature against common attack vectors.

Debugging and Troubleshooting

A considerable portion of this lesson involved debugging and integration testing.

Issues encountered included:

Duplicate method declarations
Missing manager methods
PHP fatal errors
AJAX HTTP 500 errors
JavaScript event binding problems
Cached JavaScript during development
Leftover debugging statements
Plugin activation failures
Watchlist manager integration issues

Resolving these problems reinforced the importance of systematic debugging, incremental testing, and verifying both backend and frontend behaviour throughout development.

Current Functionality

The Watchlist feature now successfully:

Adds auctions to a user’s watchlist.
Removes auctions from a user’s watchlist.
Prevents duplicate entries.
Retrieves saved auctions.
Displays a personalised Watchlist page.
Uses secure AJAX communication.
Integrates with the auction interface.

Known Limitation

One frontend enhancement remains.

After adding or removing an auction using AJAX, the underlying database is updated correctly, but the visible page does not immediately reflect the change until the page is refreshed.

The backend functionality is fully operational. The remaining work is limited to improving frontend state synchronisation after successful AJAX requests.

This enhancement will be addressed during a future UI refactoring lesson.

Lessons Learned

This implementation highlighted several important software engineering practices:

Keep business logic separate from presentation.
Build reusable manager classes.
Secure every AJAX endpoint.
Prevent duplicate database records.
Validate all user input.
Test incrementally.
Use browser developer tools alongside server logs for debugging.
Separate backend functionality from frontend user experience improvements.

Download Source Code

Download the starting version of the plugin before the lesson:

⬇ Download Plugin (After Lesson 94) (88 downloads )

Download the completed version after this lesson:

⬇ Download Plugin (After Lesson 95) (74 downloads )

Future Roadmap

The Watchlist system provides a strong foundation for several upcoming enhancements, including:

Instant UI updates after AJAX operations.
Reusable auction card rendering.
Watcher counters.
Email notifications.
Auction alerts.
User dashboard improvements.
Real-time watchlist interactions.

Conclusion

Lesson 95 marks another significant milestone in the development of Flipnzee Auctions.

The plugin now includes a functional Watchlist system that enables registered users to save auctions for future reference using secure AJAX-powered interactions.

Although a minor frontend synchronisation enhancement remains, the underlying architecture is complete, extensible, and ready to support future features such as notifications, live updates, and personalised auction management.

Git Commit

Lesson 95: Implement Watchlist system with AJAX, shortcode, and database manager

This lesson also reinforces an important principle of plugin development: building a reliable backend first creates a solid foundation upon which frontend enhancements can be safely and incrementally added.

Lesson 94: Enhancing the Watchlist User Experience with Dynamic Button States

Team Wpnzee on July 10, 2026

Series: Building the Flipnzee Auctions WordPress Plugin
Lesson: 94

Introduction

In Lesson 93, we successfully built the backend foundation of the Flipnzee Watchlist system. Users can now securely add auctions to their personal watchlists using AJAX, with data stored in a dedicated database table.

Although the functionality works correctly, the user interface still behaves like a simple button. After clicking Add to Watchlist, nothing visually changes unless the page is refreshed. Modern web applications provide immediate visual feedback, making interactions feel faster and more intuitive.

In this lesson, we will significantly improve the user experience by making the Watchlist button dynamic. The button will automatically update its appearance and text after successful AJAX requests, allowing users to instantly see whether an auction is already saved in their watchlist.

By the end of this lesson, the Watchlist feature will feel much closer to what users expect from professional marketplaces like eBay, Etsy, or Facebook Marketplace.

What We Will Build

We will enhance the frontend Watchlist interface by implementing:

Dynamic button text updates
Automatic icon changes
Button state switching
Add ↔ Remove Watchlist toggle
Visual feedback after successful AJAX requests
Loading state while AJAX is processing
Prevention of multiple rapid clicks

Current Workflow

Current behavior:

User clicks Add to Watchlist
        │
        ▼
AJAX Request
        │
        ▼
Database Updated
        │
        ▼
Nothing changes on screen

Improved workflow after this lesson:

User clicks Add to Watchlist
        │
        ▼
Loading...
        │
        ▼
AJAX Success
        │
        ▼
♥ Remove from Watchlist

And vice versa:

User clicks Remove
        │
        ▼
AJAX Request
        │
        ▼
Database Updated
        │
        ▼
♡ Add to Watchlist

Concepts Covered

During this lesson we will learn:

Building interactive UI with jQuery
Updating HTML without refreshing the page
Manipulating button classes
Handling AJAX success callbacks
Creating reusable frontend logic
Improving user experience (UX)
Preventing duplicate submissions

Files Expected to Change

assets/js/watchlist.js

includes/class-watchlist-manager.php

includes/class-watchlist-ajax.php

assets/css/frontend.css

Planned Enhancements

1. Loading State

Before

♥ Add to Watchlist

While Processing

Saving...

After Success

♥ Remove from Watchlist

2. Dynamic Button Classes

We’ll switch CSS classes dynamically.

Example:

flipnzee-watchlist-button

↓

flipnzee-watchlist-button active

3. Toggle Icons

We’ll switch between:

♡ Add to Watchlist

and

♥ Remove from Watchlist

4. AJAX Response Improvements

Our AJAX handlers will return richer JSON responses, such as:

{
    "success": true,
    "action": "added",
    "message": "Added to Watchlist"
}

and

{
    "success": true,
    "action": "removed",
    "message": "Removed from Watchlist"
}

5. Better User Experience

Users will immediately know:

item saved
item removed
request failed
request processing

without refreshing the page.

Learning Outcomes

After completing this lesson, you will understand:

AJAX-driven UI updates
State-based interface design
Dynamic DOM manipulation
Frontend/backend synchronization
Better WordPress plugin UX design

Roadmap Progress

Completed:

✅ Auction database
✅ Bidding system
✅ Transactions
✅ Purchase workflow
✅ My Purchases
✅ Activity Log
✅ Watchlist database
✅ Watchlist Manager
✅ AJAX Add to Watchlist

Current Lesson:

🔵 Dynamic Watchlist UI

Coming Next:

Lesson 95: Displaying the User’s Watchlist (My Watchlist Page & Shortcode)
Lesson 96: Removing Items from the Watchlist with AJAX
Lesson 97: Watchlist Notifications and Bid Alerts

By the end of Lesson 94, the Watchlist feature will no longer be just functional—it will provide a smooth, responsive, and professional user experience that aligns with modern auction and marketplace applications.

Lesson 43: Displaying Dynamic Auction Status Badges

Team Wpnzee on July 3, 2026

As the Flipnzee Auctions plugin continues to evolve, the auction cards are becoming much more than simple listings. Visitors can already see verified analytics, pricing information, and a live countdown timer. In this lesson, we’ll make the auction status even more obvious by introducing dynamic status badges.

Instead of requiring buyers to read the countdown or auction dates, a color-coded badge will immediately indicate whether an auction is currently active, approaching its end, or has already closed.

Why Status Badges Matter

People naturally respond to visual indicators faster than text.

Imagine browsing dozens of auction listings.

Without status badges, every listing appears similar.

With status badges, visitors can instantly identify auctions that deserve immediate attention.

For example:

🟢 Live Auction

🟡 Ending Soon

🔴 Auction Ended

These simple indicators improve usability and create a more engaging marketplace.

What You Will Learn

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

Compare auction end dates with the current time.
Determine the current auction status.
Display different badges based on auction status.
Apply different CSS styles for each badge.
Keep the logic reusable for future enhancements.

Badge Rules

For the first implementation, we’ll use three simple conditions.

Live Auction

Displayed when the auction is active and has more than 24 hours remaining.

Example:

🟢 Live Auction

Ending Soon

Displayed when less than 24 hours remain before the auction closes.

Example:

🟡 Ending Soon

This helps attract attention to auctions that are approaching their deadline.

Auction Ended

Displayed once the countdown reaches zero.

Example:

🔴 Auction Ended

This clearly communicates that bidding is no longer available.

Why Use Color?

The badges use colors that visitors already understand intuitively.

Green → Safe / Active
Yellow → Warning / Limited Time
Red → Closed / Expired

This allows buyers to recognize the auction state without reading additional text.

Planned Implementation

We’ll build this feature step by step.

Step 1

Determine the current auction status using PHP.

Step 2

Create a reusable badge variable.

Step 3

Display the badge above the auction title.

Step 4

Style each badge using CSS.

Step 5

Test all three auction states.

Expected Result

Each auction card will begin with a prominent status badge.

Example:

🟢 Live Auction

[ Featured Image ]

Calnzee.com

✔ Google Verified Analytics

👥 Monthly Users
📈 Monthly Sessions
🔍 Google Impressions

Start Price
Current Bid
Buy Now

Auction Ends In

5d 12h 14m 38s

View Listing

If the auction has less than one day remaining:

🟡 Ending Soon

If it has already expired:

🔴 Auction Ended

Looking Ahead

These badges are only the beginning.

Future versions of Flipnzee Auctions could introduce additional indicators such as:

⭐ Featured Auction
🔥 Popular Auction
💰 Reserve Met
🆕 Newly Listed
🏆 Highest Bid Reached

Because the badge system will be reusable, new statuses can be added without redesigning the auction card.

What You’ll Gain

Status badges provide immediate visual feedback, helping buyers scan listings more efficiently and focus on auctions that require attention.

Combined with verified analytics, pricing, and the live countdown timer implemented in previous lessons, these badges move Flipnzee Auctions another step closer to becoming a polished, professional website marketplace.

Source Code

Available after implementation.

Next Lesson

In Lesson 43 (Implementation), we’ll calculate the auction status in PHP, display the appropriate badge on each auction card, and style it using CSS so that buyers can instantly distinguish between live, ending soon, and ended auctions.

Lesson 41 Implementation: Adding a Verified Analytics Summary to Auction Cards

Team Wpnzee on July 3, 2026

One of Flipnzee’s biggest goals is to help buyers make informed decisions. Instead of relying only on seller-provided information, auction cards should display trusted website metrics generated by the Flipnzee Analytics plugin.

In this lesson, the auction card was enhanced with a compact analytics summary that appears above the pricing information.

What was implemented

1. Added a “Google Verified Analytics” section

A new analytics block was inserted into the auction card layout. It retrieves analytics data from the Flipnzee Analytics plugin and displays it directly inside each auction listing.

The summary currently includes:

Monthly Users
Monthly Sessions
Google Impressions

This allows buyers to evaluate website performance without opening the full listing page.

2. Prevented PHP errors

During testing, a critical error occurred when analytics data was unavailable.

To make the shortcode more reliable, checks were added before accessing transient data so that missing analytics now safely display as zero instead of generating errors.

Example:

is_array( $main ) ? ( $main['users'] ?? 0 ) : 0

This makes the shortcode much more robust.

3. Improved terminology

Instead of generic labels, the metrics were renamed to better match buyer expectations.

Old labels:

Users
Sessions
Impressions

New labels:

Monthly Users
Monthly Sessions
Google Impressions

These names immediately communicate what the numbers represent.

4. Formatted values

Several presentation improvements were made:

Auction prices now display with a $ currency symbol.
Numeric values use WordPress number formatting functions.
Auction end dates are formatted into a clean, readable style instead of showing raw database values.

Example:

03 Jul 2026

instead of

2026-07-03 06:29:00

5. Styled the analytics section

A dedicated stylesheet was added for the analytics summary.

Visual improvements include:

Light blue background
Rounded corners
Consistent spacing
Professional typography
Improved alignment of labels and values

The “Google Verified Analytics” badge was also updated to better match Flipnzee’s branding.

Challenges encountered

While implementing the feature, several issues had to be resolved.

Browser and server caching

Initially, CSS changes appeared to have no effect. After investigation, the issue turned out to be cached styles rather than incorrect code.

CSS duplication

During testing, duplicate CSS rules accumulated inside frontend.css.

Although this did not break functionality, identifying duplicate rules helped keep the stylesheet cleaner for future development.

Defensive coding

The analytics block originally assumed that transient data always existed.

Adding validation around analytics arrays made the shortcode much safer and prevented runtime errors.

Result

Auction cards now present much more than just prices.

Each listing immediately communicates important website metrics before the visitor even opens the full listing page.

The card now combines:

Website preview
Verified analytics
Auction pricing
Auction end date
Call-to-action button

This creates a much stronger first impression for buyers and moves Flipnzee closer to becoming a marketplace that emphasizes verified website quality, not just website availability.

Download Source Code

Download the starting version of the plugin before the lesson:

⬇ Download Plugin (After Lesson 40) (60 downloads )

Download the completed version after this lesson:

⬇ Download Plugin (After Lesson 41) (51 downloads )

Key takeaway

A website buyer is purchasing more than a domain name—they are evaluating traffic, audience, and search visibility. By integrating verified analytics directly into auction cards, Flipnzee provides meaningful context that traditional website marketplaces often require users to discover manually.

Next Lesson: Lesson 42 – Adding a Live Auction Countdown Timer

In the next lesson, we’ll implement a dynamic countdown timer that shows exactly how much time remains before an auction ends, creating urgency and improving the overall auction experience.

Lesson 41: Displaying Verified Analytics on Auction Cards

Team Wpnzee on July 3, 2026

One of Flipnzee’s biggest advantages over traditional website marketplaces is that every listing can display verified Google Analytics and Google Search Console data. Instead of asking buyers to trust screenshots or seller claims, Flipnzee can present real performance metrics directly from the website owner.

In this lesson, we’ll begin displaying selected analytics directly on each auction card, giving buyers valuable insights before they even open the full listing page.

Why Show Analytics on the Auction Card?

Most website marketplaces display only basic information:

Website name
Asking price
Category
Description

A buyer must open each listing individually before discovering whether the website actually has visitors.

Flipnzee can do better.

Since each listing already has verified analytics available through the Flipnzee Analytics plugin, we can surface the most important metrics directly within the marketplace.

The Buyer Experience

Imagine browsing dozens of websites for sale.

Instead of seeing this:

Calnzee.com

Start Price: $111
Current Bid: $0
Buy Now: $333

buyers will see something like:

Calnzee.com

✔ Google Verified Analytics

👥 Users...............210
📈 Sessions...........443
🔍 Impressions.......555

Start Price..........$111
Current Bid...........$0
Buy Now..............$333

Within seconds, buyers can identify listings that are already attracting visitors.

Why This Is Different

Many marketplace platforms rely entirely on information entered manually by the seller.

That means buyers often wonder:

Are these traffic numbers genuine?
Were the screenshots edited?
Is the data recent?

Flipnzee takes a different approach.

Analytics are pulled automatically from the connected Google Analytics and Google Search Console properties, helping reduce reliance on manually entered statistics.

Which Metrics Should Be Displayed?

The goal is not to overwhelm visitors with dozens of statistics.

Instead, show only a few headline metrics.

A good starting point is:

Users
Sessions
Google Impressions

These three values provide a quick overview of a website’s activity and search visibility.

The complete analytics dashboard remains available on the individual listing page.

Keep the Auction Card Simple

Think of the auction card as a preview.

It should answer one question:

“Is this listing worth opening?”

If the answer is yes, the visitor clicks View Listing to explore the complete analytics dashboard.

This creates a natural flow:

Marketplace

↓

Auction Card

↓

Listing Page

↓

Verified Analytics

↓

Place Bid

Avoid Information Overload

Showing every available metric on the auction card would make it difficult to scan.

For example, displaying all of these at once would quickly become cluttered:

Users
Sessions
Returning Visitors
Average Session Duration
Pages per User
Live Users
Countries
Cities
Keywords
Traffic Sources
Impressions
Clicks
Indexed Pages

Instead, the marketplace should provide a concise summary, while the listing page remains the place for detailed analysis.

Future Enhancements

As Flipnzee evolves, additional indicators can be introduced without overcrowding the card.

Examples include:

Google Verified badge
Live visitors indicator
Growth percentage
Auction ending soon badge
Recently updated analytics timestamp
Mobile-friendly metric icons

These enhancements can gradually enrich the browsing experience while keeping the interface clean.

What We Learned

One of Flipnzee’s strongest competitive advantages is its ability to present verified website performance, not just seller-provided descriptions.

By displaying a few key analytics directly on the auction card, buyers can evaluate listings more quickly and confidently, while the full listing page continues to provide comprehensive insights.

This approach helps transform the marketplace from a simple directory of websites into a data-driven platform where informed decisions can be made at a glance.

Next Lesson

In Lesson 41 (Implementation), we’ll modify the auction card shortcode to retrieve selected metrics from the connected Flipnzee Analytics plugin and display them alongside the auction details, creating the first analytics-powered marketplace cards.

Lesson 40 (Implementation): Improving Auction Card Readability with Better Formatting

Team Wpnzee on July 3, 2026

In the previous lesson, the auction card displayed all the required information, but the layout looked more like raw data than a professional marketplace listing. In this implementation, the auction card was refined to improve readability and give visitors a cleaner browsing experience.

What We Wanted to Improve

The original auction card displayed:

Prices without a currency symbol
Auction end date in raw database format (YYYY-MM-DD HH:MM:SS)
Labels and values that were difficult to scan quickly

The objective was to make the card resemble a professional online marketplace.

Step 1: Improve the Auction Details Layout

The auction details were converted into a definition list (<dl>), making the labels and values much easier to align.

Instead of using several independent paragraphs, the HTML now groups related information together.

Example:

<dl class="flipnzee-auction-meta">

    <dt>Start Price</dt>
    <dd>...</dd>

    <dt>Current Bid</dt>
    <dd>...</dd>

    <dt>Buy Now</dt>
    <dd>...</dd>

    <dt>Auction Ends</dt>
    <dd>...</dd>

</dl>

This produces a much cleaner appearance.

Step 2: Format Currency Values

Instead of printing plain numbers such as

111
333
0

the values are now formatted using WordPress’s localization function.

Example:

<?php echo esc_html( '$' . number_format_i18n( $auction['start_price'], 0 ) ); ?>

Similarly,

<?php echo esc_html( '$' . number_format_i18n( $auction['current_bid'], 0 ) ); ?>

and

<?php echo esc_html( '$' . number_format_i18n( $auction['buy_now_price'], 0 ) ); ?>

Now the auction card displays

$111
$0
$333

which immediately looks more professional.

Step 3: Display a Friendly Auction End Date

Previously, the auction end date appeared exactly as stored in the database.

Example:

2026-07-03 06:29:00

A visitor does not need to see the database timestamp.

Instead, the value is formatted before displaying it.

<?php
echo esc_html(
    date_i18n(
        'd M Y',
        strtotime( $auction['auction_end'] )
    )
);
?>

The visitor now sees

03 Jul 2026

which is much easier to read.

Step 4: Style the Definition List

CSS was added to create two neat columns.

Example:

.flipnzee-auction-meta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px 20px;
}

.flipnzee-auction-meta dt {
    font-weight: 600;
}

.flipnzee-auction-meta dd {
    margin: 0;
    text-align: right;
}

This aligns every label with its corresponding value.

Step 5: Keep the Call-to-Action Prominent

The View Listing button remains at the bottom of the card, giving visitors a clear next step.

The wording is intentional.

Rather than taking users directly to the website being sold, the button takes them to the listing page where they can review:

Verified analytics
Traffic statistics
Pricing
Auction details
Future bidding functionality

This avoids any confusion about where the visitor is being directed.

Result

The auction card now provides a much cleaner presentation.

Before:

Raw prices
Raw timestamps
Basic formatting

After:

Dollar-formatted prices
Human-readable auction dates
Better aligned labels and values
Improved visual hierarchy
More professional marketplace appearance

What We Learned

Small formatting improvements can significantly enhance the perceived quality of a marketplace.

Visitors usually decide within a few seconds whether a listing looks trustworthy. Clear prices, readable dates, and a well-organized layout contribute to a better user experience and help build confidence in the platform.

Source Code

The primary changes were made in:

includes/class-shortcodes.php
assets/css/frontend.css

Download Source Code

Download the completed version after this lesson:

⬇ Download Plugin (After Lesson 40) (60 downloads )

Next Lesson

In Lesson 41, we’ll begin integrating Flipnzee Analytics into the auction cards themselves, displaying key verified metrics such as Users, Sessions, and Google Impressions directly on the marketplace. This will highlight one of Flipnzee’s unique advantages: allowing buyers to evaluate website performance before even opening the full listing page.

Lesson 40: Building a Professional Auction Card Layout with CSS

Team Wpnzee on July 3, 2026

In the previous lesson, we transformed our auction listings from plain database records into meaningful website listings by displaying the Listing title, featured image, placeholder image, and a direct link to the Listing page.

Although the auction now contains all the essential information, its appearance is still fairly basic. The next logical step is to improve the user interface so visitors can browse auctions more comfortably and the marketplace begins to resemble a modern website sales platform.

In this lesson, we’ll focus entirely on presentation by styling our auction cards with CSS while keeping the underlying PHP logic unchanged.

What You’ll Learn

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

Style plugin output using a dedicated CSS file.
Improve the appearance of auction cards.
Make featured images responsive.
Add spacing and padding for better readability.
Create modern card layouts using borders, shadows, and rounded corners.
Improve typography and button styling.
Build a responsive layout that works well on desktops, tablets, and mobile devices.

Why This Matters

At the moment, an auction looks something like this:

+--------------------------------------+
| Screenshot                           |
|                                      |
| Calnzee.com                          |
|                                      |
| Start Price: ₹111                    |
| Current Bid: ₹0                      |
| Buy Now: ₹333                        |
| Status: Active                       |
| Auction Ends: 03 Jul 2026            |
|                                      |
| View Listing                         |
+--------------------------------------+

While functional, this still resembles a collection of HTML elements rather than a professional marketplace.

After completing this lesson, the goal is to achieve something closer to:

+--------------------------------------------------+
|               Website Screenshot                 |
|                                                  |
| Calnzee.com                                      |
|--------------------------------------------------|
| Start Price .............. ₹111                 |
| Current Bid .............. ₹0                   |
| Buy Now .................. ₹333                 |
| Auction Ends ............. 03 Jul 2026          |
|                                                  |
|            [ View Listing ]                      |
+--------------------------------------------------+

The cleaner presentation improves readability and creates a much stronger first impression for potential buyers.

Concepts Covered

During this lesson we’ll explore:

CSS organization for WordPress plugins
Responsive images
Card-based layouts
Padding and margins
Borders and border radius
Box shadows
Typography improvements
Button styling
Responsive design fundamentals

Implementation Steps

We’ll implement the lesson gradually:

Style the auction card container.
Make featured images responsive.
Improve spacing between elements.
Style headings and auction details.
Enhance the “View Listing” button.
Remove unnecessary visual clutter.
Improve alignment of auction information.
Add responsive styling for smaller screens.
Test the layout on different devices.

Files We’ll Modify

assets/css/frontend.css

Only minor HTML adjustments may be made if required.

No database changes are required.

Difficulty Level

Intermediate

This lesson focuses primarily on frontend development and demonstrates how separating presentation from business logic leads to cleaner, more maintainable plugins.

Best Practices

Throughout this lesson we’ll continue following WordPress development best practices:

Keep PHP focused on generating HTML.
Place all presentation rules inside CSS.
Use reusable CSS classes.
Avoid inline styles.
Design with responsiveness in mind.
Improve the user experience without changing plugin functionality.

What You’ll Gain

After completing this lesson, your auction listings will no longer look like simple collections of database fields. Instead, they’ll resemble professional marketplace cards that are visually appealing, easier to browse, and ready for future enhancements such as countdown timers, bidding buttons, analytics badges, and seller information.

This lesson also establishes the visual foundation for future integration between the Flipnzee Auctions plugin and the Flipnzee Analytics plugin, allowing auction cards to evolve into rich previews of each website while keeping the detailed analytics available on the corresponding Listing page.

In the implementation that follows, we’ll enhance the stylesheet step by step and transform our auction cards into a polished marketplace interface without altering the underlying auction logic.

Lesson 39: Display Website Titles and Featured Images in the Auction Shortcode

Team Wpnzee on July 2, 2026

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:

Retrieve the Listing post using listing_id.
Verify the Listing exists.
Display the website title.
Display the featured image.
Keep auction information below the image.
Add basic HTML structure.
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.

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

Team Wpnzee on July 2, 2026

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) (64 downloads )

Download the completed version after this lesson:

⬇ Download Plugin (After Lesson 38) (48 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.