Build, Test, and Deploy a Custom Calculator with RMC Pro

The core of Responsive Mortgage Calculator Pro is it’s ability to easily accept data, run complex calculations, and display the results to the user. The preset calculators provide that ability and using them as the basis for customization will keep your troubles to a minimum.

But what about creating something unique not already included in the presets? If you are modifying text, this will probably be straightforward and won’t cause any issues, but if you are building a custom calculator with a unique combination of processors, calculators, and sub-calculations, you may need to build and test in a development or staging environment before deploying to a live site.

Create a Calculator

Adding a calculator to RMC Pro is perhaps the simplest aspect of customization. From the RMC Pro page, locate the link titled Create a Calculator and click it. The form that is displayed allows you to choose an existing calculator as the basis for a new one, or to start with a blank with no interface elements or processor. Pick your poison, name your calculator, and click Create Calculator. You’re on your way.

Enable Debugging

RMC Pro includes a setting to display processing information when it is run. To enable debugging messages, go to RMC Pro > Settings > CSS & Development, check the box for Debugging, and click the Save button at the bottom of the page.

When you are testing your calculator, you can view log information from each processor as it is run. If JavaScript is enabled, then messages will be displayed in the console whenever you run a calculation. If JavaScript is disabled, or the page is reloading for some reason, log messages will be displayed directly on the page. Messages tell you which processor is being run, where a processor is interrupted due to a lack of data, and where failures occur.

Of note, Processors, added in the Processors section of the Edit Calculator screen, will run until there is one that is missing data. This is intended to happen if a Processor requires a value from a Calculator that hasn’t yet run. If that happens, the Calculators begin running until there is one that is missing data, causing a switch back to Processors. This continues until all Processors and Calculators have run, or a Processor and Calculator are both unable to finish processing. The latter constitutes a failure: a piece of data wasn’t properly supplied. Hence, the need to debug!

Deploy a Custom Calculator

Once you have a working calculator, you can pass the settings between websites by exporting the calculator, creating an add-on plugin to register the settings file as a new preset, and activating the new add-on plugin on any website alongside the main RMC Pro plugin.

Exporting Calculator Settings

You can enable exporting by going to RMC Pro > Settings > CSS & Development, check the box for Exporting, and click the Save button at the bottom of the page. This will trigger a new box to be displayed on the Edit Calculator screen.

Navigate to a calculator that you want to export by clicking RMC Pro, finding a custom calculator and clicking the edit link. On the Edit Calculator screen, at the bottom right of the screen, you will see a box titled Export. Click the Export Settings link to trigger the exporting process. Exporting creates a new file containing the settings for the calculator in JSON format, and the file will be automatically saved to the Downloads folder on your computer.

Creating a Preset Add-On Plugin

To get your custom calculator onto another website, you’ll need to use the downloaded file as a preset calculator. In order to do that, you will need to create a plugin to register the preset and load the settings file. You can do this yourself by adding an action on the rmcp_add_presets action hook, or you can download my example RMC Pro Preset plugin and make some minor tweaks. I recommend the latter. Even if you know what you’re doing, you can easily reuse the callback code from the example.

Get the RMC Pro Preset plugin on Github

The example plugin is fully functional. What you will need to do is open the file inc > json-preset.json, erase the contents of the file, and paste in the contents of the settings file you previously exported from your RMC Pro Calculator. That’s it.

What you should do is open the rmc-pro-preset.php file and edit some text. Changing the WordPress plugin information at the top of the file will help you recognize the plugin on the WordPress Plugins screen. Beyond that, you should also change the class name RMCP_Example_Preset and function name rmcp_example_preset to something more unique. This will help prevent code clash if you are using multiple presets deployed in this way.

Finally, locate the add_preset method that defines the calculator $id and $title variables. The id is the string that will be used to identify this calculator in code, such as inside the RMC Pro shortcode. This can contain only letters, numbers and the underscore(_) – no spaces. The title is the human readable name of the calculator that will be displayed in the WordPress Admin wherever this calculator is referenced.

Deploy Your New Preset

You should now have a working preset calculator packaged as an add-on plugin to RMC Pro. Upload it to your site and activate it just like you would any other WordPress plugin. When you navigate to the RMC Pro Calculators list, you should see your new calculator in the Preset Calculators section of the page. It will have it’s own shortcode and it will also appear in the list of base calculators in the Create a Calculator form.

