NetDraw is a lightweight, spreadsheet-style WordPress plugin designed specifically for managing and displaying knockout tennis tournaments. Think of it as “TablePress, but built for brackets instead of standard tables.”
It eliminates the need to use clunky third-party bracket websites or messy image uploads, keeping the entire tennis tournament experience native to your WordPress site.
For Tournament Admins (Backend)
- Simple Setup: Create a new tournament draw just like writing a standard post or page in WordPress.
- Flexible Sizing: Choose your tournament size (8, 16, 32, or 64 players) via a simple dropdown selection.
- Easy Data Entry: Dynamically generates a clean grid of input fields where you can type in player names for the first round and log scores as matches finish.
- Automatic Progression: Mark a player as the winner of a match and the plugin automatically pushes their name forward into the next round’s slot — saving you from manual re-typing.
For Website Visitors (Frontend)
- Visual Brackets: Generates a clean, classic, tree-style tournament bracket on any page or post using a simple shortcode (e.g.,
[netdraw id="123"]). - Path Highlighting: Hovering over any player highlights their entire journey (matches won, played, and progressed) across all rounds in real-time.
- Responsive Design: Uses a custom CSS tree-structure layout that enables smooth horizontal scrolling on mobile, tablet, and desktop screens without breaking the visual integrity.
- No Bloat: Built purely using Vanilla JS and native CSS — no jQuery or external visual dependencies.
Usage
Creating a Tournament
- Navigate to the NetDraw section in your WordPress Admin sidebar.
- Click Add New Tournament.
- Enter a title for your tournament (e.g., Summer Club Open 2026).
- Under the Tournament Bracket Editor meta box, choose the tournament size (8, 16, 32, or 64 players).
- Fill in the player names for Round 1.
- As matches finish, fill in the score (e.g.,
6-4 6-2) and click the checkmark next to the winning player’s name to automatically progress them to the next round. - Click Publish or Update to save.
Displaying the Bracket
Copy the shortcode shown in the Tournament Bracket Editor, or construct it manually using the Post ID:
[netdraw id="YOUR_POST_ID"]
Paste it into any WordPress Post, Page, or Widget area to display the visual bracket.
Data and Privacy
NetDraw does not collect, store, or transmit any personal data to external services. All tournament data (player names, scores, results) is stored exclusively in your own WordPress database as post meta. No cookies are set by this plugin on the frontend.
Developer Notes
Data Schema
The plugin stores tournament configuration and match data in a flat, index-based JSON object inside the _netdraw_bracket_data post meta field:
{
"size": 8,
"matches": {
"r1_m1": { "p1": "Federer", "p2": "Nadal", "score": "6-4 6-2", "winner": "p1" },
"r1_m2": { "p1": "Djokovic", "p2": "Murray", "score": "7-5 6-3", "winner": "p1" },
"r2_m1": { "p1": "Federer", "p2": "Djokovic", "score": "", "winner": "" }
}
}
Dynamic Progression Logic
To map match results forward, NetDraw uses simple binary propagation:
- The next match index = ceiling( m / 2 ), where m is the current match number within the round.
- If m is odd, the winner becomes Player 1 (p1) of the next match.
- If m is even, the winner becomes Player 2 (p2) of the next match.
- Subsequent rounds are set to read-only in the admin panel to prevent data out-of-sync issues.