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.

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

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.


  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


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:


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

First example includes all options.

Optional array parameter passed to

This can be copied and pasted to a template part.

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

  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)


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).

33 Comments on “Mortgage Calculator Plugin”

financial online calculator Join the conversation. Tell me what you think.
  • John Blanchette says:

    Dear Karl ,

    Re: FC Mortgage Calculator:

    I hope you have had an enjoyable Christmas and that you have a prosperous New Year in 2017.

    Thank you for this first class calculator tool you’ve kindly made available! Very useful for a total novice web builder like myself.

    Since the site I’m building is to be internationally available, we need to offer our users a mortgage calculator facility where they can also select their own currency and date convention for their loan schedule by using the € : mm/dd/yyyy options at the bottom right corner …a calculator just like yours. (Please see our page).

    Q 01. Having installed your calculator code on our site on its own page, we find that on both mobile devices and PCs, the Users’ ability to change the currency and date formats is being blocked by a semi-opaque mask overlay that appears when trying to do so. Can you provide any guidance as to how I get this vital component to work correctly please?

    Q 02. Is there any way that I can change your calculator buttons from their default navy blue to our pale blue #2fb6ef or any other colours?

    Q 03. I’ve noticed that the fillable fields are not quite level with their their respective field titles, in relation to each other. Is the any way/anywhere I can easily adjust these with a snippet of code perhaps?

    I used your installation option 2, but cannot see how or where to “modify a CSS file to customize both size and colors”. I set the option to “Yes” without making any changes and the calculator has changed to a horrendous red, indicating that the custom css is being used.

    I look forward to hearing from you and will be happy to submit a favorable review if I can get this working properly.

    Many thanks in anticipation of your helpful response.

    Kind regards,

    • John, thanks for giving my plugin a try.

      1. This may be tricky with this particular site’s design to fix. But, we may get lucky. I can see that you don’t have the most up to date version of the calculator. I released an update on Thursday that might prevent this. Can you please update the plugin you are using with the latest version? What i happening is, the YellowBrickRoadSpain semi transparent overlay is being expanded to cover the date and currency dialog when it is open. I changed the CSS in the plugin that may prevent this. (If that does not work, I’ll look into a specific solution.)

      The update should also fix the label alignment.

      2. Yes. This should be pretty straight forward. Find these CSS rules in the custom css file:

      #calc-wrap > .calculator .btn-primary:hover {
      color: #ffffff;
      /* background-color: #286090;
      border-color: #204d74;
      #calc-wrap > .calculator .btn-primary {
      color: #ffffff;
      background-color: #303e64;
      border-color: #283353;

      3. Yes, please update the code. If you notice the calculator at the top of this page (which is the actual plugin) does not have that problem.

      About the custom CSS – this is confusing. I took a look at your sites source code and the css file names are getting renamed. Not sure what is doing that. Are you using a framework of some type?

      Regardless, assuming you have a standard WordPress installation, you are going to want to find the folder where the plugin is installed. That should be here:


      In the above folder, there is a CSS folder where you’ll find this file: fin-calc-widgets-custom.css

      Modify it for the button colors. Then build your site if that is normally required, or a minimum, refresh the page.

      Please let me know how you make out. We should be able to get these issues resolved.

    • I’ve been looking at your site in more detail. The problem with the overlay with the currency / date setting dialog is caused by this rule:

      .modal-backdrop {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1040;
      background-color: #000;

      If the z-index is commented out, then the problem goes away. The new version of the plugin has this rule written slightly differently. So I’m optimistic that updating will resolve the problem.

    • John, I was able to build a page that duplicates the problem with the currency / date conventions dialog not being accessible. (I learned something about CSS’s z-index that I never knew.) Please reinstall the plugin and make sure that the version listed in the WordPress admin’s plugin area indicates v1.1.1. I released it this morning. If you can confirm this fix works for you, I would appreciate it. Also, if your page is still up, I would like to check it out again to see if I see any other problems. Having installations on different websites to review is very helpful.

  • Steve Harlan says:

    I love your calculators, but I see an issue if you put multiple calculators on one page. the button clicks at the bottom of your calculators don’t work if you have multiple calculators on one page. I added the Mortgage and retirement calcs. and the schedule and charts buttons don’t work. It is like they are calling the opposite calculator.

    Can you help?

    • Thanks for the nice words. This is known that there can only be one calculator on a page. It would take a major redesign to change this. The reason why it is this way is because there are always trade off in programming. I don’t want to get too technical, but designing the calculators this way lets them use less code which means they load faster and this is good fro users and SEO. Think of this. Rather than have 25 or 50 or 100 different parts of the code that responds to a calc button click so that each button can be isolated in case there are multiple ones on a page, there is only one place that responds to the click since there is only one calc button active at a time.

      I’m wondering why you would want both a retirement and a mortgage calculator on the same page anyway. Isn’t it better to have more pages and specific, related text on a page?

  • Hi Karl,

    I put you mortgage calculator on a page of my blog using the shortcode, and I noticed when I try to use it with Firefox, there are tiny illegible characters in the field where you enter your data.

    When I look at it with IE, I can’t enter values.

    Any idea what going on? I’d like to use a few of your calculators if I can get them going. Maybe just create a page for each?


    • Hi, thanks for trying the calculator. Nice web page. I loaded the page and quickly tried it i IE 11 and Chrome, and didn’t have an issue with entering data or calculating. However, the number entry is a bit weird in IE 11. What version of IE were you trying? 9 or greater should work.

      Currently it is only possible to have one calculator on a page. They will conflict. I may change that in the future. But it will be awhile.

      • I created a new page and it seems to look ok. All I need to do now is learn css so I can make it match the WP theme I use! Will add your other calcs this weekend.


        • That does work much better. But you should be able to style the page the way you want and your styling should not impact the calculator’s styling, assuming you don’t use one of the calculator’s CSS rules. I suggest that you style it the way you want it, and if the calculator changes, I’ll tweak my style sheet and send you a new one. And in fact, I should update the calculators.

  • Steven Weitzman says:

    Hi Karl,
    Is there a way to get the options in the “Payment Method?” dropdown to appear properly? It seems to be getting cut off and improperly rendering at Thanks in advance for putting together this amazing calculator.

    • Hi Steven,
      Wow, and everything looks good too. I see what the problem is. Do you know how to write CSS? One of the CSS rules is setting the padding-top to 8px.

      You can use CSS to specifically set the ID selPmtMthd to padding-top 0px.

      If you need some assistance with this, I can create a snippet later that you can put in the header of the page.

      I see you are from NJ as well. 🙂

      • Steven Weitzman says:

        Hi Karl,
        Yup, from NJ!
        I found fc-mortgage-calculator/css/fin-calc-widgets.min.css, but I’m stuck here. Where do I add the following:
        select#selPmtMthd {
        padding-top: 0px;


        • It should work if you place it at the end of the file. But I’ve not tested this and if something should break, just remove it, and save the file again.

          I know I had it in my quick example, but if you want to make it load faster, you can remove the ‘px’. Saves to characters. 🙂

          • Steven Weitzman says:

            Hi Karl,
            I placed
            #selPmtMthd {
            padding-top: 0px;
            at the end of the file fc-mortgage-calculator/css/fin-calc-widgets.min.css but I’m still not having any luck unfortunately.
            I saw you mentioned to add it to the header so I tried this also but no luck…

            I wasn’t sure if I need to include select#selPmtMthd or just #selPmtMthd but I tried both options.

            Are you available for hire? Feel free to include details in an email directly.

          • Hi Steven, when do you have to be live with the page? I should have updates for all the WordPress plugins available early next week. I think I can address the problem with the dropdown list in the update. Will that work?

          • Steven, you should see an opportunity to update the mortgage calculator plugin to v 1.2.0 in your WordPress admin panel. Please let me know if the fix works for you. Thanks.

  • Steven Weitzman says:

    Is there a way to remove the “?” marks at the end of the following:
    Price of Real Estate or Asset?: = Purchase Price
    Number of Payments? (#): = Number of years
    Annual Interest Rate?: = Interest Rate

    Can I remove:
    Down Payment Amount:
    Total Interest:
    Total Principal & Interest:
    Payment Method?:

    • All WordPress plugins available on the WordPress site include 100% of the source code. Since the source code is provided, a developer can make any changes to the functionality that they want.

      On the other hand, you seem to require that major surgery be performed on the plugin. Unless you or someone else is experienced in HTML, PHP and JavaScript program, it would probably be easier to hunt for another plugin the more exactly meets your requirements.

  • Dear Karl,

    sorry for the question, I think it is easy one, I checked the blog but couldn’t find an answer.

    how could we put EUR as currency by default?

    Thank you,


    • No problem.

      If you want to make an edit to the source code, you (the website owner) can change the currency. Here’s how to do it:

      In the plugin folder, there is a js folder. Should be here with default install:


      find this file:


      With a plain text editor, such as notepad open it up and search for this text:


      Change the “$” to whatever you need as the example below. Save, and refresh the webpage


      This will change the plugin’s default for you

      The downside with this hack is, no one visiting the page will be able to set the currency to “$”. Or at least I don’t think they will be able to. I didn’t actually test that.

      Hope this works for you.

  • Good evening. I have started working on a Credit Union’s website and I was planning on using your plugins for it. They seem the most complete, even after looking through some paid options. However, they do not seem to work well with my theme. We are using the Divi Theme which has its own visual builder. It is made by Elegant Themes. When I enter the shortcode, it causes the entire page to go blank and I am unable to edit the page after that. Do you have any ideas of what may be causing this? I have tried several of the calculators and they all do the same thing. Let me know if you have any ideas.

    Thanks so much!

    • Hi Zach, I’m sorry to hear this. Do you know if the theme is built around Bootstrap? My guess is, the modal that my calculators use for setting the currency and date format options is conflicting with another modal form. Is there a URL I can use to try an diagnose the problem?

  • Hi…
    I am a beginner WP, but I know just enough to get the job done.

    I put the following short code into my site, but cannot seem to get the down payment percentage or size to customize.

    [fcmortgageplugin sc_size= "large" sc_custom_style= "No" sc_add_link= "Yes" sc_brand_name= "Drew Ludlow-Giving Tree Realty" sc_hide_resize= "No" sc_price= "360000.0" sc_dwn_pmt= "10.0" sc_loan_amt= "0" sc_n_months= "360" sc_rate= "4.25" sc_points= "0" sc_taxes= "0" sc_insurance= "800" sc_pmi= "0.75"]

    It seems to be stuck on medium size and 20% down.

    • I don’t see this "sc_pct_dwn" shortcode in your list.

      About the size, my guess is, the calculator is in a <div> that is itself too narrow.

      Do you have a URL you can provide so I can take a look? If the site or page isn’t public yet, you can email it to me. The link to the contact information is at the bottom of this page.

      • Well, I ‘cut’ it out and repasted the code, took off the italics and it seems to be working correctly (except for the size). But your comment about the makes sense. Sorry for the alarm, but appreciate the quick response.

  • Thank you Karl,

    You have a great plugin here, we have it installed on

    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.


    • 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:


      Find this text in above file and add the double forward slashes (“//”) as indicated and then save the file: .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 Karl Cancel reply

to plugin
to questions/comments