Add Ons and Building the RMC Pro API

One of the major reasons for creating Responsive Mortgage Calculator Pro has been to fulfill the many requests I’ve had for specialized or unique features. Customizability is central to RMC Pro, but there are still limitations imposed by the basic purpose of the plugin. The plugin essentially takes input using an HTML form, runs the data through processors and calculators, then creates structured output in the form of text and HTML. While the interface, processing, and output are all very customizable, there are limits.

Of the feature requests I’ve received, there are a few that I just can’t include in the core plugin. Sliders, for example, is an add on for RMC Pro that turns the inputs into sliders to more easily adjust the input values. Because this is a specialized feature that isn’t actually about mortgage and loan calculations, it doesn’t make sense to include it in the core plugin. And because it’s an add on, I’ve been able to spend more time honing it’s functionality, creating an interface for designing sliders, and integrating it as an extension to the core plugin.

WordPress provides very useful APIs that have allowed me to add extensions, and I’ve coded in a significant number of custom API components that add on plugins can easily hook into. This allows access to modifying the plugin’s behavior with add ons.

On the administrative side, I’ve added the ability to register new preset calculators. Now, any add on can include a preset calculator to demonstrate it’s settings and behaviour. This also opens the door for easily creating custom preset calculators so that I can more easily support you in creating what you need.

I’ve also created APIs for the calculator editing process. Each editing section, each element, and each element setting is registered through a custom API. Sliders is integrated into RMC Pro by adding new settings to input elements so that you can set slider specific information. Another extension I’m working on, a contact form, adds a completely new section to the editing screen and general settings to govern the behaviour of the contact form as a whole. This is all done through the RMC Pro API, which, once again, makes use of the WordPress action and filter API.

On the front end, I’ve completely recreated the way that the interface is built and processors run. Every interface element is now registered through a custom API, allowing for infinite extendability. If you have an idea for a new input type or means of displaying the results, you can focus on creating the functionality for it to display, then register it using the API, and let RMC Pro handle the rest. Custom processors and calculators are also more feasibly to implement and simple to register through the API.

All this and more is included in the latest version of Responsive Mortgage Calculator Pro.

Responsive Mortgage Calculator Pro Has Been Released

Happy New Year and happy RMC Pro! I managed to squeak out the release just before Christmas, leaving me with some free time to work on the next project.

It’s been a journey getting to the release. Part way through my initial development process, I realized the design was unfeasible. The original plan was provide a way to create inputs and set constants for calculation values, then to interpret those values based on a huge list of settings. It was all very confusing and wasn’t going to allow for the customizations and flexibility that was being requested. Back at the drawing board…

I cannot predict all the use cases for RMC Pro, but I decided to redesign the setup process, and the entire functioning of the calculator, to allow for you to decide how you want the calculator to function. Needs change depending on your country, state, province, and city. Setting something like a minimum down payment, or even the necessity for a down payment field, is your choice. Adding calculations for mortgage insurance, land transfer tax, or property tax is baked in and entirely customizable to your needs. If you need calculations for different regions, you can set it up in one calculator or create separate calculators. Whatever you need.

There are two preset calculators that demonstrate some of the possibilities and provide a starting point for your own customizations. When you create a calculator, you can choose to start from one of the presets, from nothing, or from one of your own creations.

Get Responsive Mortgage Calculator Pro

RMC Pro Roadmap

During the development process, I began creating an API in order to hook into calculator settings and data. This means that the calculator settings are extensible, which is great if you to create custom elements, processor and calculations. While this is still a work in progress, it will mean that the plugin can form the basis for just about any calculation process you want, and that you can add new form fields, HTML elements, and calculation results as you see fit. Customization just got a lot easier.

I’ve already begun work on an extension. Sliders will be released in a couple days. It’s an add-on that transforms form inputs into sliders. On the back end, you design your sliders choosing sizes, colours, borders, etc. The Sliders plugin adds new fields to the calculator, allowing you to enable sliders for each input you want, and to choose the design you want to use. When you load the calculator, the form fields are automatically replaced with your slider design.

