Case Study
Mortgage & LTV Calculator Plugin
A modern, high-converting Mortgage & Loan-to-Value (LTV) Calculator built as a custom, real-time WordPress plugin.
Project Brief
The objective was to build a modern, high-converting Mortgage & Loan-to-Value (LTV) Calculator as a custom WordPress plugin for a financial services and mortgage brokerage platform.
The goal was to provide the client with an adaptable, real-time financial tool where preset starting values (property price, deposit, term, interest rate) and UI themes are globally configurable via a dedicated admin configuration panel, with seamless display through Gutenberg block editor controls or shortcodes.
The Challenge
Standard financial calculators are often rigid, dry, visually cluttered, and slow to respond. The core technical hurdle was engineering an ultra-responsive, real-time calculation engine with dynamic LTV risk assessments that instantly updates as users manipulate inputs.
Simultaneously, the tool needed to offer full administrative control - allowing non-technical content editors to easily tailor default starting figures, slider ranges, LTV risk threshold bands, and styling parameters globally without writing code or sacrificing page load performance.
Functionality
Customizable Presets
Full admin flexibility to set custom default starting values (property price, deposit amount, term length, interest rate) within the global settings panel.
Interactive Controls
Dual-control synchronized sliders and numeric inputs for Property Price, Deposit (with auto-percentage sync), Loan Term, and Interest Rate.
Flexible Repayment Modes
Seamless client-side toggle between full Repayment and Interest-Only calculation modes with optional admin toggles to lock or hide specific modes.
Real-time Financial Metrics
Instant mathematical updates calculating monthly payments, total interest accrued, overall repayable amount, and precise LTV percentages on every keypress or slider shift.
Dynamic Visual Tank & LTV Bands
A signature visual gauge rendering equity versus borrowed funds in real time, paired with configurable color-coded risk band feedback (e.g., Excellent, Strong, Standard, High, Very High LTV).
A closer look
Mortgage & LTV Calculator Frontend
The public-facing, real-time calculator interface featuring dual-control input sliders, instant monthly repayment breakdowns, and the interactive LTV visual tank with live risk-band feedback.
Calculator Field Admin - Values & Ranges
Backend field configuration panel allowing administrators to set default starting values, step increments, and minimum/maximum boundary limits for Property Price, Deposit, and Loan Term sliders.
Calculator Field Admin - Rates & Repayment Modes
Configurator for default interest rates and slider boundaries, alongside admin controls to establish the default calculation mode (Repayment vs. Interest-Only) or restrict mode toggles entirely.
Customizable LTV Band Setup
Granular LTV threshold manager where admins can define custom risk bands, assign dynamic status labels (e.g., Excellent, High Risk), customize color indicators, and write targeted user notification messages per band.
Appearance & Customisation Panel
Visual theme customizer providing global controls to adjust primary, secondary, and panel background colors, border corner radiuses, and custom font family pairings to seamlessly match any brand style guide.
Context, Shortcode & Live Preview
Settings panel for setting currency symbols, locale number formatting, result labels, and custom legal disclaimers. Displays shortcode usage guidelines ([mortgage_ltv_calculator]) alongside an instant live preview frame.
Architecture
Built as a zero-dependency, lightweight WordPress plugin designed for maximum frontend speed and modularity. The calculation engine is encapsulated in an isolated Vanilla JavaScript IIFE, eliminating global scope pollution and ensuring real-time DOM re-rendering without page reloads or AJAX latency.
The backend PHP wrapper handles plugin options and Gutenberg block rendering, injecting localized state objects directly into the DOM scope. Design tokens are bound using native CSS custom properties, enabling seamless theme integration and live preview functionality directly within the WordPress admin dashboard.
Skills Used
Project Demo
Note: The following demo is a standalone HTML/JS implementation of the Mortgage & LTV Calculator. It is not integrated into WordPress and does not include the admin configuration features. For the full WordPress plugin experience, please refer to the project documentation.
The dynamic LTV visual tank and instant risk-band feedback completely transformed our user engagement. Having full control over the global settings and preset defaults inside the WordPress admin means our marketing team can easily drop the calculator onto any page via shortcode or Gutenberg block.
Have a similar project in mind?
Get in touch for a free, no-obligation quote.
Start a Project