Reverse Percentage Calculator

Reverse Percentage Calculator WordPress Plugin

Reverse Percentage Calculator

WordPress Plugin Documentation

A WordPress plugin that helps users calculate the original value before a percentage was applied. Includes shortcode implementation, AJAX functionality, and a modern user interface.

Plugin Overview

The Reverse Percentage Calculator is a WordPress plugin that allows users to calculate the original value before a percentage was applied. This is useful for financial calculations, price analysis, and any scenario where you need to “work backwards” from a percentage change.

The plugin provides a shortcode [reverse_percentage_calculator] that can be embedded on any page or post in your WordPress site.

Key Features:

  • Simple, user-friendly interface
  • AJAX functionality for instant calculations without page refresh
  • Supports both addition and subtraction of percentages
  • Clean, modern UI with FontAwesome icons
  • Fully responsive design that works on all devices
  • Easy to implement via shortcode

Plugin Demo

Here’s a visual representation of how the calculator appears and functions on your WordPress site:

Reverse Percentage Calculator

Plugin Files

reverse-percentage-calculator.php

<?php
/**
 * Plugin Name: Reverse Percentage Calculator
 * Description: A calculator that helps users find the original value before a percentage was applied.
 * Version: 1.0.0
 * Author: Your Name
 * Author URI: https://yourwebsite.com
 * Text Domain: reverse-percentage-calculator
 */

// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}

class Reverse_Percentage_Calculator {
    
    /**
     * Constructor
     */
    public function __construct() {
        // Register shortcode
        add_shortcode('reverse_percentage_calculator', array($this, 'render_calculator'));
        
        // Enqueue scripts and styles
        add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts'));
        
        // Register AJAX handlers
        add_action('wp_ajax_calculate_reverse_percentage', array($this, 'calculate_reverse_percentage'));
        add_action('wp_ajax_nopriv_calculate_reverse_percentage', array($this, 'calculate_reverse_percentage'));
    }
    
    /**
     * Enqueue necessary scripts and styles
     */
    public function enqueue_scripts() {
        // Enqueue FontAwesome
        wp_enqueue_style(
            'font-awesome',
            'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css',
            array(),
            '6.1.1'
        );
        
        // Enqueue plugin CSS
        wp_enqueue_style(
            'reverse-percentage-calculator-css',
            plugins_url('css/style.css', __FILE__),
            array(),
            '1.0.0'
        );
        
        // Enqueue plugin JavaScript
        wp_enqueue_script(
            'reverse-percentage-calculator-js',
            plugins_url('js/script.js', __FILE__),
            array('jquery'),
            '1.0.0',
            true
        );
        
        // Pass AJAX URL to script
        wp_localize_script(
            'reverse-percentage-calculator-js',
            'rpc_ajax',
            array(
                'ajax_url' => admin_url('admin-ajax.php'),
                'nonce' => wp_create_nonce('reverse_percentage_calculator_nonce')
            )
        );
    }
    
    /**
     * Render the calculator via shortcode
     */
    public function render_calculator() {
        ob_start();
        ?>
        

Reverse Percentage Calculator

= 100) { wp_send_json_error('For subtraction, percentage must be less than 100%'); wp_die(); } $original_value = $final_value / (1 - $percentage / 100); } // Prepare result explanation $operation_text = $operation === 'added' ? 'increase' : 'decrease'; $explanation = sprintf( 'When a %s%% %s is applied to $%s, the result is $%s', number_format($percentage, 2), $operation_text, number_format($original_value, 2), number_format($final_value, 2) ); // Send success response wp_send_json_success(array( 'original_value' => number_format($original_value, 2), 'explanation' => $explanation )); wp_die(); } } // Initialize the plugin new Reverse_Percentage_Calculator();
js/script.js

/**
 * Reverse Percentage Calculator - Frontend JavaScript
 */
