WDT Website
Build Guide

The Technology Stack

• WordPress — Content management system (the engine)
• Directory Theme — Provides the venue listing system (custom post type for Tennis Centres)
• Elementor — Visual drag-and-drop page builder
• WDT Elementor Widgets v2.7.4 — Our custom plugin with 71 branded widgets
• WooCommerce — Shop/products (already installed)
• Yoast SEO — Search engine optimisation
• LiteSpeed Cache — Performance caching
• Wordfence — Security

Pages (Elementor)

These are the main site pages built with Elementor and our WDT widgets. They live under Pages in the left sidebar.

• Home page
• Venue Support, Court Maintenance, Coach Support
• Upcoming Courses, Traineeships, Coaching Information
• Jobs, Contact Us, About
• Parks landing page and individual park pages (e.g. Manchester Parks)

Directory Listings (Tennis Centres)

Venue entries live under Directory → All Tennis Centres in the left sidebar. Each venue has its own listing with structured fields (contact info, location, images, categories). The venue's page content is built with Elementor using the "Custom Template" option, which lets you use WDT widgets inside the venue listing.

Finding the Directory

In the WordPress admin sidebar, look for the Directory menu item (with a green icon). Click it to expand the sub-menu:

• All Tennis Centres — List of all venues (currently 11 published)
• All Packages — Subscription packages (not used currently)
• All Claims — Claim requests (not used currently)
• Tennis Centre Category — Categories like Academy, Coaching, Courts, etc.
• Tennis Centre City — City taxonomy (Manchester, Telford, Ludlow, etc.)
• Tennis Centre Neighborhood — Neighbourhood taxonomy
• Tennis Centre County/State — County taxonomy (Shropshire, etc.)
• Tennis Centre Event — Event taxonomy
• Tennis Centre Group — Group taxonomy
• Settings — Global directory configuration
• Statistics — View counts and analytics

Key Tabs to Fill In

• General — Set Page Template to "Custom Template" so you can build with Elementor. Toggle "Featured Item" on if it should appear prominently.
• Media – Images — Upload venue photos with captions. These appear in the listing gallery.
• Location — Address and map coordinates. Powers the map pin and "Get Directions" link on the front end.
• Contact Information — Phone, email, website for this specific venue (if different from head office).

Other Tabs — Do Not Use

• Features — Not used
• Media – Videos — Not used
• Business Hours — Not used
• Price, Virtual Tour, Floor Plan, Event — Not used

Current Categories

Tick all that apply. You can add new categories via Directory → Tennis Centre Category.

Location Taxonomies

• City — Manchester, Telford, Ludlow, Manchester Parks, etc.
• County/State — Shropshire, etc.
• Neighbourhood — Optional, more granular location

These power the venue search and filtering on the front end.

How to Use a Widget

• Open any page in Elementor (click "Edit with Elementor")
• In the left panel, search for "WDT" or scroll to the WDT Widgets category
• Drag a widget onto the page canvas
• Configure it in the left panel — all options are labelled and have help text
• Click Update/Publish when done

1 WDT Parks Hero New

Two-column hero designed specifically for park area pages. Shows a tilted tile card image on the left (area logo or photo) and all the key info on the right.

• Partner Badge — optional pill with partner logo image or default icon (e.g. "In Partnership with Wirral Council"). Toggle on/off per page.
• Programme Badge — coral pill label (e.g. "Parks Programme")
• Title, Location, Description — all editable text fields
• Quick Stats — repeater with number, label, and icon selection (9 icon choices including court, users, smile, star, trophy, etc.)
• Built-in Sticky Action Bar — phone number, email with custom label (e.g. "Got a Question?"), Book a Court button and Annual Pass button with separate URLs. Sticks to the top when scrolling.

2 WDT CTA Tiles New

Large image overlay cards in a 2, 3, or 4 column grid. Each card has a background image with a navy gradient overlay, a coral icon square, title, description, and an arrow CTA link. Cards lift and glow coral on hover.

