Please tell a friend about us. Thank you.

Below is just one example of how the FC Mortgage Calculator plugin for WordPress might look (and work) when displayed from the content area of a website or blog. You can select from 4 predefined sizes or customize it as needed. Installation is simple. More below...»

Keep Your Visitors On Your
Website or Blog!
You work hard both to build a site and to attract visitors. Keep them there. Put my calculators on your site rather than link to another site's calculator. Add as many plugins or widgets as you like and improve your bounce rate and increase your advertising opportunities.
Karl's
Mortgage Loan Calculator
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_fcmortage_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=

Shortcode Examples:

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

First example includes all options.

Optional array parameter passed to
show_fcmortage_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. (DOCTYPE XHTML 1.0 Transitional has been tested as well.)
  6. max-width: large: 440px, medium: 340px, small: 290px, tiny: 150px
Questions? Problems? Compliments? :)
Tell me how you made out installing the plugin. If you have any issues with it, you can provide a link to your page in the comment and I'll take a look. Or, for that matter, if you want to show this site's visitors how you are using the plugin, you can leave a link for that reason as well.

20 thoughts on “mortgage-calculator-plugin

  1. 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 http://www.yellowbrickroadspain.com/ 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 http://www.yellowbrickroadspain.com/mortgage-calculator/ 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:

      \wp-content\plugins\fc-mortgage-calculator\

      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.

  2. 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?

  3. 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?

    http://reluctantcreditguy.com/mortgages/

    Thanks!

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

        http://reluctantcreditguy.com/tools/mortgage-calculator/

        Thanks!

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

  4. 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 https://www.gardenstateloans.com/mortgage-calculator/. 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. 🙂

      • 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;
        }

        Thanks,
        Steven

        • 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. 🙂

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

          • I can certainly wait for the update. No rush. Thank you for your help so far!

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

  5. 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?:
    Points?:

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

Comments, suggestions & questions welcomed...

* Required