Elite Gamers
A full gaming publication — news, game reviews, video coverage, hardware, walkthrough guides, esports events, films and anime — built from nothing as a bespoke WordPress theme. No purchased template, no page-builder layout, no plugin stack. Arabic-first and right-to-left by construction, with a live AR / FR / EN toggle, and every post type, field, component, animation and line of CSS written for this project.
THE PROBLEM
Arabic-speaking gamers read their news and reviews through interfaces built for English first, where right-to-left is an afterthought. A publication for them needed nine kinds of content, a review score its editors could trust, and search that works the way Arabic is actually typed — none of which arrives in a theme you can buy. Underneath all of it sat the real constraint: a publication is edited every day, for years, by people who are not developers.
THE RESULT
A theme written end to end: 9 post types, 4 taxonomies, a weighted multi-axis rating engine with a single source of truth, a ⌘K command palette with Arabic orthographic search folding, and a live AR / FR / EN toggle. Around 1.7 MB cut from the hero payload, and audited after completion across 11 domains — 96 findings confirmed and resolved, zero critical.
WHAT SHIPPED
What I refused to install.
Three rules set before the first commit, and held to the last one. Each cost more to keep than to break — which is the only reason they are worth stating.
No plugin the theme depends on
Nothing to buy, renew, or have break underneath you.
Custom fields are native register_post_meta with hand-built meta boxes — no ACF. SEO, structured data, image handling, newsletter capture and the editorial tooling are all first-party theme code. A theme leaning on five plugins inherits five upgrade paths, five security surfaces and five licences; this one inherits none. The site's operator has since installed a contact form, tournament and anti-spam plugins on top — his call, and the theme neither requires them nor breaks with them.
No CDN, and no external request from the theme
Nothing about a visitor is handed to a third party.
Every typeface is self-hosted and subsetted — 26 .woff2 files, 468 KB in total. No Google Fonts, no third-party trackers, no external scripts from the theme itself. That makes it clean under GDPR by construction rather than by policy page, and portable: it does not stop working because someone else's service does.
No build step
Deployable by copying a folder, five years from now.
No webpack, no Sass, no npm install to run or maintain it. Assets are enqueued properly through wp_enqueue_script and wp_enqueue_style with an explicitly enforced dependency chain. The reason is longevity rather than laziness: a toolchain is the first thing to rot, and a theme that needs one in order to be edited is a theme the next developer cannot safely touch.
Server-rendered first, throughout. JavaScript enhances this site; it is never required in order to read it.
Every component, written.
Nine content types, a scoring engine, a design system and a command palette — every component, every animation and every line of CSS written for this project.
Content architecture
Designed around how an editorial team actually works, rather than around what a template happened to offer.
- 9 custom post types: Reviews, Videos, Esports Events, Hardware, Walkthrough Guides, Films & Series, Anime & Manga, Galleries and Partners — plus a private subscriber store for the newsletter.
- 4 taxonomies (Platform, Genre, Franchise, Brand), attached per post type, so a film carries genre and franchise but not console platform.
- Custom archive templates, filter bars, load-more pagination, and dedicated empty-state, error-state and 404 components.
The review scoring engine
The hard part of the build, and the part that had to be impossible to get wrong.
- Weighted multi-axis scoring — gameplay, story, graphics and a fourth axis — with weights normalised by their own sum, so one axis can be weighted 3× without recomputing the rest.
- All-or-nothing derivation: the weighted mean only takes over once every axis is filled. A half-finished form can never silently rewrite a published score.
- One source of truth. eg_overall_score() feeds the score ring, the star row, the archive card pills, the sort attribute, search, the command palette and the JSON-LD ratingValue — so the donut and the stars cannot disagree.
- Embargo enforced at the shared reader rather than per template, so an embargoed score cannot leak through a card, a search result or structured data. Editors are exempt.
- A full rating panel: animated circular score ring, five-star row, per-axis breakdown bars and a colour-band legend, all driven by a single CSS custom property.
Design system
147 tokens in three layers — primitive, semantic, component — and roughly 200 custom properties across the stylesheets.
- Dark and light themes, both hand-tuned. Every colour pairing was measured rather than eyeballed: the gold signature colour is theme-split precisely because one value measured 1.63:1 on white.
- Semantic colours ship as triples — solid, subtle tint, ink — so text on a tinted background is always legible. The old shared value measured 1.86:1 and was replaced.
- Four typefaces across Latin and Arabic, with locale-aware token remapping so Arabic copy picks up an Arabic display face automatically, and tabular numerals enforced on every figure.
Right-to-left, by construction
Not an English site with an Arabic patch bolted onto it.
- Logical properties throughout — inline-size, margin-inline, inset-inline-start — rather than left and right values mirrored after the fact.
- Scroll and parallax animations read document.dir, so a directional animation does not run backwards in Arabic.
- A ⌘K command palette on a proper ARIA combobox and listbox, queried from real content, with Arabic orthographic folding across hamza forms, ya and alef-maqsura, and ta-marbuta — so a reader searching without diacritics still finds the article.
- A live AR / FR / EN toggle that swaps authored content instantly, with no page reload.
Performance
Measured first, then fixed — in that order.
- The hero slider loads only the first slide's cover eagerly, with an LCP preload hint; slides 2–8 ship as data attributes and paint on activation, prefetching the next one during dwell. Roughly 1.7 MB of eager hero payload removed.
- Photographic covers standardised to JPEG after a photo shipped as PNG measured around 1 MB per crop; reconversion cut it by about 80%.
- The logo went from 2048px and 427 KB to 168px and 12 KB.
- prefers-reduced-motion honoured in 11 stylesheets and 5 JavaScript modules — every animation, without exception.
- Motion built on GSAP, ScrollTrigger and Lenis, self-hosted and loaded conditionally rather than globally.
SEO and structured data, first-party
Twelve Schema.org types, hand-written, with no SEO plugin anywhere in the theme.
- Review, VideoObject, HowTo and HowToStep — walkthrough guides emit real step markup — plus SportsEvent, SportsTeam, Organization, WebSite with SearchAction, BreadcrumbList, ImageObject, Person and Rating.
- Custom canonical URLs, Open Graph and Twitter card generation, dynamic meta descriptions, breadcrumb trails and a filtered robots.txt.
- Editorial by design: no prices, no buy links and no offers anywhere in the structured data.
What the editor gets
The person publishing every day is the real user of a publication theme.
- A Customizer layer driven by one declarative schema: add an array entry, and the setting, its control, its sanitizer and its reader all follow automatically.
- Every option genuinely optional — with no settings touched, the theme emits zero extra bytes, so an untouched install is byte-identical to the shipped design.
- The accent colour picks its own foreground by WCAG luminance calculation, so a pale accent never produces white-on-pale buttons — with the same maths mirrored in the live-preview JavaScript.
- A drag-free walkthrough step builder, and editorial callout styles in pure PHP and CSS, so content stays valid core markup and survives a change of theme.
- theme.json kept deliberately settings-only, measured at +1.1 KB gzipped, because adding a styles key would make WordPress emit a competing global stylesheet.
- A standalone self-check (tests/check-customizer.php) that runs with no WordPress, no database and no server, asserting that every control's own values survive its own sanitizer.
Accessibility
- Skip link, managed focus, ARIA roles across 20+ templates, and roving tabindex on radio groups.
- The mobile drawer is visibility:hidden when closed — transform alone had left 14 focusable elements in the tab order of every page, including on desktop, where the drawer cannot even be opened.
- Contrast verified by measurement in both themes, not by eye.
I audited my own code.
The build was feature-complete. That is normally where a project ships. This one went through a forensic audit of its own codebase first: 22 automated review agents across 11 domains, 101 findings raised, 96 confirmed on evidence and 5 refuted, resolved across 14 commits, with zero critical issues. Five of the things it caught:
- A pagination helper that silently disabled load-more and numbered pagination site-wide — while both the JavaScript and the comments still claimed it worked.
- A JSON-LD escape function whose str_replace had byte-identical search and replace arrays: a documented no-op.
- A whole-card link selector that had never matched a single element since the day it was written, because it required an anchor nested inside an anchor.
- A reading-time estimate using str_word_count(), which is byte-based and was counting Arabic roughly four times over.
- A Customizer sanitizer failing on PHP's silent integer-casting of numeric array keys — a bug with no visible symptom anywhere in the interface, which only a written assertion caught.
Not one of these was visible from the front end, which is the entire point: this is the class of defect that ships, sits there, and becomes whoever maintains the site next year's problem. Every non-obvious decision, verified measurement and known trade-off is documented in the repository, beside a seven-file design canon — creative brief, design system, product specification, component library, UX guidelines, animation guidelines and master brief — written before the code was.
The theme, counted.
The theme, counted.
( NEXT )