Original Size
AC Loan Calculator Plus plugin
A Free Calculator for WordPress Websites and Blogs
New: September 2024 v2.0
Use these shortcodes in the page's content editor for above result:
[acloanplugin sc_size="medium" sc_custom_style="No" sc_add_link="Yes" sc_brand_name="Karl's Plus" sc_hide_resize="no" sc_loan_amt="505000" sc_n_months="180" sc_rate="6.75" sc_theme_primary_color="#007bff" sc_theme_primary_color_hover="#0056b3" sc_theme_primary_color_light="#66b2ff"]
[acloanplugin sc_size="medium" sc_custom_style="No" sc_add_link="Yes" sc_brand_name="Karl's Plus" sc_hide_resize="no" sc_loan_amt="505000" sc_n_months="180" sc_rate="6.75" sc_theme_primary_color="#007bff" sc_theme_primary_color_hover="#0056b3" sc_theme_primary_color_light="#66b2ff"]
This plugin is also available for download at WordPress.org
The AC Loan Calculator Plus 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
- used in a post or page's content area via a shortcode; or
- used in a sidebar widget area; or
- called from any template file.
Installation
- Either
- upload the ac-loan-calculator-plus folder with all its files to the /wp-content/plugins/; or
- unzip the plugin's zip file in the /wp-content/plugins/ folder.
- Activate the plugin through the Plugins Installed Plugins menu in WordPress
Upgrading: If you translated the plugin from English to another language, please backup your work prior to upgrading the plugin.
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):
- Add the shortcode [acloanplugin] in the content area of your page or post and optionally configure the shortcode parameters. WordPress v5.8 introduced the block editor. To install this plugin as a widget in WordPress v5.8 or later, first install the widget shortcode block and then copy this plugin's shortcode into it.
- Add the following code to your template where you want the calculator to appear:
- If your theme supports widgets, add the plugin to a widget area through the Appearance -> Widgets menu in WordPress.
Shortcode parameters
"|" means or, thus "tiny" | "small" | "medium" | "large" means pick one (include the quote marks!). Example: sc_size="medium" Do NOT put spaces around the equal sign. Colors may be entered using hex values, or the rgb(), or rgba() functions.
- 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= (see: the file currency_and_date_conventions.txt)
- sc_date_mask= (see: the file currency_and_date_conventions.txt)
- sc_theme_base_font_size="16px"
- sc_theme_primary_color="#28a745"
- sc_theme_primary_color_hover="#218838"
- sc_theme_primary_color_light="#30c853"
- sc_theme_primary_color_text="#fff"
- sc_theme_primary_color_text_inverse="#fff"
- sc_theme_background_muted="#f7f7f7"
- sc_theme_background_color_disabled="#efefef"
- sc_theme_background_calculator_color="#fff"
- sc_theme_background_modal_color="#fff"
- sc_theme_border_color="#dee2e6"
- sc_theme_text_color="#333333"
- sc_theme_tooltip_text_color="#fff"
- sc_theme_shadow_color="rgba(0, 0, 0, 0.1)"
- sc_theme_primary_font_family_stack="Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif"
- sc_theme_mono_font_family_stack="'Roboto Mono', 'Source Code Pro', ui-monospace, monospace"
- sc_calculator_min_width_tiny="120px"
- sc_calculator_max_width_tiny="180px"
- sc_calculator_min_width_small="160px"
- sc_calculator_max_width_small="300px"
- sc_calculator_min_width_medium="280px"
- sc_calculator_max_width_medium="340px"
- sc_calculator_min_width_large="300px"
- sc_calculator_max_width_large="370px"
- sc_hide_intl_conventions= "No" | "Yes"
- sc_hide_payment_method= "No" | "Yes"
Shortcode Examples:
Copy and paste to page's or post's content area.
First example includes all options.
[acloanplugin sc_size=null sc_custom_style="No" sc_add_link="No" sc_brand_name="" sc_hide_resize="No" sc_loan_amt="32500.0" sc_n_months="48" sc_rate="5.5" sc_currency="83" sc_date_mask="2" sc_theme_base_font_size="16px" sc_theme_primary_color="#28a745" sc_theme_primary_color_hover="#218838" sc_theme_primary_color_light="#30c853" sc_theme_primary_color_text="#fff" sc_theme_primary_color_text_inverse="#fff" sc_theme_background_muted="#f7f7f7" sc_theme_background_color_disabled="#efefef" sc_theme_background_calculator_color="#fff" sc_theme_background_modal_color="#fff" sc_theme_border_color="#dee2e6" sc_theme_text_color="#333333" sc_theme_tooltip_text_color="#fff" sc_theme_shadow_color="rgba(0, 0, 0, 0.1)" sc_theme_primary_font_family_stack="Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif" sc_theme_mono_font_family_stack="'Roboto Mono', 'Source Code Pro', ui-monospace, monospace" sc_calculator_min_width_tiny="120px" sc_calculator_max_width_tiny="180px" sc_calculator_min_width_small="160px" sc_calculator_max_width_small="300px" sc_calculator_min_width_medium="280px" sc_calculator_max_width_medium="340px" sc_calculator_min_width_large="300px" sc_calculator_max_width_large="370px" sc_hide_intl_conventions="no" sc_hide_payment_method="no"]
[acloanplugin sc_size="small" sc_custom_style="Yes" sc_hide_resize="Yes" sc_currency="83" sc_date_mask="2"]
[acloanplugin sc_custom_style="No" sc_add_link="Yes" sc_brand_name="Friendly Mortgage" sc_hide_resize="Yes" sc_loan_amt="30000" sc_n_months="60" sc_rate="5.5"]
Optional array parameter passed to
ac_lncalcplus_show()
This can be copied and pasted to a template part.
Additional values for options are the same as the shortcode above (but change "sc_" to "op_").
<?php ac_lncalcplus_show( array(
'op_size' => "medium",
'op_custom_style' => "No",
'op_add_link' => "Yes",
'op_brand_name' => "",
'op_hide_resize' => "No",
'op_loan_amt' => "32500.0",
'op_n_months' => "48",
'op_rate' => "5.5",
'op_currency' => "999",
'op_date_mask' => "999")); ?>
- If you want to add your brand to the calculator, the add link option must be set to "Yes".
- When branding, your brand name will be added before "Loan Calculator".
- If custom style is set to "Yes", the plugin will load css/accurate-calculators-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 red which indicates the custom css is being used. You can modify the styles as needed. I suggest that you only include CSS selectors in this file that you actually change.
- The plugin is built and tested on HTML5/CSS3 pages.
- Default size (min-width): tiny: 120px, small: 160px, medium: 280px, large: 300px
- Default size (max-width): tiny: 180px, small: 300px, medium: 340px, large: 370px
- The modals used to show the schedule, currency select, help, etc are Bootstrap 5 modals. If your site uses an earlier Bootstrap version, you may have issues.
- Website developers can set a default currency sign and preferred date format by setting <op /sc>_currency and <op /sc>_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)
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:- If a website allows a user to select a symbol, and the user makes a selection, the plugin uses the visitor's choice first.
- 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.
- Otherwise, the calculator plugin will attempt to read the browser's currency default and pick a currency symbol.
- Otherwise, the plugin defaults to using the '$' symbol.
Support for 14 languages in addition to English. The plugin also includes a translation template file (.POT) in the "languages" folder. Using a POT/PO file editor, website owners can translate this plugin to any language supported by WordPress.
The supported languages are:
- da : Danish : Dansk
- nl : Dutch : Nederlandse
- fi : Finnish : Suomalainen
- fr : French : Français
- de : German : Deutsch
- hu : Hungarian : Magyar
- it : Italian : Italiano
- lt : Lithuanian : Lietuvių
- pl : Polish : Polski
- pt : Portuguese : Português
- ro : Romanian : Românesc
- ru : Russian : Русский
- es : Spanish : Español
- sv : Swedish : Svenska
Notes: (1) The plugin depends on the site's "Site Language" setting to display to your visitors the correct language. The files in the language folder can be renamed if needed. For example, if you want the plug to display in Portuguese the .MO and .JSON files include assume your site's language setting is Portuguese (Portugal) which is local pt_PT. But if your site is in Brazil, you'll need to rename the plugin's language files to use pt_BR. (2) At this time, these translations were computer generated. A fluent speaker can edit the included .PO file and regenerate the .MO file to update the tranlation. (3) If you are willing to allow me to include your edits with the plugin, I'll regenerate the .MO, and if needed the .JSON files for you.
I am making the other calculators available free-of-charge to bloggers who are able to help with translation. See this page for details.
Screenshots
(only for when installing in a sidebar area).
Comments, suggestions & questions welcomed...