Currency Converter Demosite

Live Demo and Testing Environment

📝 Note: You can view a live, working version of the currency converter demo explained below by visiting this page. This demo showcases a functional currency converter built with the MPG plugin, where you can see real-time currency conversions.

If you'd like to test how this setup looks and works directly from the WordPress dashboard with MPG already installed and configured, you can spin up a live version of WordPress. This version will be available for 4 hours and allows you to explore the setup in detail. You can access the live demo environment by clicking here.

📝 Note: The InstaWP environment will allow you to interact with the MPG plugin and view how it is configured within WordPress, providing hands-on experience with the project setup.

This guide will walk you through how to set up a currency converter website using the MPG plugin. You will learn how to configure your project, generate pages dynamically, and customize JavaScript functionality for live currency conversion.

1
Navigate to MPG > Create New and create a new project.

Here is how the MPG project setup looks, with important fields you need to configure:

2
Select source: Set Source Type to Direct Link. Provide the Direct link to your Google Sheet or file containing the currency data.
Here is the spreadsheet used in this project: https://docs.google.com/spreadsheets/d/13IydrLiiH6l8ZglJvfj0GS7uurLmawCRg6u4emKrXyo/edit?usp=sharing

Spreadsheet as Source for Currency Data

📝 Note: The currency converter demo explained below uses a live spreadsheet as its data source. This spreadsheet fetches and updates the currency rates each day automatically using a custom script. You can view the working demo here.

Below is the script that automatically fetches the exchange rates for 60 currencies using the Fixer API. This script updates the Google Sheet daily with the latest exchange rates, ensuring the currency data stays accurate.

Google Sheets Script to Fetch Currency Data

Here is the Google Apps Script used to fetch and update the currency exchange rates: 

 function getCurrencyRates() { const API_KEY = 'YourAPIKey'; // Replace with your actual API key const currencies = 'USD,EUR,GBP,JPY,CAD,AUD,CHF,CNY,INR,BRL,ZAR,NZD,SEK,NOK,DKK,SGD,MXN,HKD,RUB,KRW,TRY,PLN,THB,MYR,IDR,PHP,HUF,CZK,ILS,SAR,AED,ARS,CLP,COP,PEN,PKR,LKR,BGN,RON,EGP,VND,UAH,NGN,GHS,TWD,QAR,KES,ISK,HRK,BDT,MAD,BHD,OMR,JOD,IQD,KWD,DZD';
const url = http://data.fixer.io/api/latest?access_key=${API_KEY}&symbols=${currencies}; const response = UrlFetchApp.fetch(url); const data = JSON.parse(response.getContentText());

if (data.success) { const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); const rates = data.rates; const timestamp = new Date();

scss
Kopijuoti kodą
sheet.clear();

const headers = [  'CurrencyFrom', 'CurrencyFromImg', 'CurrencyTo', 'CurrencyToImg',   'ExchangeRate', 'Date', 'AmountInFromCurrency', 'AmountInToCurrency'];
sheet.getRange(1, 1, 1, headers.length).setValues([headers]);

const amount = 100;
const currencyImages = { 
  'USD': 'https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg',
  'EUR': 'https://upload.wikimedia.org/wikipedia/commons/b/b7/Flag_of_Europe.svg',
  'GBP': 'https://upload.wikimedia.org/wikipedia/en/a/ae/Flag_of_the_United_Kingdom.svg',
  ...
  // Add the rest of the currency images here
};

let row = 2;
for (const [currencyFrom, rateFrom] of Object.entries(rates)) {
  for (const [currencyTo, rateTo] of Object.entries(rates)) {
    if (currencyFrom !== currencyTo) {
      const exchangeRate = rateTo / rateFrom;
      const amountInToCurrency = amount * exchangeRate;
      sheet.getRange(row, 1).setValue(currencyFrom);
      sheet.getRange(row, 2).setValue(currencyImages[currencyFrom] || '');
      sheet.getRange(row, 3).setValue(currencyTo);
      sheet.getRange(row, 4).setValue(currencyImages[currencyTo] || '');
      sheet.getRange(row, 5).setValue(exchangeRate);
      sheet.getRange(row, 6).setValue(timestamp);
      sheet.getRange(row, 7).setValue(amount);
      sheet.getRange(row, 8).setValue(amountInToCurrency);
      row++;
    }
  }
}
} else { Logger.log('Error fetching data: ' + data.error.info); } }

