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
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/derintolu/mortgage-calculator-block/archive/refs/heads/main.zip

Readme

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

Read the full README on GitHub →