Islamic Green Village is a sharia-compliant (interest-free) housing developer with a single development, previously represented online by a single-page site with limited room to grow. This project replaced it with a full custom WordPress theme built from scratch with plain PHP and Tailwind CSS, no page builder. The result gives the client room for a sharia mortgage calculator, photo galleries, and construction progress updates, all editable by the client’s own team without needing a developer for routine content changes.
A scrollable look at the finished site, exactly as a visitor would browse it.
Desktop
Mobile
Work like this is usually split between a developer, a UI/UX designer, a graphic designer, and a marketer. On this project, one person holds all four of those skill sets, so every decision came from someone who understood the whole project, not just their own part of it.
16
standards met, from code to marketing.
Business impact here is measured across 5 areas: Presence, Quality, Trust, Conversion and Growth. Together they cover how the business is found, perceived, and acted on.
Information that stays findable, not buried
Before
A property developer relying only on social media to share unit availability, prices, and construction progress has those updates buried under newer posts within days, with no dedicated place a serious buyer can go back to and check.
After
A website turns those same updates into a proper, professional destination, organized by page instead of buried in a feed, so a serious buyer always finds exactly what they’re looking for.
Each project draws on a mix of disciplines: here’s how they came together on this one.
The tools and technologies that came together to bring this project to life.
The problems that came up while building this project, and what came out of solving them.
Calculating the Sharia Mortgage Margin Precisely
The flat-per-year margin formula was initially written incorrectly as a one-time flat rate instead of being multiplied by the tenor. It was corrected and verified against the client’s own manual spreadsheet calculations until it matched precisely.
Avoiding Duplicated Markup Across Pages
Elements like CTA cards, buttons, and badges kept showing up on different pages, so an atomic-design structure (atoms, molecules, sections) was built to keep each piece of markup written exactly once.
Closing WordPress’s Default Security Gaps
A default WordPress install leaks a fair amount of free reconnaissance information to attackers before they even attempt anything. Closed off with hardening layered across several fronts at once, tightening login behavior, hiding technical fingerprints, and locking down server-level configuration, rather than patching a single obvious gap.
Keeping Global Settings Safe from a Theme Switch
WordPress’s built-in Customizer stores its data as theme_mod, scoped to whichever theme is active. Solved by building a separate plugin that stores settings as theme-independent options instead.
An Org-Chart Diagram Without Manual Pixel Positioning
The connecting lines for each organizational level needed to gather and spread correctly regardless of team size, solved by calculating desktop line positions from headcount per level instead of hardcoding pixel values that would break the moment the team changed.
The technical problems fixed while building this project.
Content architecture built to grow
Reduced attack surface
Closed API exposure gap
Images under 200KB
Zero N+1 attachment queries
Automatic compression on every future upload
Settings independent of the theme
Reusable components across the site
Before
The previous single-page site had no room for a mortgage calculator, a progress gallery, or regular updates.
After
The new custom theme gives each content type its own CPT and ACF fields, so the client can add new content themselves straight from wp-admin.
Before
A default WordPress install exposes information attackers can use to research a target before attempting anything else.
After
Layered hardening closes those gaps across multiple points, from login protection to server configuration.
Before
Structured content stayed reachable through an API layer even after its public-facing page was locked down, a gap that would matter more as sensitive fields get added over time.
After
That data exposure path is now closed, so locking a page down actually locks its data down too.
Before
High-resolution images across the entire site, not just one section, risked slowing down every page.
After
Every image across the site is compressed to WebP and kept under 200KB, keeping pages fast without a visible drop in quality.
Before
Every section rendering an ACF image risked firing its own attachment query, an N+1 pattern that compounds as sections get added.
After
Image data is now primed once per page in a single batched query, so new sections get the benefit automatically with no extra setup.
Before
Compression only happened as a one-time manual pass, so any photo the client uploads later would arrive at full, uncompressed size.
After
A custom pipeline now compresses and converts every future upload automatically, so pages stay fast without relying on anyone remembering to optimize an image by hand.
Before
WordPress’s built-in Customizer stores its data scoped to whichever theme happens to be active.
After
A separate plugin now stores those settings as theme-independent options, safe through theme updates or a future theme change.
Before
Elements like CTA cards and buttons risked being rebuilt slightly differently every time a new page needed one.
After
An atomic-design structure keeps one source of truth per component, reused across sections site-wide.
