Lesson 83: Creating a Reusable Admin Dashboard Card Component in Flipnzee Auctions

Team Wpnzee on July 8, 2026

Introduction

As the Flipnzee Auctions plugin continues to grow, the administration dashboard is displaying more statistics such as Total Auctions, Active Auctions, Scheduled Auctions, Closed Auctions, Pending Payments, and Paid Transactions.

Although Lesson 82 moved the dashboard styling into an external stylesheet, the PHP still contains repeated HTML blocks for every dashboard card.

This repetition makes future maintenance harder. Every time a new statistic is added, the same HTML structure must be copied again.

In this lesson, we’ll refactor the dashboard by introducing a reusable helper function that generates dashboard cards dynamically.

This follows the DRY (Don’t Repeat Yourself) principle and makes the code significantly cleaner.

What We’ll Build

Instead of writing this repeatedly:

<div class="flipnzee-dashboard-card">
    <h2><?php echo esc_html( $value ); ?></h2>
    <p><?php echo esc_html( $title ); ?></p>
</div>

we’ll create a helper function like:

private function render_dashboard_card( $title, $value ) {
    ?>
    <div class="flipnzee-dashboard-card">
        <h2><?php echo esc_html( $value ); ?></h2>
        <p><?php echo esc_html( $title ); ?></p>
    </div>
    <?php
}

Then the dashboard becomes much simpler:

foreach ( $cards as $title => $value ) {
    $this->render_dashboard_card( $title, $value );
}

Why This Refactoring Matters

Instead of maintaining multiple HTML snippets throughout the dashboard, all card rendering will be handled in one place.

Benefits include:

  • Cleaner PHP
  • Less duplicate code
  • Easier maintenance
  • Easier redesign later
  • Consistent dashboard appearance
  • Better object-oriented design

What You’ll Learn

In this lesson you’ll learn how to:

  • Identify duplicated HTML
  • Create reusable helper methods
  • Use $this->method() inside classes
  • Separate presentation logic
  • Improve code readability
  • Build reusable UI components in WordPress plugins

Implementation Plan

Step 1

Locate the dashboard card HTML inside dashboard_page().

Step 2

Create a private helper method:

private function render_dashboard_card( $title, $value )

Step 3

Move the repeated HTML into this helper.

Step 4

Replace duplicated HTML with

$this->render_dashboard_card(
    $title,
    $value
);

inside the loop.

Step 5

Test the dashboard to ensure every statistic card still renders correctly.

Expected Outcome

After completing this lesson:

  • Dashboard code becomes much shorter.
  • Only one function controls the card layout.
  • Future dashboard statistics can be added with a single array entry.
  • Any future visual changes require editing only one method.
  • The Flipnzee Auctions dashboard becomes more modular and easier to extend.

Files We’ll Modify

  • admin/class-admin.php

Difficulty Level

⭐⭐☆☆☆ (Beginner–Intermediate)

Estimated Time

20–30 minutes

Coming Up Next

In Lesson 84, we’ll continue improving the admin interface by introducing a reusable admin notice/message system, allowing success, warning, and error messages to be displayed consistently across all Flipnzee admin pages without duplicating HTML.

Leave a Reply