Web Techiq

Menu
Get Quotation

How to Build a Modern Basic Calculator tools In Your WordPress Site

By /
Step-by-step guide to building a WordPress calculator without plugins

Learn to build a modern basic calculator for WordPress using HTML/CSS/JS – no plugins required. Get the complete code and implementation guide for a responsive calculation tool.

Table of Contents

How to Add a Modern Basic Calculator to WordPress

Step 1: Install WP Code Snippets Plugin

Since we’re not using a plugin for the calculator itself, we’ll use WP Code Snippets to safely add custom code.

  1. Go to Plugins → Add New

  2. Search for “WP Code Snippets”

  3. Install & activate

Step 2: Add the HTML Structure

Create a new PHP snippet (Code Snippets → Add New):

PHP Calculator Shortcode 
function modern_calculator_shortcode() {
    ob_start();
    ?>
    <div class="modern-calculator-container">
        <div class="modern-calculator">
            <div class="calculator-display">
                <input type="text" id="calculator-input" readonly>
                <div id="calculator-result">0</div>
            </div>
            <div class="calculator-buttons">
                <button class="calc-btn operator" data-value="C">C</button>
                <button class="calc-btn operator" data-value="±">±</button>
                <button class="calc-btn operator" data-value="%">%</button>
                <button class="calc-btn operator" data-value="/">/</button>
                
                <button class="calc-btn" data-value="7">7</button>
                <button class="calc-btn" data-value="8">8</button>
                <button class="calc-btn" data-value="9">9</button>
                <button class="calc-btn operator" data-value="*">×</button>
                
                <button class="calc-btn" data-value="4">4</button>
                <button class="calc-btn" data-value="5">5</button>
                <button class="calc-btn" data-value="6">6</button>
                <button class="calc-btn operator" data-value="-">-</button>
                
                <button class="calc-btn" data-value="1">1</button>
                <button class="calc-btn" data-value="2">2</button>
                <button class="calc-btn" data-value="3">3</button>
                <button class="calc-btn operator" data-value="+">+</button>
                
                <button class="calc-btn zero" data-value="0">0</button>
                <button class="calc-btn" data-value=".">.</button>
                <button class="calc-btn operator equals" data-value="=">=</button>
            </div>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('modern_calculator', 'modern_calculator_shortcode');

Execution: Shortcode
Save & activate.

Step 3: Add the CSS (Styling)

Create a CSS snippet:

Modern Calculator CSS 
.modern-calculator-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    max-width: 100%;
}

.modern-calculator {
    width: 100%;
    max-width: 600px; /* Normal size on mobile */
    background: #1a1a2e;
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .modern-calculator {
        max-width: 100%; /* Full width on desktop */
        padding: 30px;
    }
}

.calculator-display {
    margin-bottom: 25px;
    text-align: right;
    color: white;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#calculator-input {
    width: 100%;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.4rem;
    padding: 5px;
    text-align: right;
    margin-bottom: 10px;
    font-weight: 300;
}

#calculator-result {
    font-size: 3rem;
    font-weight: 300;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -1px;
}

.calculator-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
}

@media (min-width: 768px) {
    .calculator-buttons {
        grid-gap: 20px;
    }
}

.calc-btn {
    border: none;
    border-radius: 16px;
    height: 70px;
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.2s ease-out;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    font-weight: 400;
    position: relative;
    overflow: hidden;
}

.calc-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0));
    opacity: 0;
    transition: opacity 0.2s;
}

.calc-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.calc-btn:hover::after {
    opacity: 1;
}

.calc-btn:active {
    transform: translateY(0) scale(0.98);
}

.calc-btn.operator {
    background: rgba(100, 149, 237, 0.3);
    color: #6495ed;
}

.calc-btn.operator:hover {
    background: rgba(100, 149, 237, 0.4);
}

.calc-btn.equals {
    background: rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}

.calc-btn.equals:hover {
    background: rgba(46, 204, 113, 0.4);
}

.calc-btn.zero {
    grid-column: span 2;
}

/* Special function buttons */
.calc-btn[data-value="C"],
.calc-btn[data-value="±"],
.calc-btn[data-value="%"] {
    color: #ff7f50;
    background: rgba(255, 127, 80, 0.2);
}

.calc-btn[data-value="C"]:hover,
.calc-btn[data-value="±"]:hover,
.calc-btn[data-value="%"]:hover {
    background: rgba(255, 127, 80, 0.3);
}