• Use for the "Book a Court / Annual Passes / Tennis Sessions" mosaic directly below the hero
• Each card can link externally (e.g. to the LTA booking page) or internally (e.g. anchor scroll to tabs)
• 11 icon options including court, card, users, calendar, star, trophy, globe, shield
• Background images are optional — without one, cards show a solid navy gradient

3 WDT Quick Links Bar New

A horizontal coral or navy gradient strip with 2–6 icon + text link buttons. For the core action buttons that appear on every parks page.

• Defaults: Book a Court at the Parks, Area Wide Annual Passes, LTA Local Tennis Leagues, Safeguarding
• 13 icon options per button
• Each button has its own URL (can open in new tab for external sites)
• Choose coral or navy gradient background

4 WDT Park Map New

Interactive map showing park locations with coral branded pins. Each park is added by the admin with name, address, coordinates, and "what's on" notes. Fully editable per page.

• Adding parks: Click "Add Item" in the repeater. Enter park name, address, latitude, longitude, and what's on (one item per line — each line becomes a bullet point)
• Getting coordinates: Right-click any location in Google Maps → "What's here?" → copy the lat/lng numbers
• Visitor experience: Coral teardrop pins on the map. Click a pin to see a popup with name, address and what's on. Click a park in the list below the map and it flies to that location.
• Settings: Map height (150–600px), zoom level, show/hide the location list, list max height
• Each parks page has its own independent map — Wirral shows Wirral parks, Manchester shows Manchester parks
• Uses OpenStreetMap (free, no API key needed)

5 WDT Park Sessions New

Slim horizontal session rows designed for parks pages. Each row shows: session title + description on the left, price badge in the middle (green FREE pill or coral price text), and a Book button on the right. Optional notice box at the top for important info. Use inside parks tab sections.

Admin fields: Notice text (optional), then a repeater for each session: Title, Description, Price (type FREE for green badge), Button text, Button URL, Button style (coral/navy).

6 WDT Course Cards New

