FoxEstate: Add Mortgage Calculator


Currently Colorlabs already have several property listing WordPress themes you can use, unfortunately all of them missing an important feature: mortgage calculator.


At this tutorial, i will tell you some modification to add mortgage calculator feature into your FoxEstate theme. With this feature, your customer doesn’t have to open a new tab to search an online mortgage calculator.

The modification is very simple. What you need to do is modifying a file named single-property.php.

Open the file and find out this code:

<div class="property-row row">
            <h4 class="property-row-title"><?php _e('Features','colabsthemes');?></h4>
            <ul class="property-features-list">
              <?php echo get_the_term_list( $post->ID, COLABS_TAX_FEATURE, '<li>', '</li><li>', '</li>' );?>

Once you find it, put this code just below it:

<div class="property-row row">
			<h4 class="property-row-title">Mortgage Calculator</h4>
				<script type="text/javascript">
					function checnum(as)
					var dd = as.value;
					dd = dd.substring(0,(dd.length-1));
					as.value = dd;
					} function loan() {
					var a = document.first.aa.value;
					var b =;
					var c =;
					var n = c * 12;
					var r = b/(12*100);
					var p = (a * r *Math.pow((1+r),n))/(Math.pow((1+r),n)-1);
					var prin = Math.round(p*100)/100;
					document.first.r1.value = prin;
					var mon = Math.round(((n * prin) - a)*100)/100;
					document.first.r2.value = mon;
					var tot = Math.round((mon/n)*100)/100;
					document.first.r3.value = tot;
					for(var i=0;i<n;i++)
					var z = a * r * 1;
					var q = Math.round(z*100)/100;
					var t = p - z;
					var w = Math.round(t*100)/100;
					var e = a-t;
					var l = Math.round(e*100)/100;
					} } 

					function format(input)
						var nStr = input.value + '';
						nStr = nStr.replace( /\,/g, "");
						var x = nStr.split( '.' );
						var x1 = x[0];
						var x2 = x.length > 1 ? '.' + x[1] : '';
						var rgx = /(\d+)(\d{3})/;
						while ( rgx.test(x1) ) {
							x1 = x1.replace( rgx, '$1' + ',' + '$2' );
						input.value = x1 + x2;

				<script type="text/javascript" src=""></script>
				<style type="text/css">
					font-family: arial, verdana, san-serif;
					color: black;
					<table width=90% border=0 cellpadding=0 cellspacing=0 >
						<tr><td align=center >
						<form name=first>
						<table class=subheading cellspacing=0 cellpadding=3>
						<tr><td>Loan Amount:</td><td><input name=aa type=text size=15 onkeyup=checnum(this) value=<?php echo $beds = get_post_meta($id, 'property_price',true);?> ></td></tr>
						<tr><td>Interest Rates:</td><td><input name=bb type=text size=15 onkeyup=checnum(this) >%</td></tr>
						<tr><td>Term(Years):</td><td><input name=cc type=text size=15 onkeyup=checnum(this)></td></tr>
						<tr><td colspan=2><input type=button name=ss value=calculate onclick=loan() class=calc></td></tr>

						<table class=subheading cellspacing=0 cellpadding=3>
						<tr><td>Monthly Payment(EMI):</td><td> <input name=r1 type=text   onfocus="format(this)" > </td></tr>
						<tr><td>Total Interest:</td><td> <input name=r2 type=text  onfocus="format(this)" ></td></tr>
						<tr><td>Monthly Interest:</td><td> <input name=r3 type=text  onfocus="format(this)" > </td></tr>
						<tr><td>Note: click the number to activate digit grouping</td></tr>

And done!

In case you failed to modify the code, you can simply download the resource from here.


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s