New for 2020: Added support for over 90 additional currencies including Japanese Yen (¥12,345,679), Indian Rupee/Lakh/Crore (₹1,23,45,678.99) & Swiss Franc (CHF12’345’678.99). Click on "More" above.
advertisement

Updated February 2020 v1.4.0

Enter a "0" (zero) for one unknown value above.

  Original Size  
Paste these shortcodes in the page's content editor for above result:
[fcmortgageplugin sc_size="medium" sc_custom_style="No" sc_add_link="Yes" sc_brand_name="Karl's" sc_hide_resize="No" sc_price="355000.0" sc_pct_dwn="15.0" sc_loan_amt="0.0" sc_n_months="360" sc_rate="5.5" sc_points="0" sc_taxes="6000" sc_insurance="600" sc_pmi="0"]

This plugin is also available for download at WordPress.org

The FC Mortgage Calculator WordPress Plugin is based on and uses the code from the very popular Mortgage Calculator. Not only will the plugin calculate the monthly payment amount, it can also solve for the affordable house price or calculate the down payment percentage. Or if the user provides a house price and down payment percentage, the calculator will calculate the mortgage amount that is required. Additionally, the calculator will optionally consider loan points, property taxes, hazard insurance and private mortgage insurance (PMI). It also creates amortization schedule and charts. Your site visitors can select their own currency and date convention which is ideal if the host site attracts visitors from around the globe. The website or blog owner can select from four predefined sizes or modify a CSS file to customize both size and colors.

Rebranding with your site's brand name is supported and encouraged.

The plugin may be

  1. used in a post or page's content area via a shortcode; or
  2. used in a sidebar widget area; or
  3. called from any template file.

Installation

  1. Either
    1. upload the fc-mortgage-calculator folder with all its files to the /wp-content/plugins/; or
    2. unzip the plugin's zip file in the /wp-content/plugins/  folder.
  2. Activate the plugin through the Plugins Installed Plugins menu in WordPress

Usage

There are 3 mutually exclusive ways you can deploy the calculator to an individual page (though you can use all three methods on different pages within a site):

  1. Add the shortcode [fcmortgageplugin] in the content area of your page or post and configure shortcode parameters.
  2. Add the following code to your template where you want the calculator to appear.
    • <?php show_fcmortgage_plugin(); ?>
  3. If you are using widgets, just add the plugin to the sidebar through the Appearance Widgets menu in WordPress. Be sure to click Save.

Shortcode parameters

  • sc_size= "tiny" | "small" | "medium" | "large"
  • sc_custom_style= "No" | "Yes"
  • sc_add_link= "Yes" | "No"
  • sc_brand_name=
  • sc_hide_resize= "No" | "Yes"
  • sc_price=
  • sc_dwn_pct=
  • sc_loan_amt=
  • sc_n_months=
  • sc_rate=
  • sc_points=
  • sc_taxes=
  • sc_insurance=
  • sc_pmi=
  • sc_currency=
  • sc_date_mask=

Shortcode Examples:

advertisement

Copy and paste to page's or post's content area.

First example includes all options.

Optional array parameter passed to
show_fcmortgage_plugin()

This can be copied and pasted to a template part.

Valid values for options are the same as the shortcode above.

Notes:
  1. When setting default values for the calculator (price, down payment percentage, loan amount), one should be set to "0" so when the user clicks the "Calc" button, there will be an unknown value to calculate.
  2. If you want to add your brand to the calculator, the add link option must be set to "Yes".
  3. When branding, your brand name will be added before "Mortgage Loan Calculator".
  4. If custom style is set to "Yes", the plugin will load fin-calc-widgets-custom.css located in the plugin's CSS folder. If you set the option to "Yes" without making any changes, the calculator will change to a horrendous red which indicates the custom css is being used.
  5. The plugin is built and tested on HTML5/CSS3 pages.
  6. max-width: large: 440px, medium: 340px, small: 290px, tiny: 150px
  7. New: Website developers can set a default currency sign and preferred date format by setting _currency and _date_mask respectively. Set one or both to an integer value. For the list of integers to support 90 plus currency symbols and 6 date format options, see the file currency_and_date_conventions.txt in the plugin's root folder. (example: India, Indian Rupee: ₹1,23,45,678.99 = 83)

Screenshots

advertisement
mortgage calculator plugin
Two of the predefined screen sizes showing relative difference between "large" and "tiny".
mortgage amortization schedule
Example loan schedule with detailed header and payment due dates.
mortgage charts
Creates three charts for visualization.
WordPress option page for mortgage calculator plugin
Configuration screen in WordPress's admin area
(only for when installing in a sidebar area).
advertisement

2 Comments on “Mortgage Calculator Plugin”

financial online calculator Join the conversation. Tell me what you think.
  • Thank you Karl,

    You have a great plugin here, we have it installed on www.octoville.com/1010project/

    It works just great, the only challenge is the android issue earlier mentioned, please it would really help a lot of folks if you could find a way to sort this out.

    Cheers

    • It’s a fairly straight forward process to change the alignment of the numbers. You do have to be willing to edit one file however.

      Find this folder:

      {theme name}/wp-content\plugins\fc-mortgage-calculator\css

      Find this file, and open it with a plan text editor such as notepad:

      fin-calc-widgets.min.css

      Find this text in above file and add the double forward slashes (“//”) as indicated and then save the file:

      form.financial-calculators .calc-control.num {
      //text-align: right;
      }

      The slashes disable the instruction to right align the number. Once you’ve saved the change. Go back to the page where the plugin is loaded. Refresh the page in the Android browser and see if it fixes the input problem for you. (Make sure you see the numbers aligned to the left to know the above edit had the intended effect.)

      Please let me know how this works for you.

Comments, suggestions & questions welcomed...

Leave a Reply to Anonymous Cancel reply

Scroll
to plugin
to questions/comments
advertisement