logo

Total Visitors 125

Today 0

2

MMA League Rebuild with Custom WordPress Theme

Overview

A full rebuild of Battlefield Fight League (BFL) — a Vancouver-based MMA organization — turning an outdated, plugin-heavy WordPress site into a fast, responsive, and maintainable platform.

The project began after fixing a countdown timer issue for the client during a WordPress community event. After reviewing the site, we found excessive plugins, slow loading times, and non-responsive layouts. Our 4-person team decided to rebuild it from the ground up with a custom theme to improve performance, design consistency, and ease of management.

I focused on the fighter and ranking pages, homepage layout, and UI refinements. I designed wireframes in Figma, developed the countdown timer as a standalone plugin, and implemented data-driven ranking pages powered by MySQL instead of static text.

  • Role: Frontend & WordPress Developer (4-person team)
  • Duration: Nov - Dec 2024
  • Stack: WordPress (Custom Theme), PHP, JavaScript, MySQL, ACF, Figma
  • Live Site
Homepage redesign with responsive layout, event countdown, and fighter highlights

Homepage redesign with responsive layout, event countdown, and fighter highlights

The Challenge

The old BFL website used an outdated theme with dozens of unnecessary plugins, causing over a minute of load time just to open the dashboard. Content wasn’t responsive, and some sections failed to load entirely. Our goal was to rebuild a lightweight, modular system with faster performance and a modern UI.

The previous design wasn't outdated, but it needed a modern refresh and full mobile responsiveness.

The previous design wasn't outdated, but it needed a modern refresh and full mobile responsiveness.

Design & Development Approach

We rebuilt the site from scratch with a custom WordPress theme, creating structured data tables for fighters and rankings. I designed clean layouts inspired by UFC and other MMA websites, ensuring visual hierarchy and mobile responsiveness. My key contributions included plugin development for event countdowns, performance optimization, and implementing a reusable base style system across pages.

  • Redesigned homepage, ranking, and fighter pages in Figma
  • Developed a custom countdown plugin controllable via dashboard
  • Implemented Load More pagination and image caching for faster initial load
Initial design for the new website

Initial design for the new website

Key Features

The new site introduced lightweight, scalable features designed for both fans and administrators.

  • Dynamic Ranking System — Filterable by weight class, linked to fighter profiles
  • Custom Countdown Plugin — Maintained directly from WordPress dashboard
  • Optimized Dashboard — Reduced admin load time from over 60 seconds to under 5 seconds

Results & Learnings

  • Reduced dashboard load time by over 90% through theme refactoring and database optimization
  • Delivered a fully responsive UI with consistent branding and mobile-first layouts
  • Learned how to balance design, performance, and client usability in real-world WordPress projects

This project strengthened my ability to design maintainable WordPress systems and collaborate in small, fast-paced teams while focusing on usability and performance.

Back to the List
HomeProjectsAbout