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 video testimonials once units are handed over, a sharia mortgage calculator, photo galleries, and construction progress updates.
A scrollable look at the finished site, exactly as a visitor would browse it.
Desktop
Mobile
The tools and technologies that came together to bring this project to life.
Each project draws on a mix of disciplines, here's how they came together on this one.
A closer look at what the finished product offers, the obstacles along the way, and what came out of it.
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. Closed off with layered hardening across multiple points, from login protection to server-level configuration.
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.
How this project changed things for the business and its users after launch.
Content architecture built to grow
Self-serve mortgage calculator
Reduced attack surface
Images under 200KB
Zero N+1 attachment queries
Settings independent of the theme
Automatic WhatsApp redirect
Reusable components across the site
Before
The previous single-page site had no room for video testimonials, 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
Prospective buyers had to ask sales directly just to get a rough estimate of their sharia mortgage installment.
After
An interactive calculator on the site now gives an instant estimate based on the chosen house type, down payment, and tenor.
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
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
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
Prospects who filled out a form typically had to wait for a manual reply from an admin.
After
Submitting the form redirects straight to WhatsApp with a pre-filled message, so follow-up can start instantly.
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.