Try out Sliders.

Dotting the i’s on RMC Pro

I have official completed a working version of Responsive Mortgage Calculator Pro. For everyone who has been waiting for all those additional features, thank you for your patience.

What’s in the Box

As promised, there are plenty of new features over and above the free version. Essentially, it is a shortcode and widget that allows you to display and run your own custom loan and payment calculators.

On the back end, there is a tabbed admin page with sections for building and managing calculators, currency formatting, and CSS and development settings. The meat of the back end is the calculator creation interface. I’ve made a concerted effort to make it look and feel like WordPress, taking cues from the Menus page and relying heavily on jQuery UI to keep things compact and to manage element ordering.

If You Build It…

You design calculators using input fields, text, submit buttons and results text. You can add processors to validate your data. You can set up loan and payment calculations to perform the mortgage calculations you want. You can add custom cost calculations to payment or loan calculations.

Crossing the t’s

I want to give you a really great and reliable piece of software, so I’m about to start a testing cycle. The calculations need to work properly and as designed. The plugin needs to function in different environments, on different devices, and with different versions of WordPress.

I also need to get the business end sorted. That means including a reasonable licensing agreement, sufficient support, and some decisions about payment models – one time fees and subscription fees – and what that means for maintaining a high quality product that keeps up with changes to WordPress core.

Abstracting Loan Fees for Modular Cost Calculations

In the process of developing Responsive Mortgage Calculator Pro, a significant hurdle has been defining a flexible system that allows for a variety of cost calculations beyond the basic mortgage or loan calculation. The system that I’ve decided on in the current iteration of RMC Pro is to provide a means to define additional cost calculations that can then be associated with a mortgage calculation. The specifics of that process are a matter of UX and may change once I’ve had a reasonable amount of feedback. The specifics of the actual cost calculations are more important.

Defining Cost Calculation Types

My intent is to create a single method for defining costs, and within that method to allow for enough flexibility to create the different cost types. My research has lead me to define four main methods by which costs are calculated.

Flat Fees
This includes things like lawyer’s fees and inspections.
Fee Rates
This is a fee that is a percentage of property value, like property tax, or loan amount, like an origination fee.

Ranged Fees or Rates
Some fees vary depending on the property value, mortgage amount, or loan to value (LTV). A simple version of mortgage insurance is an example of this, wherein the calculated fee is a percentage of mortgage amount and the percentage is determined by the LTV.
Marginal Fees and Rates
Like income tax, fees can be calculated at different rates for different portions of the loan amount or property value. Land Transfer Taxes are often like this, and might include flat fees for some ranges, percentage rates over other ranges, and are generally cumulative.

RMC Pro allows you to define as many of these costs as you want in whatever combination you need. Do you need something that isn’t defined here? Let me know and I’ll add it to the feature request list.

Now Testing Server-Side Calculations for RMC Pro

Over the past week, I’ve been working on the foundation for the actual calculation of mortgage payments with Responsive Mortgage Calculator Pro. It sounds like it should be fundamental to the development, but a lot of infrustructure needed to be in place to get to this point.

I made two significant promises with the Pro version that I’ve been ignoring in the Free version.

  1. The calculator needs to function in the absence of JavaScript.
  2. Multiple calculators need to work even if they are on the same page.

The set up is all very abstract, but the core idea is that each calculator is set up with a unique identifier that is submitted back to the server. During the set up process, the plugin looks for a submission, and, if it finds one, looks for the identifier, then matching the identifier to the correct calculator. It’s probably overkill, but I’m future-proofing against internal conflicts and major refactoring. I’m also making it easy to have multiple calculators side by side that may run the same or different calculations. It would be very confusing to submit a calculation on one calculator and have the result show up on another one – this being an issue I’d hope to fix in the free version at some point.

The calculation itself is fairly simple right now, basically being on par with the free version. Don’t expect to see anything too fantastic for a little while. I’ll be working through use cases with different types of calculations, posting them to the demo site as they become functional. I’m intent on demonstrating simple affordability calculations as a core feature, with a good possibility of expanding the functionality to incorporate complex affordability calculations. Keeping in mind that the fields are very abstracted, the set up process might involve a fair bit of box ticking and an understanding of how to calculate, well, whatever it is you want to calculate. I’m making an effort to not prescribe your calculations, but only providing a tool to efficiently construct a good looking and easy to use calculator purpose built for mortgage and loan math.

