advertisement
Your Brand Name Here
Retirement Savings Calculator

  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=

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. (DOCTYPE XHTML 1.0 Transitional has been tested as well.)
  5. The plugin requires jQuery v1.9.1 or better (but not v4). If your WordPress site does not load it, this plugin will. If your WordPress has been installed or updated since Feb. 4, 2013, it should have the correct version.
  6. max-width: large: 440px, medium: 340px, small: 290px, tiny: 150px

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

11 Comments on “Retirement Savings Calculator Plugin”

financial online calculator Join the conversation. Tell me what you think.
  • Fareem Chagla says:

    Hi,

    We’ve tried to use the calculator on our website

    https://wealth-monitor.com/features/wm-in-the-classroom/wms-retirement-calculator/

    However, the chart and savings schedule pop up doesnt seem to work

    Kindly help
    Fareem

    • I’m sorry you are having a problem. Thanks for the link, sending one helps. Are you familiar with the browser console? I see there are some errors on the page? I doubt if anyone of them is causing the problem, but they would be good to clean-up anyway.

      I think what must be happening is something on the page has a high z-index that is blocking the calculator’s overlay. Are you familiar with CSS and making changes?

  • Russel Povey says:

    Hey Karl,

    Great plugins! How can change the currency as the site owner. I’ve already removed the option for the user to change it but would like to change it from defaulting to Dollars to use South African Rands instead.

    • Thanks for the follow-up details Russel. This can be done, but it is a bit of a hack.

      Find the file in the plugin’s JS\ folder named interface.RETIRE-SAVINGS-WIDGET.min.js.

      Open it with any standard text editor. In line 7 (the lines wrap, so line 7 is many rows down the page) you’ll find text that looks like this:

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

      Change above to look like this:

      CCY_CONVENTIONS=[{sep:” “,dPnt:”.”,ccy:”R”,ccy_r:””}

      Basically, notice that the "$" sign is replaced with the "R" and the comma is replaced with a space. If you don’t see this in the file, I would search on "CCY_CONVENTIONS=".

      Good luck!

  • hi the calculator on our site does not work although it’s appearing fine, and used to work. It’s been a couple weeks now and I have restored the site back to dates when it did work, but the calculator still does not function so hopefull you can help. thank you in advance!

    https://westlandwealth.com/free-retirement-pdf/

    • Hi, your page has errors in the code. Something had to have changed.

      You can see the errors for yourself by using Chrome’s developer’s tools. Press F12 (on a Windows computer) to open. Then click on “console”. Then load the page.

      You’ll see in the console, errors such as this:

      "Uncaught TypeError: window.csGlobal.collapse is not a function"

      "csGlobal.collapse" has nothing to do with the calculator. What happens is, once there’s an error, the JavaScript stops running and the calculator’s JavaScript code is not being executed.

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

Comments, suggestions & questions welcomed...

Leave a Reply to Karl Cancel reply

Scroll
to plugin
to questions/comments
advertisement