AC’s Loan Calculator

1. 01Add the shortcode [fcloanplugin] in the content area of your page or post and optionally configure the shortcode parameters. WordPress v5.0 introduced the block editor; v5.8 introduced the block-based widget editor. To use this plugin in either editor, add the built-in Shortcode block and paste this plugin’s shortcode into it.
2. 02Add the following code to your template where you want the calculator to appear. See below for options.
3. 03If your theme supports widgets, add the plugin to a widget area through the Appearance -> Widgets menu in WordPress.
4. 04In the block editor (WordPress 6.3 or later), insert the AC Loan Calculator block and configure it using the block settings sidebar, as described below.

Using the AC Loan Calculator block

1. 05Open a page or post in the WordPress block editor. Click + to add a block, search for AC Loan Calculator , and select it. You can also find it in the Widgets category.
2. 06Select the calculator block. Open the editor’s settings sidebar if it is hidden, then select the Block tab.
3. 07Under Loan values , set the initial loan amount, number of months, and interest rate.
4. 08Use Layout and visibility to choose a size and which controls to show. Under Branding , enable Link to and enter your brand name if desired. Use Currency and date to choose the default conventions, and Style options. to customize colors, fonts, and widths.
5. 09Each setting’s Reset button restores that setting’s plugin default. The calculator preview updates as you change settings; calculated result fields are populated and disabled. Use the page preview to calculate or open schedules and charts.
6. 10Save or update the page to publish your settings. You can move the calculator block between other blocks using the editor’s normal move or drag controls.

Block settings apply to that block and are separate from legacy widget settings. The editor preview reflects the configured defaults without applying saved browser currency/date preferences; visitors’ saved preferences continue to apply on the published page. Existing shortcode, template, and widget placements do not need to be converted to blocks.

Shortcode parameters

“|” means or, thus “tiny” | “small” | “medium” | “large” means pick one (include the quote marks!). Example: sc_size=”medium” Whitespace around the equal sign is allowed; the examples below omit it for consistency.

* sc_size="tiny" | "small" | "medium" | "large" * sc_custom_style="No" | "Yes" * sc_add_link="No" | "Yes" * sc_brand_name="" * sc_hide_resize="No" | "Yes" * sc_loan_amt="32500.0" * sc_n_months="48" * sc_rate="5.5" * 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="150px" * sc_calculator_max_width_tiny="250px" * sc_calculator_min_width_small="200px" * sc_calculator_max_width_small="300px" * sc_calculator_min_width_medium="200px" * sc_calculator_max_width_medium="400px" * sc_calculator_min_width_large="200px" * sc_calculator_max_width_large="440px" * sc_hide_intl_conventions="No" | "Yes" * sc_hide_payment_method="No" | "Yes"

Examples (the first explicitly sets the standard display and calculation defaults):

[fcloanplugin sc_size="large" 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="999" sc_date_mask="999" 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="150px" sc_calculator_max_width_tiny="250px" sc_calculator_min_width_small="200px" sc_calculator_max_width_small="300px" sc_calculator_min_width_medium="200px" sc_calculator_max_width_medium="400px" sc_calculator_min_width_large="200px" sc_calculator_max_width_large="440px" sc_hide_intl_conventions="no" sc_hide_payment_method="no"] [fcloanplugin sc_size="small" sc_custom_style="Yes" sc_hide_resize="Yes" sc_currency="83" sc_date_mask="2"] [fcloanplugin 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"]

NOTE: You only need to include with the shortcode the options you want to change.

Defaults: The first example explicitly selects the large layout and automatic currency/date selection. Omit an attribute to leave it unspecified; the text null in a shortcode is a literal string, not a null value. Use sc_currency="999" and/or sc_date_mask="999" for automatic selection, subject to any saved user preference described below.

Optional array parameter passed to show_fcloan_plugin()

The values available for template options are the same as the shortcodes above except you must change “sc_” to “op_”. Some examples:

<?php show_fcloan_plugin(array('op_size' => "medium", 'op_custom_style' => "No", 'op_add_link' => "Yes", 'op_brand_name' => "Karl's", 'op_hide_resize' => "No", 'op_loan_amt' => "32500.0", 'op_n_months' => "48", 'op_rate' => "5.5", 'op_currency' => "999", 'op_date_mask' => "999" )); ?>

Notes:

1. 11If you want to add your brand to the calculator, the *_add_link option must be set to “Yes” (i.e. create a subtle follow link to AccurateCalculators.com).
2. 12When branding, the brand name will be added before “Loan Calculator”.
3. 13If _custom_style is set to “Yes”, the plugin will load dist/css/accurate-calculators-custom.css relative to the plugin’s root folder. You can modify the styles as needed. I suggest that you only include CSS selectors in this file that you actually change.
4. 14The plugin is built and tested on HTML5/CSS3 pages.
5. 15size (min-width): tiny: 150px, small: 200px, medium: 200px, large: 200px
6. 16size (max-width): tiny: 250px, small: 300px, medium: 400px, large: 440px
7. 17The 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. Please contact me.
8. 18Website 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 7 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

Supports 90+ currency symbols (with proper number formatting) and 7 date formats (e.g., mm/dd/yyyy, dd/mm/yyyy, yyyy.mm.dd). Currency and date format are selected independently using the order below.

Automatic selection uses the browser’s regional locale, not the visitor’s physical location or the server’s location. For example, a browser using the Japanese locale can select Japanese yen even when the website is hosted in France.

How the plugin determines the currency symbol and date format: 1. A previously saved user preference in the browser’s local storage takes precedence, even if the currency/date selector is currently hidden. 2. If no saved preference exists, an explicit website setting for that convention is used. The value 999 means automatic selection. 3. Otherwise, the plugin attempts to select the convention from the browser’s regional locale. 4. If the selected or detected convention is unavailable or invalid, the plugin falls back to U.S. currency formatting ( $ ) or the MM/DD/YYYY date format, respectively.

When the currency/date selector is visible, users can change either convention; their choices are saved in local storage for subsequent visits.

Language Translations

As of v1.5, the plugin supports 14 languages in addition to English.

Each language below links to a page where you can test all seven plugins in that language—no installation needed.

Supported Languages: – da – Dansk – Danish – de – Deutsch – German – es – Español – Spanish – fi – Suomi – Finnish – fr – Français – French – hu – Magyar – Hungarian – it – Italiano – Italian – lt – Lietuvių – Lithuanian – nl – Nederlands – Dutch – pl – Polski – Polish – pt – Português – Portuguese – ro – Română – Romanian – ru – Русский – Russian – sv – Svenska – Swedish

Notes: 1. The plugin automatically displays in the correct lang