/* Responsive adjustments for mobile */
@media (max-width: 480px) {
    .modern-calculator {
        border-radius: 16px;
        padding: 15px;
    }
    
    .calculator-display {
        padding: 10px;
        margin-bottom: 15px;
    }
    
    #calculator-result {
        font-size: 2.2rem;
    }
    
    .calc-btn {
        height: 60px;
        font-size: 1.5rem;
        border-radius: 12px;
    }
    
    .calculator-buttons {
        grid-gap: 10px;
    }
}

Copy The code and past it then Active the code Snippets

Step 4: Add the JavaScript (Functionality)

Create a JavaScript snippet:

Calculator JavaScript 
document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('calculator-input');
    const result = document.getElementById('calculator-result');
    const buttons = document.querySelectorAll('.calc-btn');
    
    let currentInput = '';
    let previousInput = '';
    let operation = null;
    let resetInput = false;
    
    buttons.forEach(button => {
        button.addEventListener('click', () => {
            const value = button.getAttribute('data-value');
            
            if (value >= '0' && value <= '9') {
                if (resetInput) {
                    currentInput = '';
                    resetInput = false;
                }
                currentInput += value;
                result.textContent = currentInput;
            } else if (value === '.') {
                if (resetInput) {
                    currentInput = '0';
                    resetInput = false;
                }
                if (!currentInput.includes('.')) {
                    currentInput += currentInput === '' ? '0.' : '.';
                    result.textContent = currentInput;
                }
            } else if (value === '±') {
                currentInput = (parseFloat(currentInput) * -1).toString();
                result.textContent = currentInput;
            } else if (value === '%') {
                currentInput = (parseFloat(currentInput) / 100).toString();
                result.textContent = currentInput;
            } else if (value === 'C') {
                currentInput = '';
                previousInput = '';
                operation = null;
                input.value = '';
                result.textContent = '0';
            } else if (value === '=') {
                if (operation && previousInput !== '' && currentInput !== '') {
                    calculate();
                    input.value = '';
                    operation = null;
                }
            } else {
                // Handle operations: +, -, *, /
                if (currentInput !== '') {
                    if (previousInput !== '' && operation && !resetInput) {
                        calculate();
                    }
                    operation = value;
                    previousInput = currentInput;
                    input.value = `${previousInput} ${operation}`;
                    resetInput = true;
                }
            }
        });
    });
    
    function calculate() {
        let computation;
        const prev = parseFloat(previousInput);
        const current = parseFloat(currentInput);
        
        switch (operation) {
            case '+':
                computation = prev + current;
                break;
            case '-':
                computation = prev - current;
                break;
            case '*':
                computation = prev * current;
                break;
            case '/':
                computation = prev / current;
                break;
            default:
                return;
        }
        
        currentInput = computation.toString();
        result.textContent = currentInput;
    }
});

Copy The code and past it then Active the code Snippets

Step 5: Use the Calculator Anywhere

Now, simply add this shortcode to any page or post:

Calculator Shortcode 
[modern_basic_calculator]

🎨 Customization Tips

  • Change colors (edit CSS variables)

  • Adjust size (modify max-width in CSS)

  • Add more functions (extend JavaScript logic)

🔍 Why This Modern Basic Calculator is Better Than Plugins

🚀 Faster loading (no extra HTTP requests)
🎨 Full design control (no restrictive templates)
🔧 Easily extendable (add scientific functions later)

📌 Final Thoughts

This modern basic calculator is perfect for WordPress developers who want a clean, efficient solution without bloated plugins.

💬 Need help? Drop a comment below!
🔗 Share this with a developer who needs it!

Check Out The DEMO

Frequently Asked Questions (FAQ)

Not necessarily! While basic HTML/CSS/JS knowledge helps, our guide provides ready-to-use code snippets you can copy-paste. Just follow the step-by-step instructions.

No! Unlike plugin-based calculators, this lightweight solution adds minimal overhead (under 5KB of code). It’s optimized for fast loading and won’t impact your site speed.

Absolutely! The CSS is fully editable. Change colors, fonts, or button styles by modifying the provided CSS snippet. We’ve included customization tips in the article.

Yes! The design is 100% responsive and adapts to all screen sizes. Tested on iOS, Android, and desktop browsers.

More Article May Be You Like

Related Posts

1 thought on “How to Build a Modern Basic Calculator tools In Your WordPress Site”

Leave a Comment

Your email address will not be published. Required fields are marked *

Web design service provider. You online solutions

📢 Subscribe Now

Enter your email below and join our community!

Subscription Form

✨ Benefits of Subscribing

  • Get early access to special deals
  • Stay ahead with the latest web design tips
  • Exclusive resources and guides
Scroll to Top