function autoUpdateRates() { ScriptApp.newTrigger('getCurrencyRates') .timeBased() .everyHours(1) // Adjust as needed .create(); }

How to Configure the Script for Google Sheets

Follow these steps to configure the currency conversion script in Google Sheets:

  1. Open your Google Sheets document where you want to update the currency rates.
  2. Click on Extensions > Apps Script to open the script editor.
  3. In the script editor, delete any existing code and paste the full script provided above.
  4. Replace the placeholder API key YourAPIKey with your actual Fixer API key.
  5. Save the script and give it a name like CurrencyRateUpdater.
  6. In the script editor, click on the clock icon (Triggers) and create a new trigger to run the getCurrencyRates function daily or at your preferred interval.
  7. Run the script manually for the first time to populate your sheet with the latest currency data.

📝 Note: Make sure to sign up for the Fixer API and get an API key to use in the script. You can sign up here.

3
Project settings: Set Entity type to “Pages” and choose your Template.
In this case, the Template is set to " Converter," which is a page created as explained below in the " Dynamic Page Template Setup" section. You can copy/paste it or modify it according to your needs.

4
Generate URLs: Set URL Format Template using shortcodes: mpg_currencyfrom and mpg_currencyto to create URLs like /usd-eur/.

Homepage Setup

Here’s the HTML code snippet for setting up the homepage to showcase the most popular conversions:

 <section style="padding: 50px 20px; background-color: #f9f9f9;"> <div style="max-width: 1200px; margin: 0 auto; text-align: center;"> <h1 style="font-size: 48px; font-weight: bold;">Popular Currency Conversions</h1> <p style="font-size: 20px; margin-bottom: 40px;">Check out our customers’ favourite and most common currency conversions.</p> <!-- Convert US Dollars Section --> <h2 style="font-size: 32px; margin-bottom: 20px;">Convert US Dollars</h2> <div style="display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;">[mpg project-id="2" limit="4" where="CurrencyFrom=USD"] <div style="text-align: center;"> <a href="/{{mpg_currencyfrom}}-{{mpg_currencyto}}" style="text-decoration: none; color: #2c3e50; transition: color 0.3s ease;"><div style="position: relative; display: block;"><img style="height: 40px; width: 40px; border-radius: 50%; position: relative; z-index: 2; border: 2px solid #fff;" src="{{mpg_currencyfromimg}}" alt="{{mpg_currencyfrom}}" /> <img style="height: 40px; width: 40px; border-radius: 50%; left: 35px; top: 0; z-index: 1; border: 2px solid #fff;" src="{{mpg_currencytoimg}}" alt="{{mpg_currencyto}}" /></div> <span style="font-size: 18px; font-weight: bold;">USD to {{mpg_currencyto}}</span> </div></a> [/mpg]</div> </section>

📝 Note: Adjust the HTML structure to suit your website’s styling and layout. You can easily modify the appearance by tweaking the padding, font size, and colors.

📝 Note: The project-id used in the shortcodes may differ for your specific project. Make sure to verify and replace the project-id accordingly in all shortcodes.

MPG Shortcodes Explained for Homepage

Here are the core shortcodes used in the homepage template and how they work:

  • [mpg project-id="2" limit="4" where="CurrencyFrom=USD"] This generates four currency conversions from USD, filtered by the column CurrencyFrom.
  • {{mpg_currencyfrom}} Pulls the “from currency” value from your dataset.
  • {{mpg_currencyto}} Pulls the “to currency” value.
  • {{mpg_currencyfromimg}} and {{mpg_currencytoimg}} These fetch images for each currency, such as country flags or symbols.
  • {{mpg_exchangerate}} Displays the exchange rate for the selected currency pair.

Dynamic Page Template Setup

Below is the main template used for each dynamically generated currency conversion page:

 <!-- wp:group {"align":"wide"} --> <div class="wp-block-group alignwide" style="background-color: #f4f4f4; padding: 20px; border-radius: 15px; max-width: 900px; margin: 0 auto; margin-bottom:50px;">
<!-- Title Section --> <h2 class="has-text-align-center has-text-color" style="color: #444DA7; font-size: 36px;">Currency Converter</h2>

<!-- Input and Result Section --> <div style="display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: white; border-radius: 15px; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);">
<!-- Left Section: Amount and From Currency -->
<div style="flex-basis: 45%; text-align: left;">
  <div style="margin-bottom: 20px; display: flex; align-items: center;">
    <span style="font-size: 20px; font-weight: bold; margin-right: 10px;">{{mpg_currencyfrom}}</span>
    <img src="{{mpg_currencyfromimg}}" alt="{{mpg_currencyfrom}}" style="width: 20%; margin-right: 10px;">
    <input type="number" id="amount" value="100" oninput="convertCurrency()" style="padding: 4%; border: 1px solid #ccc; border-radius: 10px; width: 80%; font-size: 18px;">
  </div>
</div>

<!-- Switch Currency Icon in the Middle -->
<div style="flex-basis: 10%; text-align: center;">
  <span onclick="switchCurrency()" style="cursor: pointer;">
    <img src="https://spontaneous-curlew-a3b58c.vertisite.cloud/wp-content/uploads/2024/09/share_4734486.png" alt="Switch Currencies" style="width: 40%;">
  </span>
</div>

<!-- Right Section: Converted Amount and To Currency -->
<div style="flex-basis: 45%; text-align: left;">
  <div style="margin-bottom: 20px; display: flex; align-items: center;">
    <input type="number" id="convertedAmount" value="" readonly style="padding: 4%; border: 1px solid #ccc; border-radius: 10px; width: 80%; font-size: 18px; background-color: #f0f0f0;">
    <img src="{{mpg_currencytoimg}}" alt="{{mpg_currencyto}}" style="width: 20%; margin-left: 10px;">
    <span style="font-size: 20px; font-weight: bold; margin-left: 10px;">{{mpg_currencyto}}</span>
  </div>
</div>
</div>

<!-- Disclaimer --> <div style="text-align: center; margin-top: 20px;"> <p style="font-size: 14px; color: #888;">Please note that this is sample data for demonstration purposes only and may not reflect actual exchange rates used by financial institutions.</p> </div> </div> <!-- /wp
-->

[mpg_spintax project_id="2" block_id="164"] <h1>{Currency Conversion for {{mpg_currencyfrom}} to {{mpg_currencyto}}|{{mpg_currencyfrom}} to {{mpg_currencyto}} Conversion Guide|Converting {{mpg_currencyfrom}} to {{mpg_currencyto}}: Latest Exchange Rates}</h1>

<p>{Looking to convert|Need to exchange|Thinking about converting} <strong>{{mpg_currencyfrom}}</strong> to <strong>{{mpg_currencyto}}</strong>? {This guide|Our tool|Here} {provides an overview|gives you the latest details|shows you the most up-to-date information} on the exchange rate between <strong>{{mpg_currencyfrom}}</strong> and <strong>{{mpg_currencyto}}</strong>. Use this tool to {get an estimated exchange rate|find out the approximate conversion value|check the current conversion rate} and {make informed decisions|better manage your finances|stay updated with the latest rates}.</p>

<p>Converting <strong>{{mpg_currencyfrom}}</strong> to <strong>{{mpg_currencyto}}</strong> {can be essential|is important|is valuable} for {travelers|businesses|investors} and {helps you stay on top of|allows you to track|keeps you informed about} international exchange rates. With <strong>{{mpg_currencyto}}</strong> being {important|widely used|a key currency} in {many regions|multiple countries|global markets}, knowing how <strong>{{mpg_currencyfrom}}</strong> converts into <strong>{{mpg_currencyto}}</strong> {can provide key insights|can guide your financial planning|is essential for your financial strategy}.</p>

<p>Please note that the exchange rates provided are for reference purposes only and may differ from the exact rates used by financial institutions. Below, you'll find other exchange rates related to <strong>{{mpg_currencyfrom}}</strong> and its conversion to various currencies.</p>

<h2>{Why is it important to know the exchange rate?|Understanding the Importance of Conversion Rates|Why Track Exchange Rates for {{mpg_currencyfrom}} to {{mpg_currencyto}}?}</h2> <p>{Whether you're transferring money, planning a trip, or dealing with international business|For those involved in global trade, travel, or financial investments|In today's interconnected world, knowing the current exchange rate} between <strong>{{mpg_currencyfrom}}</strong> and <strong>{{mpg_currencyto}}</strong> is {crucial|essential|important}. Our tool offers {a clear, simple way|an easy-to-use method|a fast and accurate way} to calculate the value of <strong>{{mpg_currencyfrom}}</strong> in <strong>{{mpg_currencyto}}</strong>, helping you {stay informed|stay in control|get a general understanding} of your conversion needs.</p>

<p>If you are {converting|exchanging|transferring} <strong>{{mpg_currencyfrom}}</strong> to <strong>{{mpg_currencyto}}</strong>, this tool provides {a general|an approximate|an estimated} exchange rate of <strong>{{mpg_exchangerate}}</strong> to {help you make decisions|keep you informed|provide guidance} on the conversion. Below, you'll find additional exchange rates for <strong>{{mpg_currencyfrom}}</strong> and its conversion to other currencies.</p>

<h3>{Additional Conversion Rates for {{mpg_currencyfrom}}|More Exchange Rates for {{mpg_currencyfrom}}|Other Currency Conversions for {{mpg_currencyfrom}}}</h3> <p>In addition to {{mpg_currencyfrom}} to {{mpg_currencyto}}, you may want to explore how {{mpg_currencyfrom}} converts to other important currencies. Below, you will find relevant information for {{mpg_currencyfrom}} exchange rates with various currencies. These rates are approximate and may not reflect the exact conversion rates provided by financial institutions.</p>

<p>{Feel free to check out|Explore|Browse} the list of other exchange rates for <strong>{{mpg_currencyfrom}}</strong> {below|in the section below|listed here} and {stay updated|stay informed|be aware} of the value of <strong>{{mpg_currencyfrom}}</strong> in relation to other currencies.</p>

<p>Note: This tool provides {a reference|an estimate|an approximation} of the exchange rate for <strong>{{mpg_currencyfrom}}</strong> to <strong>{{mpg_currencyto}}</strong>. Be sure to check with financial institutions or currency exchanges for the most accurate and up-to-date conversion rates.</p>

<p>Looking for more conversions? You can {see|view|check out} the other exchange rates related to <strong>{{mpg_currencyfrom}}</strong> {below|further down|in the list provided}. Feel free to {contact us|reach out|get in touch} if you have any questions or need further assistance.</p>

[/mpg_spintax]

[mpg project-id="2" limit="20" where="CurrencyFrom={{mpg_currencyfrom}}"]

<a href="/{{mpg_currencyfrom}}-{{mpg_currencyto}}/" style="text-decoration: none;"> <div style="background-color: #f4f4f4; padding: 10px; border-radius: 10px; margin-bottom: 10px; display: flex; align-items: center; transition: background-color 0.3s;"> <img src="{{mpg_currencyfromimg}}" alt="{{mpg_currencyfrom}}" style="height: 20px; margin-right: 10px;"> <span style="color: #2b8a3e; font-size: 18px; font-weight: bold;">{{mpg_currencyfrom}}</span> <span style="color: #666; margin: 0 10px;">to</span> <img src="{{mpg_currencytoimg}}" alt="{{mpg_currencyto}}" style="height: 20px; margin-right: 5px;"> <span style="color: #2b8a3e; font-size: 18px; font-weight: bold;">{{mpg_currencyto}}</span> <div style="color: #555; font-size: 14px; margin-left: auto;"> Latest rate: <strong>{{mpg_exchangerate}}</strong> </div> </div> </a>

[/mpg] <!-- wp
--> <script> // Auto-run conversion on page load document.addEventListener("DOMContentLoaded", function() { convertCurrency(); // Perform conversion automatically }); function convertCurrency() { var amount = document.getElementById('amount').value; var fromCurrency = "{{mpg_currencyfrom}}".toLowerCase(); var toCurrency = "{{mpg_currencyto}}".toLowerCase(); var exchangeRate = {{mpg_exchangerate}}; // Use correct logic to fetch exchange rate here
// Calculate the converted amount
var convertedAmount = amount * exchangeRate;
document.getElementById('convertedAmount').value = convertedAmount.toFixed(2);
}

