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:
[fcretiresavingsplugin sc_size="medium" sc_custom_style="No" sc_add_link="Yes" sc_brand_name="Your Brand Name Here" sc_hide_resize="No" sc_current_age="28" sc_retire_age="66" sc_current_savings="22000" sc_rate="5.5" sc_goal_amt="1100000.0"]

This plugin is also available for download at WordPress.org Plugin Directory

This plugin easily answers this question, "How much do I need to save or invest each month to reach my retirement goal?". The calculator quickly answers the question using input from your visitors and creates a detailed schedule with projected date based investments and charts. A site's users can select their own currency and date convention used in the investment schedule. This is ideal if your site attracts visitors from around the globe. Select from four predefined sizes or modify CSS file to customize size and change colors. Supports touch devices and a responsive designed website. The FC Retirement Savings Calculator Plugin is based on and uses code from this site's Retirement Savings Calculator.

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-retirement-savings-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 [fcretiresavingsplugin] 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_fcretiresavings_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="Your Name"
  • sc_hide_resize= "No" | "Yes"
  • sc_current_age=
  • sc_current_savings=
  • sc_invest_amt=
  • sc_rate=
  • sc_goal_amt=
  • 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_fcretiresavings_plugin()

This can be copied and pasted to a template part.

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

Notes:
  1. If you want to add your brand to the calculator, the add link option must be set to "Yes".
  2. When branding, your brand name will be added before "Retirement Calculator".
  3. 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.
  4. The plugin is built and tested on HTML5/CSS3 pages.
  5. max-width: large: 440px, medium: 340px, small: 290px, tiny: 150px
  6. 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
retirement savings calculator plugin
Two of the predefined screen sizes showing relative difference between "large" and "tiny".
retirement savings schedule
Example retirement schedule with detailed header and projected investment dates.
retirement savings in charts
Creates three charts for visualization.
WordPress option screen for retirement savings calculator
Configuration screen in WordPress's admin area
(only for when installing in a sidebar area).
advertisement

18 Comments on “Retirement Savings 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-retirement-savings-calculator\js

      find this file:

      interface.RETIRE-SAVINGS-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 FOR THE REPLY, ACTUALLY THE CHANGES DID NOT REFLECT. I WANT TO CHANGE THE CURRENCY ON EVERY LAYOUT BOTH THE DOLLAR $ SIGN IN THE PREFIX OF EVERY OUTCOME IN THE VALUE, THE $ SIGN IN THE CHART PAGE, THE DOLLAR $ SIGN IN THE SAVING SCHEDULE….

        all i need to here to set the default currency in each page to NGN ₦

        I WISH I COULD SEND A SCREEN SHOT HERE…THANK YOU AND AWAITING YOUR KIND RESPONSE

        • You’re welcome.

          The edit should have worked. The currency change should be reflected everywhere you mentioned.

          Here’s the thing though, the calculator is designed so the user can select the currency. That is, it (the calculator) is meant to appeal to in international audience. When the user selects the currency (and date format convention) a small cookie is placed on their computer so that their selection is remembered the next time they come back to the site.

          When you were trying the calculator, did you even change the currency (even once)? If so, then you are seeing the currency as the result of the setting in the cookie, not as a result of the edit you made.

          If you did set the currency, you’ll need to delete the cookies for your domain.

          To test your edit, do you have another browser installed that you’ve not looked at your site with? Cookies are stored per browser. Y would try another browser if you have one installed and it has not been used on your site.

  • Hello,

    I just installed the retirement savings calculator plug-in. The separator line in the middle of the calculator is long and sticking out of the box. How do I fix?

    • What version did you install? v1.4.0 is the latest (that’s what’s posted on this site). I’ve not yet had the chance to update WordPress.org plugin repository yet.

      In any event, do you have a link so I can see it? I’ll take a look and see what needs to be modified. As you can see, that problem doesn’t happen on this page.

      • Shawn Plummer says:

        Hi Karl,

        I was downloading Version 1.3.0 from the repository. With that said, I just downloaded V1.4.0, and same deal. The middle line extends beyond the wrapper and hovers over my header.

        I have not published the page with the calculator yet. I can send you a screenshot via email if you like.

  • Shawn Plummer says:

    I published this calculator on another page. On mobile, it appears to look fine. On a desktop, not so much.

    https://www.annuityexpertadvice.com/best-5-year-fixed-annuity-rate/

    • Thanks for the link Shawn. That helped a lot.

      The easiest way to fix the horizontal bar issue is to go to the plugin’s "en" folder. Find the file calculator.php (or something similar).

      Open it with a text editor.

      You’re using the large size calculator. scroll down to the section where the large layout is and find the

      <hr>

      That creates the line. Edit is so it looks like this:

      <hr style="width: 60%">

      Save, and refresh the page.

    • For the issue with it appearing above your menu, you can make one more edit. Find this line:

      <div id=”retire-savings-wrap” class=”calc-wrap large” style=”transform: scale(1);”>

      add a z-index rule like this:

      <div id=”retire-savings-wrap” class=”calc-wrap large” style=”transform: scale(1); z-index: 0;”>

      You could also add these rules to the custom style sheet. All depends on how comfortable you are with CSS.

  • Hi again. I have 1.4.0 installed. It seems to be blocking my image CDN (Jetpack) from displaying images in the library.

    I found this out by disabling just your plugin.

    Any thoughts on fixing this?

    It may be affecting why some of my images are not responsive as well.

    • Hi, I went back to the link you provided, and the calculator is not on the page any longer. I have no idea why or how the plugin could impact CDN delivery of the images. Did you use the browser’s developer tools feature to see if there are any errors reported?

      The plugin is only loading the HTML/CSS code and some JavaScript. It does not touch the media library or interact with any CDN code. Not saying it can’t cause an issue, I just don’t understand how it would be possible for it to do so. Also, there are no other similar complaints from others that have been using the plugins for 4 years now.

  • Hi Karl,
    A lot of people don’t even know how much retirement goal they should aim for. Do you have something like this?

    Basically we need these parameters:
    – Current non-discretionary spending / month
    – Current discretionary spending / month
    – What will these spendings be in 25-30 years when you retire after taking inflation into account?
    – What’s the % of the savings/investment we want to withdraw every month?
    – If the savings are invested in 80% fixed income-20% stock, how much will it grow during retirement?
    – How much will the tax be?
    – Using the average human age, how long will your money support you?

    Thanks,
    Bryan

      • Hi Karl,

        Thanks for your prompt answer. Will you be able to build it, in which you can charge me with some fees? I need that comprehensive calculator for my website. Please advise.

        Thanks,
        Bryan

        • I’d like to think that I can build anything. 🙂

          Please contact me via the contact link at the bottom of any page, and we can discuss it.

Comments, suggestions & questions welcomed...

Leave a Reply to epic Cancel reply

Scroll
to plugin
to questions/comments
advertisement