July 2020: Major Update: Ultimate Financial Calculator    3 New Calculators: Refinance Calculator, Lease vs. Buy Calculator & Break-Even Calculator
advertisement

Updated June 2020 v1.4.2


  Original Size  
Use these shortcodes in the page's content editor for above result:
[fcloanplugin sc_size="medium" sc_custom_style="No" sc_add_link="Yes" sc_brand_name="Karl's" sc_hide_resize="no" sc_loan_amt="305000" sc_n_months="360" sc_rate="5.25"]

This plugin is also available for download at WordPress.org

The FC Loan Calculator WordPress Plugin is based on and uses the code from the very popular Loan Calculator. The plugin solves for the monthly payment amount and it creates an 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-loan-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 [fcloanplugin] 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_fcloan_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_loan_amt=
  • sc_n_months=
  • sc_rate=
  • 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_fcloan_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 (loan amount, rate etc.), one should be set to "0" so when the user clicks on 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 "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)
Enhanced Internationalization

New: Support for over 90 currency signs (using appropriate nummber formatting conventions) and 6 date formats (mm/dd/yyyy, dd/mm/yyyy, yyyy.mm.dd etc.). If neither the website developer or the user makes a selection, the calculator will read the browser's default currency and date options and automatically use them. Without doing anything, a website visitor from Japan visiting a website hosted in France will initially see a floating yen sign. The website developer can easily override this default behavior by setting either shortcodes or function options. The user (if the website designer keeps the feature enabled) can override both and select a currency and date format.

To summarize, the plugin determines what currency symbol (and date format) to use by applying the following rules:
  1. If a website allows a user to select a symbol, and the user makes a selection, the plugin uses the visitor's choice first.
  2. Otherwise, if a user has not made a selection, and the website owner has set a default currency (i.e., currency does not equal 999), the calculator uses the website's selection.
  3. Otherwise, the calculator plugin will attempt to read the browser's currency default and pick a currency symbol.
  4. Otherwise, the plugin defaults to using the '$' symbol.

Screenshots

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

31 Comments on “Loan Calculator Plugin”