While the present calculation is still fairly simple, the flexibility of the UI is already vastly improved. A core feature absent in “RMC Free” is flexibility with the types of inputs you can display and the values you might want to set. For expenses, payments, interest rate, and loan term (or amortization period), you can now display the input as a text box to freely edit the value, a select input if you need to create a defined set of values, or a hidden input for a constant, non-editable value. There are use cases and examples for each of these settings, but I’ll let you use you imagination. Or you can keep an eye on the Responsive Mortgage Calculator Pro demo site to get some idea of its flexibility.

Nailing down a beta version of RMC Pro

During August and the first half of September, I laid out the internal, back end components of Responsive Mortgage Calculator Pro. A decent amount of brainstorming went into creating the list of features and into structuring calculator creation. Calculator creation is the core of the customization process, and the majority of the feature set is accessed within this process.

Calculator creation is accomplished using an interface that is inspired by the native Menu settings page. Rather than adding menu items, you would instead select the fields you want in your calculator. Fields that are added can be customized based on the core functionality of that field.

The approach I’ve used for this project is to maintain as much abstraction as possible when it comes to fields, and specifically, in generating the settings panels for those fields. In the interest of code reuse and maintainability, all the settings for a field type are held in separate files that return arrays. This keeps things really straightforward because each array defines settings groups with sub-arrays that define specific settings. For example, the file <code>array-expense-inputs.php</code> returns an array that defines the field type <code>expense</code> and an array of sections for the form. These sections includes settings that I think are most navigable and cohesive, like “Text Settings” or “Calculation Settings”. Within these groupings are the field definitions, such as “Label” which defines all the information necessary to create and validate the field for creating a label for an expense field in the calculator.

This set up is very useful for development – all I need to do to add or remove a feature is to add or remove a field definition array from one of these files. In the current phase of development, I am commenting out extraneous features in order to develop to the core functionality to actually use the calculator on the front end of a website. This is important in developing a usable beta version – these arrays provide a list of features that can be added as needed to satisfy user needs, sort of a living product backlog, while still being able to focus on the core feature set and use cases.

I am currently demoing the calculator during the development process. <a href=”/contact”>Contact email</a> if you want to have a look at the current stage of development and provide your feedback. I’m looking forward to a beta release in early November.

The RMC Pro coding blitz is on

In mid-August, I began work on a pro version of the Responsive Mortgage Calculator for WordPress. The free version has done exceedingly well for a niche plugin and I have received a lot of positive feedback. Thank you to everyone who uses it, has commented, and especially those people who have filed support issues. It only makes it better.

During it’s lifetime, I have received a number of requests that would add a significant amount of complexity to the plugin, or that would change it’s functionality. Alas, there is a limit to what I can do with a free plugin. The free version has enough features to make it useable in many circumstances, and I will continue to add features that maintain it’s general structure. But I cannot make any radical changes to the user experience or front end code without adversely effecting thousands of users. I appreciate that there is an expectation for the plugin to look and work pretty much the way it does right now. So, that’s that.

The feedback and feature requests I have received have not been lost. Instead, they are going into Responsive Mortgage Calculator Pro. As of today, I am closing in on the completion of the administrative pages. This is radically different from the free version, although there will probably be some changes to the free version to bring it into line with the Pro version. There may even be some new features in the free version because of this.

So, what, you ask, is going to make RMC Pro such a departure from the free version? Because of the laundry list of features in the Pro version, the settings are now broken into tabs for better organization. This has allowed me to provide a short introduction to setting up and using the calculator, general settings that effect the look of the calculator and the currency, and a support page.

The single biggest addition in RMC Pro is the ability to create your own calculators – yes, plural – and to include the fields that you want, set up to function the way you want, in the order you want. The number of settings for each field is significant, but they are easy to find and easy to work with. You can create nested sections for advanced features or to simplify a complex calculator. The results text is entirely customizable, allowing you to write what you want and include the results you want. And I’ve added in fields for reverse calculations, so you can start from a payment and get a loan amount.

RMC Pro is coming…