WP Manifestindependent plugin directory
manifest / editor / mortgage-calculator-block

Mortgage Calculator Block

Interactive mortgage payment calculator with loan breakdown and visualization. Features real-time calculations, beautiful design, and responsive layout.

by Your Name · github.com/derintolu/mortgage-calculator-block · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/derintolu/mortgage-calculator-block/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/derintolu/mortgage-calculator-block ↗

A professional WordPress block plugin that provides an interactive mortgage payment calculator with real-time calculations, beautiful design, and responsive layout.

Features

  • Real-time Calculations - Updates instantly as users type
  • Beautiful Design - Professional dark/light theme with gold accents
  • Responsive Layout - Works perfectly on all devices
  • Visual Progress Bar - Shows principal vs interest breakdown
  • WordPress Block Editor - Seamlessly integrates with Gutenberg
  • No External Dependencies - Self-contained with all assets bundled

Installation

From ZIP File

  1. Download the plugin ZIP file
  2. Go to WordPress Admin → Plugins → Add New → Upload Plugin
  3. Choose the ZIP file and click "Install Now"
  4. Activate the plugin

Manual Installation

  1. Upload the mortgage-calculator-block folder to /wp-content/plugins/
  2. Activate the plugin through the 'Plugins' menu in WordPress

Usage

  1. Add the Block: In the WordPress block editor, search for "Mortgage Calculator"
  2. Insert Block: Click to add it to your post or page
  3. Configure: Set default values in the block settings (optional)
  4. Publish: The calculator will be live and interactive on your site

Block Settings

The block includes the following customizable attributes:

  • Default Loan Amount: Starting home price value
  • Default Down Payment: Starting down payment amount
  • Default Interest Rate: Starting annual interest rate percentage
  • Default Loan Term: Starting loan term in years

Calculator Fields

  • Home Price: Total cost of the property
  • Down Payment: Initial payment amount (displays percentage automatically)
  • Interest Rate: Annual percentage rate
  • Loan Term: Length of the loan in years

Results Display

The calculator shows:

  • Monthly Payment: Principal and interest payment
  • Total Interest: Total interest paid over the loan term
  • Total Payment: Total amount paid over the loan term
  • Principal Amount: Loan amount after down payment
  • Visual Progress Bar: Principal vs interest ratio

Technical Specifications

  • WordPress Version: 6.1 or higher
  • PHP Version: 7.4 or higher
  • React Version: 18.2.0
  • Build Tool: WordPress Scripts (@wordpress/scripts)
  • CSS Framework: Custom SCSS with CSS variables

Development

Prerequisites

  • Node.js 16 or higher
  • npm or yarn

Setup

npm install

Development Build

npm run start

Production Build

npm run build

Performance

  • JavaScript Bundle: ~7KB gzipped
  • CSS Bundle: ~3KB gzipped
  • No External API Calls: All calculations performed client-side
  • Optimized Assets: Minified and tree-shaken for production

Browser Support

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

Changelog

1.0.0 (2025-07-23)

  • Initial release
  • Real-time mortgage calculations
  • Responsive design implementation
  • WordPress block integration
  • Professional styling with dark/light theme
  • Progress bar visualization
  • Form validation and error handling

License

This plugin is licensed under the GPL v2 or later.

Made with ❤️ for the WordPress community