Coloured category cards for the Coach Development page. Each card has its own colour theme (navy, green, gold, coral), a circular icon, title, and booking button. Comes pre-loaded with 5 default cards: CPD (navy), Readiness Tests (navy), Padel Tennis (navy with padel racket icon), First Aid (green #228B22), and Safeguarding (yellow/gold #DAA520).

Admin fields: Section title, columns (2-5), then a repeater for each card: Title, Card Colour (navy/green/gold/coral), Icon (12 options including padel racket, first aid cross, shield), Button text, Button URL.

Colour rules: First Aid cards always use green (#228B22). Safeguarding cards always use yellow/gold (#DAA520). Each colour controls the background tint, icon gradient, hover border, and button colour automatically.

7 WDT Promo Banner New

Global promotional banner designed for monthly promos. Upload a Canva graphic, optionally add a text overlay (badge, title, description), and a Book Now button. Coral border and shadow by default. Button can sit below the image or overlay on top of it.

Key feature: Use this widget inside an Elementor Saved Template to create edit-once-update-everywhere promos. One template for all parks pages, one for all venue pages. See the Global Promo Templates section below for setup instructions.

Admin fields: Promo image (upload Canva graphic), corner radius, text overlay toggle (badge, title, description), button text, button URL, button style (coral/navy/white), button position (below image or overlay), coral border toggle, shadow toggle.

8 WDT Parks Tabs Existing

Scrolling tab bar for parks pages with arrow navigation and fade hints on mobile. Pre-configured with parks-specific defaults: Free Park Tennis, Coaching, Social Play, Big Tennis Weekends, Tournaments. Use the Park Sessions widget inside each tab's content section for slim session rows.

9 Existing Widgets Used on Parks Pages

These existing widgets are also used on parks pages — no changes needed:

• WDT Feature CTA — for the Tennis Activator section (navy background, image + text + button)
• WDT Park Sessions — slim horizontal session rows for tab content (replaces Session Cards on parks)
• WDT Social Links — for the Follow Us section (Facebook, Instagram, X)
• WDT Venue Sidebar — for sidebar contact info, mini map, and promo/"Got a Question?" card
• WDT CTA Section — for the bottom coral "Want to Find Out More?" strip

Updates in v2.7.4

These fixes and improvements were made since the v2.6 parks release:

• WDT Venue Header — New "Logo Tile + Info" layout option with venue logo/tile image card, partner badge, and short description fields. Original background image layout still available.
• Venue Tabs & Parks Tabs — Fixed tab switching bug where second tab content disappeared. Now properly uses display:block to override stylesheet rules.
• Session Cards Mobile — Fixed cards overflowing on mobile. Grid now correctly stacks to single column at 800px.
• Park Map — Added Leaflet CSS resets to prevent theme styles from breaking map popups, zoom controls, and markers.
• White Text on Dark Backgrounds — Added global CSS overrides to ensure all headings and text on navy/coral backgrounds stay white, overriding aggressive theme styles. White cards inside dark sections correctly show dark text using triple-specificity selectors.
• CSS Cache Busting — Version constant now updates with each release so browsers load the latest CSS immediately.
• Shop Banner — Fixed heading text colour to white with !important override.

How It Works

You create two Elementor Saved Templates — one for parks promos and one for venue promos. Each template contains a WDT Promo Banner widget with the current month's Canva graphic and booking button. You then embed that template on every relevant page using a shortcode. When someone edits the template, every page that uses it updates instantly.

Step 1: Create the Promo Template

1. Go to Templates → Saved Templates → Add New (or visit wp-admin/edit.php?post_type=elementor_library directly)
2. Template Type: Section
3. Name it: Parks Monthly Promo (or Venues Monthly Promo)
4. Click Create Template
5. In the Elementor editor, search WDT Promo Banner and drag it on
6. Upload the current Canva promo image, set the button text and link
7. Click Publish
8. Note the template ID from the URL bar (the number after post=)

Repeat for the second template (venues or parks).

Step 2: Embed on Pages

1. Open a parks or venue page in Elementor
2. Find the tab or section where you want the promo to appear
3. Drag an Elementor Shortcode widget into that section
4. Type: [elementor-template id="YOUR_ID"] (replace YOUR_ID with the template number from Step 1)
5. Click Update
6. Repeat on every parks page (same shortcode, same ID) or every venue page

Step 3: Monthly Updates (The Easy Bit)

When the team wants to change the promotion:

1. Go to Templates → Saved Templates
2. Click Parks Monthly Promo (or Venues Monthly Promo) → Edit with Elementor
3. Click the Promo Banner widget → upload the new Canva image
4. Update the button link if needed
5. Click Update

That's it. Every page with the embedded shortcode now shows the new promotion. No need to edit individual pages.

WDT Promo Banner Widget — Settings Reference

Important Notes

• Two separate templates — one for parks, one for venues. This lets you run different promotions for each.
• The shortcode must be placed once on each page during initial setup. After that, all updates happen through the template only.
• To temporarily hide a promo, edit the template and remove the image or set it to draft. All pages will show a placeholder message instead.
• Templates are found at Templates → Saved Templates in the WordPress sidebar, or go directly to wp-admin/edit.php?post_type=elementor_library

Parks vs Venues — What's Different?

• Use WDT Parks Tabs instead of WDT Venue Tabs (pre-loaded with parks defaults)
• Parks often have a sticky action bar at top (Book a Court + Annual Pass buttons)
• Tab content focuses on Free Park Tennis, Junior/Adult Coaching, Social Play, Tournaments
• Free sessions get a "FREE" badge — use the Session Cards widget with price set to £0
• Bottom section includes Social Links widget for the local parks Facebook/Instagram

Typical Page Structure

• Hero Banner — Sets the tone with background, title, subtitle
• Stats Bar — Optional, but adds impact (coral gradient, 3-5 stats)
• Content Blocks — Mix of Info Cards, Service Cards, Tabbed Content, Image CTAs, etc.
• Contact Section — Form + contact details (if relevant)
• Bottom CTA — Final call to action

How Tab → Section Linking Works

The tab widget has a list of tabs. Each tab has two fields: Tab Label (what the user sees) and Target Section CSS ID (which section to show). Below the tab widget, you create separate Elementor sections, each with a matching CSS ID.

Setting a CSS ID in Elementor

• Click on the Section (the blue bar at the top of the section, or the 6-dot handle)
• In the left panel, click the Advanced tab
• Find the CSS ID field at the top
• Type in the ID (e.g. wdt-park-free) — no spaces, no # symbol

Recommended CSS IDs

Colour Palette

Typography

• Oswald — All headings, buttons, badges. Always uppercase. Weights 500-700.
• Montserrat — All body text, labels, descriptions. Weights 400-700.

Special Colour Rules

• WhatsApp buttons — Always green (#25D366), never coral
• First Aid cards — Green theme (#228B22)
• Safeguarding cards — Yellow/Gold theme (#DAA520)
• Section titles — Always have a coral underline bar beneath

WDT Head Office

• Address: New Rd, Wrockwardine Wood, Telford TF2 7AB
• Phone: 01952 984894
• Email: enquiries@wedotennis.co.uk
• WhatsApp: wa.me/4407789954789

Social Media Links

• Facebook: facebook.com/profile.php?id=61577153278608
• Instagram: instagram.com/wedotennis/
• X (Twitter): x.com/wedotennisuk

Key URLs

• Live Site: wedotennis.co.uk (staging: wdt.nectar.org.uk)
• Admin Login: wedotennis.co.uk/wp-admin (staging: wdt.nectar.org.uk/wp-admin)
• ClubSpark (bookings): clubspark.lta.org.uk/mcrparkstennis
• Corsizio (course bookings): wedotenniscoaching.corsizio.com

Which Pages Are Restricted

• /coach-key-docs/ — Coach Key Documents (coaching calendars, marketing assets, certificates, forum presentations)
• /venue-key-docs/ — Venue Key Documents (venue marketing assets, key venue documents)

How It Works

• If someone visits either page without being logged in, they are automatically redirected to the WooCommerce My Account page to log in.
• After logging in, they are automatically sent back to the documents page they were trying to view.
• If they are already logged in, the page loads normally with no redirect.

Creating Accounts for Coaches

• Self-registration on the My Account page should be turned off so only authorised coaches can access the docs.
• To disable: go to WooCommerce → Settings → Accounts & Privacy and untick "Allow customers to create an account on the My Account page".
• Keep "Allow customers to create an account during checkout" ticked — this doesn't affect the key docs pages and lets shop customers still register when buying.
• To create a coach account: go to Users → Add New, fill in their email and name, and set the role to Customer. They'll receive a password setup email.

Tabs not switching content

The CSS ID in the tab widget must exactly match the CSS ID on the Elementor section. Check for typos, extra spaces, or a # symbol (don't include #). IDs are case-sensitive.

WDT widgets not appearing in Elementor

Make sure the WDT Elementor Widgets plugin is activated. Go to Plugins in the admin sidebar and check it's turned on. If it's not there, re-upload the plugin zip via Plugins → Add New → Upload Plugin.

Styles look broken or missing

Try clearing the cache: go to LiteSpeed Cache → Purge All in the admin bar. Also try a hard refresh in your browser (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac).

Changes not showing on the live site

Always click Update (or Publish) in Elementor first. Then purge the LiteSpeed cache. If it still looks old, wait 2-3 minutes — some caches take time to clear.