(function($) {
    'use strict';
    
    $(document).ready(function() {
        const $calculateBtn = $('#rpc-calculate-btn');
        const $finalValue = $('#rpc-final-value');
        const $percentage = $('#rpc-percentage');
        const $result = $('#rpc-result');
        const $originalValue = $('#rpc-original-value');
        const $explanation = $('#rpc-result-explanation');
        const $error = $('#rpc-error');
        const $loading = $('#rpc-loading');
        
        $calculateBtn.on('click', function() {
            // Hide previous results and errors
            $result.hide();
            $error.hide().empty();
            
            // Validate inputs
            const finalValue = parseFloat($finalValue.val());
            const percentage = parseFloat($percentage.val());
            const operation = $('input[name="rpc-operation"]:checked').val();
            
            if (isNaN(finalValue) || finalValue <= 0) {
                showError('Please enter a valid final value greater than zero.');
                return;
            }
            
            if (isNaN(percentage) || percentage <= 0) {
                showError('Please enter a valid percentage greater than zero.');
                return;
            }
            
            // For subtraction, percentage can't be 100% or more
            if (operation === 'subtracted' && percentage >= 100) {
                showError('For subtraction, percentage must be less than 100%.');
                return;
            }
            
            // Show loading indicator
            $loading.show();
            
            // Make AJAX request
            $.ajax({
                url: rpc_ajax.ajax_url,
                type: 'POST',
                data: {
                    action: 'calculate_reverse_percentage',
                    nonce: rpc_ajax.nonce,
                    final_value: finalValue,
                    percentage: percentage,
                    operation: operation
                },
                success: function(response) {
                    $loading.hide();
                    
                    if (response.success) {
                        // Display result
                        $originalValue.text('$' + response.data.original_value);
                        $explanation.text(response.data.explanation);
                        $result.fadeIn();
                        
                        // Scroll to result
                        $('html, body').animate({
                            scrollTop: $result.offset().top - 100
                        }, 500);
                    } else {
                        showError(response.data || 'An error occurred during calculation.');
                    }
                },
                error: function() {
                    $loading.hide();
                    showError('Failed to connect to the server. Please try again.');
                }
            });
        });
        
        // Helper function to display errors
        function showError(message) {
            $error.html(' ' + message).fadeIn();
        }
        
        // Reset form on input change
        $finalValue.add($percentage).on('input', function() {
            $result.hide();
            $error.hide();
        });
        
        $('input[name="rpc-operation"]').on('change', function() {
            $result.hide();
            $error.hide();
        });
    });
    
})(jQuery);
css/style.css

/**
 * Reverse Percentage Calculator - Styles
 */

.reverse-percentage-calculator {
    max-width: 600px;
    margin: 2rem auto;
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.reverse-percentage-calculator h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: #2c3e50;
    font-size: 1.5rem;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 1rem;
}

.reverse-percentage-calculator h3 i {
    color: #3498db;
    margin-right: 0.5rem;
}

.rpc-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.rpc-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rpc-form-group label {
    font-weight: 600;
    color: #444;
    display: flex;
    align-items: center;
}

.rpc-form-group label i {
    margin-right: 0.5rem;
    color: #3498db;
    width: 20px;
    text-align: center;
}