financial online calculator Join the conversation. Tell me what you think.
    • The calculators are designed for an international audience, and the user can pick the currency.

      However, if you don’t mind making 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:

      \wp-content\plugins\fc-loan-calculator\js

      find this file:

      interface.LOAN-WIDGET.min.js

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

      a.CCY_CONVENTIONS=[{sep:”,”,dPnt:”.”,ccy:”$”,ccy_r:””}

      Should be around row 7. Change the “$” to whatever you need as the example below. Save, and refresh the webpage

      a.CCY_CONVENTIONS=[{sep:”,”,dPnt:”.”,ccy:”€”,ccy_r:””}

      If you want the € on the right, replace ccy_r instead.

      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.

  • Thank you, Karl

    I really appreciate the effort you have placed to create this calculator and taking it a step further to provide us with a WordPress plugin at no cost. I have looked at many similar plugins and yours is the best that I have come across.

    I am using the calculator for a client’s website and would like to hide the credits as per their requirements.

    Do you have a paid plugin with this feature?

    Kindly let me know as this would be greatly appreciated.

    • Hi Samir, Thank you for your kind words. I guess you are asking about the copyright notice? I do not have a version, paid or otherwise, with it removed.

    • Jyoti, I’ve never tried the calculator using 3 characters for the currency symbol. I image if you did that, that the maximum value that a user can enter will be too small since 2 places meant for numbers will now be used for currency.

      But in any event, feel free to try it. Here is the generic answer to your question.

      The calculator is designed so that the user can change the currency, not the website’s owner. Once the user selects the currency, it will be remembered the next time they visit the site. This seems to be the best approach for websites that have an international audience.

      However, 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:

      example.com\wp-content\plugins\fc-loan-calculator\js

      find this file:

      interface.LOAN-WIDGET.min.js

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

      a.CCY_CONVENTIONS=[{sep:”,”,dPnt:”.”,ccy:”$”,ccy_r:””}

      Should be around row 7. Change the “$” to whatever you need as the example below. Save, and refresh the webpage

      a.CCY_CONVENTIONS=[{sep:”,”,dPnt:”.”,ccy:”Ksh”,ccy_r:””}

      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.

    • It’s always hard to answer these kinds of questions. Do you know how to program? If you know CSS, you can activate the custom style sheet and add rules to hide the payment method.

  • I installed your Loan calculator but the currency option was not working. Whenever i tried to change the currency and then clicked save changes nothing happened. It shows usd only. I came here and checked but here it was working fine. Then i installed your mortgage plugin but faced the same problem. I don’t know what is wrong. Please help.

    • The way the currency selection works is a little confusing. That I admit.

      When you say you tried to save the currency setting, do you mean as a website visitor, or as the webmaster in the plugin’s settings?

      What happens is, the calculator saves the user’s setting in a cookie on the computer. User settings always take precedence. The first thing you can do is to delete the cookies for your site, and then try again. Make the plugin setting BEFORE visiting the page as a visitor.

      • I tried doing what you recommended. I deleted the cookies but nothing worked. The currency option is not working in any case . I tried selecting the currency in the widget but it was not working. Then i tried selecting the Indian rupee as default currency. i could select the currency in the widget as there was an option so it was easy and it worked fine as well. I have read your previous answers about how to change the default currency in Js file but no matter what i do the default currency is $ (I dont know coding so that can be a problem as well may be i was doing something wrong. If this has worked for anyone please can you explain how to do this). I tried what was mentioned in the details of the plugin where it says that the website owner can change the currency in currency_and_date_conventions.txt by selecting the integer value in the plugin editor. As i wanted to change the currency to Indian rupee i added 83 value there. But that also is not working the default currency is not changing. I added the 83 in front of both sc_currency= and op_currency= but nothing seems to work. I am facing the problem with all your loan plugins. In auto loan calculator the default currency is of U.K. and this is also not changing. Also the currency button is not working. Here is the https://bankingworld.in/loan/ the sample page i created so you can see the problem.

        • Hi Khushi, the code for the plugin is not the same code that is on my site. It has been modified in some way. Are you using a cache plugin? Is your site doing anything to concatenate the JavaScript code? I would suggest disabling all plugins except for the calculator and see if the currency selection works for you then. If it does, we need to figure out what plugin or setting is incompatible.

        • There is one other possibility. I specifically see problems writing a cookie from the plugin. Perhaps your site is using some cookie JavaScript code that is not compatible with the plugin’s cookie code.

        • Two more things. I see this plugin being used:

          Cached with Swift Performance Lite

          Try disabling this one first and then try the calculator.

          Also, I meant to say that the instructions you read elsewhere for editing the code to change the currency were meant for older versions of the calculator – prior to v. 1.4.0. I’m not surprised those instructions did not work for you.

          • I disabled all the plugins and then tried if the currency selection works but it did not work. What should i do now?

          • There is still a problem with the code on the page that you sent me a link to. It is a different error this time. When I look at the page in Google’s developer tools, I see an error that ‘i’ is not defined somewhere in this line:

            /(trident|msie)/
            /*!/wp-content/themes/generatepress/js/a11y.min.js*/
            i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var e,t=location.hash.substring(1);/^[A-z0-9_-]+$/.test(t)&&(e=document.getElementById(t))&&(/^(?:a|select|input|button|textarea)$/i.test(e.tagName)||(e.tabIndex=-1),e.focus())},!1),function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("mousedown",function(){e.classList.add("using-mouse")}),e.addEventListener("keydown",function(){e.classList.remove("using-mouse")})}}(),function(){"use strict";if("querySelector"in document&&"addEventListener"in window&&document.body.classList.contains("dropdown-hover"))for(var e=document.querySelectorAll("nav .main-nav ul a"),t=function(){if(!this.closest("nav").classList.contains("toggled")&&!this.closest("nav").classList.contains("slideout-navigation"))for(var e=this;-1===e.className.indexOf("main-nav");)"li"===e.tagName.toLowerCase()&&(-1!==e.className.indexOf("sfHover")?e.className=e.className.replace(" sfHover",""):e.className+=" sfHover"),e=e.parentElement},s=0;s

            Please change the sample page you linked to ton an absolutely plain page, with no plugin's enabled. Then try the plugin. If it does not work, let me know and I'll take a look. Now there is too much code in the page that is not mine for me to understand the issue. If the plugin does work, then start enabling the plugins, one at a time, and let's see what breaks the calculator.

            But actually, even before you do this, are you sure all the code was regenerated after you turned off the cache features. I still see the javascript minified.

          • Are you familiar with the various browser’s developer tools? If not, check them out. (Do a search.) There is a feature called ‘console.’ You can use the feature to see if there are coding errors reported when you load and page and run various features on the page. You have to get rid of all the reported errors if you want the page to work correctly.

          • Khushi, I discovered the problem, and I just released new versions of all plugins that fix the bug. If you haven’t given up on the plugins, please try. If you try them again, please check that you use versions designated as v1.4.2.

  • I have created another sample post with no plugins installed except the calculator. The currency function is still not working. Here is the link https://bankingworld.in/car-loan-calculator/

    • Thanks for the demo page. It is much better. Unfortunately, I see the problem, but I don’t think I can figure out a way to fix it. The calculator is not writing cookies to the user’s browser cookie cache. Thus it can’t save the user-selected settings for either the currency or date mask. I see that your site also has its own cookies that sometimes get saved and sometimes don’t. I believe that the 2 JavaScript routines that are writing cookies are not compatible. I can’t say for sure though. If you want to try and disable the code that writes your site’s cookies and then try the calculator to see if it works, that might offer some more clues. But the problem is definitely due to the cookie not being saved.

      • Khushi, I just realized something. I see value 999 being passed for the currency selection and date mask selection. Try setting the currency and date to nothing as shown in the readme file. Or select the specific number for the currency you want and enter that. Then save and refresh your page and you should see the currency value you enter in code like this on your page when you view the source code from the browser.

        <input type="text" id="currency-al" value=999>
        <input type="text" id="date_mask-al" value=999>

  • Thank you so much for the effort and the time you gave. You are really helpful. I haven’t given up on your plugins. They are great and i had decided that i will use them as widgets but now you have fixed the problem so i will use them in the posts. Once again thank you.

  • Gonzalo montilla says:

    hola Karl.

    quiero usar la calculadora, pero yo tengo una características especiales para configurar, me gustaría indicar telas para saber si se pueden configurar.

    • Sorry, I only speak English. I tried to use Goggle translate, Spanish to English, and the result did not make sense. Something about configuring "fabrics." 🙂

      Lo siento solo hablo inglés. Traté de usar Goggle translate, español a inglés, y el resultado no tuvo sentido. Algo sobre la configuración de “tejidos”. 🙂

Comments, suggestions & questions welcomed...

Scroll
to plugin
to questions/comments
advertisement