function switchCurrency() { var fromCurrency = "{{mpg_currencyfrom}}".toLowerCase(); var toCurrency = "{{mpg_currencyto}}".toLowerCase(); var currentUrl = window.location.href;
// Swap currencies in the URL
if (currentUrl.includes(fromCurrency + '-' + toCurrency)) {
  var newUrl = currentUrl.replace(fromCurrency + '-' + toCurrency, toCurrency + '-' + fromCurrency);
} else {
  var newUrl = currentUrl.replace(toCurrency + '-' + fromCurrency, fromCurrency + '-' + toCurrency);
}

window.location.href = newUrl;
} </script> <!-- /wp
-->

MPG Shortcodes Explained for Dynamic Page Template

Here are the key shortcodes used within the dynamic page template:

  • {{mpg_currencyfrom}} Displays the "from currency" value, such as USD, for the current page being generated. This is used multiple times in the template, wherever the base currency is needed.
  • {{mpg_currencyto}} Displays the "to currency" value, such as EUR, for the current page being generated. This is used throughout the template to show the currency being converted to.
  • {{mpg_currencyfromimg}} Displays an image related to the "from currency," such as the flag or symbol associated with that currency. For example, it could display a USD flag for US dollars.
  • {{mpg_currencytoimg}} Displays an image related to the "to currency," such as the flag or symbol associated with that currency. This could display the EUR flag for Euros.
  • {{mpg_exchangerate}} Displays the current exchange rate between the "from currency" and "to currency." This is used in both the page content and the JavaScript logic to calculate currency conversion.
  • [mpg_spintax project_id="2" block_id="164"] This shortcode applies spintax (a method for dynamically generating alternative variations of text) for the content. It cycles through different versions of headings and text to ensure that each generated page has unique content for SEO purposes. Here's a breakdown of the spintax:
    • The title alternates between three different headlines like "Currency Conversion for USD to EUR" or "USD to EUR Conversion Guide."
    • Each paragraph uses multiple variations of phrases like "Looking to convert," "Need to exchange," or "Thinking about converting" to generate varied, SEO-friendly content.
  • [mpg project-id="2" limit="20" where="CurrencyFrom={{mpg_currencyfrom}}"] This shortcode generates a list of 20 currency conversion links based on the current "from currency." It dynamically displays other currencies that the selected "from currency" can be converted to. For example, on the USD page, this will show conversions from USD to other currencies like GBP, JPY, etc.

JavaScript for Currency Conversion

This JavaScript is responsible for the live currency conversion functionality on the dynamic template page:

  • convertCurrency() This function calculates the converted amount by multiplying the entered value (amount) with the exchange rate ({{mpg_exchangerate}}). It updates the input field with the converted value automatically when the user changes the amount.
  • switchCurrency() This function swaps the "from" and "to" currencies on the page. It modifies the URL based on the current currency pair, so if you're viewing the page for USD to EUR, it will switch to the EUR to USD page.
  • document.addEventListener("DOMContentLoaded") Once the page loads, this function automatically calls convertCurrency() to display the converted amount immediately based on the default value (usually 100).

📝 Note: Make sure to check your project's project-id and replace it in the shortcodes accordingly.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us