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

Final Value (after percentage was applied)

Percentage (%)

Percentage Operation

Added (+) Subtracted (-)

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
            
            
                
                    
                         Final Value (after percentage was applied)
                    
                    
                
                
                
                    
                         Percentage (%)
                    
                    
                
                
                
                    
                         Percentage Operation
                    
                    
                        
                             Added (+)
                        
                        
                             Subtracted (-)
                        
                    
                
                
                
                
                
                    Result:
                    
                        Original Value: 
                    
                    
                
                
                
                
                
                     Calculating...
                
            
        
        = 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

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

Compress the Files:
Compress the ‘reverse-percentage-calculator’ folder into a ZIP file.
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
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:

Create or edit a page/post where you want to display the calculator
Add the shortcode [reverse_percentage_calculator] to the content
Publish or update the page/post
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:

Enter the final value – This is the amount after the percentage was applied
Enter the percentage – The percentage that was added or subtracted
Select the operation – Indicate whether the percentage was added or subtracted
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