.rpc-form-group input[type="number"] {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.rpc-form-group input[type="number"]:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.rpc-radio-group {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.rpc-radio-group label {
    display: flex;
    align-items: center;
    font-weight: normal;
    cursor: pointer;
}

.rpc-radio-group input[type="radio"] {
    margin-right: 0.5rem;
}

.rpc-button {
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rpc-button:hover {
    background-color: #2980b9;
}

.rpc-button i {
    margin-right: 0.5rem;
}

.rpc-result {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background-color: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #2ecc71;
}

.rpc-result h4 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: #2c3e50;
}

.rpc-result-value {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.rpc-result-value span {
    font-weight: 700;
    color: #2ecc71;
}

.rpc-result-explanation {
    color: #7f8c8d;
    font-size: 0.9rem;
    margin-bottom: 0;
}

.rpc-error {
    margin-top: 1rem;
    padding: 0.875rem;
    background-color: #ffeeee;
    border-radius: 4px;
    color: #e74c3c;
    display: flex;
    align-items: center;
}

.rpc-error i {
    margin-right: 0.5rem;
}

.rpc-loading {
    text-align: center;
    margin-top: 1rem;
    color: #3498db;
}

.rpc-loading i {
    margin-right: 0.5rem;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive styles */
@media (max-width: 768px) {
    .reverse-percentage-calculator {
        padding: 1rem;
        margin: 1rem auto;
    }
    
    .rpc-radio-group {
        flex-direction: column;
        gap: 0.75rem;
    }
}

Installation Instructions

  1. Download the Plugin Files:

    Create the following directory structure and add the files provided above:

    reverse-percentage-calculator/
    ├── reverse-percentage-calculator.php
    ├── js/
    │   └── script.js
    └── css/
        └── style.css
  2. Compress the Files:

    Compress the ‘reverse-percentage-calculator’ folder into a ZIP file.

  3. Upload and Install the Plugin:
    • Log in to your WordPress admin dashboard
    • Navigate to Plugins > Add New
    • Click the Upload Plugin button at the top of the page
    • Click Choose File and select your ZIP file
    • Click Install Now
    • After installation completes, click Activate Plugin
  4. Alternative Manual Installation:

    If you prefer manual installation:

    • Extract the ZIP file on your computer
    • Upload the ‘reverse-percentage-calculator’ folder to your ‘/wp-content/plugins/’ directory via FTP
    • Navigate to Plugins in your WordPress admin dashboard
    • Find ‘Reverse Percentage Calculator’ and click Activate

Usage Instructions

Using the Shortcode

To display the calculator on any page or post, simply add the following shortcode:

[reverse_percentage_calculator]

Example Usage:

  1. Create or edit a page/post where you want to display the calculator
  2. Add the shortcode [reverse_percentage_calculator] to the content
  3. Publish or update the page/post
  4. Visit the page to see the calculator in action

Example Use Cases:

  • Price before discount: If an item costs $80 after a 20% discount, what was the original price?
  • Pre-tax amount: If your total bill is $108 including 8% tax, what was the pre-tax amount?
  • Original investment: If your investment is now worth $1,500 after a 25% gain, how much did you initially invest?

Using the Calculator:

  1. Enter the final value – This is the amount after the percentage was applied
  2. Enter the percentage – The percentage that was added or subtracted
  3. Select the operation – Indicate whether the percentage was added or subtracted
  4. Click “Calculate Original Value” – The result will appear below the button

Customization Options

The plugin can be customized by modifying the CSS or adding functionality to the JavaScript. Here are some common customizations:

Styling Customizations

To customize the appearance, you can add custom CSS to your theme or use a custom CSS plugin. Here are some examples:

/* Change the calculator's main color */
.reverse-percentage-calculator h3 i,
.rpc-form-group label i,
.rpc-button {
    background-color: #9b59b6; /* Purple instead of blue */
}

/* Change the result highlight color */
.rpc-result {
    border-left-color: #f39c12; /* Orange instead of green */
}

.rpc-result-value span {
    color: #f39c12; /* Orange text for the result */
}

/* Change the calculator width */
.reverse-percentage-calculator {
    max-width: 800px; /* Wider calculator */
}

Advanced Customizations

For more advanced customizations, you can modify the plugin files directly. Consider creating a child plugin to avoid losing changes during updates.

Important Note:

If you modify the plugin files directly, your changes may be lost when the plugin is updated. For permanent customizations, consider creating a child plugin or using WordPress filters/actions.

Troubleshooting

Common Issues and Solutions

Calculator Not Appearing

Possible causes:

  • Shortcode is incorrectly typed
  • JavaScript errors on the page
  • Plugin not properly activated

Solutions:

  • Verify the shortcode is exactly [reverse_percentage_calculator]
  • Check your browser’s console for JavaScript errors
  • Deactivate and reactivate the plugin
  • Try the shortcode on a different page or post

AJAX Calculation Not Working

Possible causes:

  • WordPress AJAX URL incorrect
  • JavaScript conflicts with other plugins
  • Security plugin blocking AJAX requests

Solutions:

  • Temporarily disable other plugins to check for conflicts
  • Check if your security plugins are blocking AJAX requests
  • Try using the calculator in a different browser

Styling Issues

Possible causes:

  • Theme CSS overriding plugin styles
  • Plugin CSS not loading properly
  • FontAwesome icons not displaying

Solutions:

  • Add more specific CSS selectors to override theme styles
  • Verify the CSS file is properly loaded in the page source
  • Check if FontAwesome is being blocked by your browser

Reverse Percentage Calculator WordPress Plugin

Created with for WordPress