Add a BMI Calculator to Your Website: WordPress Plugin and HTML Code

How to Easily Add a BMI Calculator to Your Website: WordPress Plugin and HTML Tutorial

Are you looking to provide value to your website visitors with a simple yet effective tool? Adding a BMI (Body Mass Index) calculator is a great way to engage your audience, especially if you run a health, fitness, or wellness-related website. In this article, we’ll show you how to integrate a BMI calculator into your website using two methods: a WordPress plugin and standalone HTML and CSS code.

Why Add a BMI Calculator to Your Website?

A BMI calculator helps users understand whether their weight is healthy based on their height. It’s a handy tool for health-conscious individuals and can enhance your website’s value. Whether you’re a fitness coach, a blogger, or a business owner, a BMI calculator can:

  • Increase visitor engagement.

  • Provide a practical resource for your audience.

  • Enhance your website’s credibility in the health and fitness niche.

Method 1: Adding a BMI Calculator with a WordPress Plugin

If you’re using WordPress, creating a plugin is a seamless way to add a BMI calculator. Below is a complete, ready-to-use PHP code for a custom WordPress plugin:

WordPress Plugin Code

				
					<?php
/*
Plugin Name: BMI Calculator
Description: A simple plugin to add a BMI Calculator to your WordPress website.
Version: 1.0
Author: Your Name
*/

// Add a shortcode to display the BMI calculator
function bmi_calculator_shortcode() {
    $output = '<div id="bmi-calculator">
        <form id="bmi-form">
            <label for="bmi-weight">Weight (kg):</label>
            <input type="number" id="bmi-weight" name="weight" step="0.1" required>

            <label for="bmi-height">Height (cm):</label>
            <input type="number" id="bmi-height" name="height" step="0.1" required>

            <button type="button" id="bmi-submit">Calculate BMI</button>
        </form>
        <div id="bmi-result" style="margin-top:10px; font-weight:bold;"></div>
    </div>';

    $output .= '<script>
        document.getElementById("bmi-submit").addEventListener("click", function() {
            const weight = parseFloat(document.getElementById("bmi-weight").value);
            const height = parseFloat(document.getElementById("bmi-height").value) / 100;
            if (!weight || !height || height <= 0 || weight <= 0) {
                document.getElementById("bmi-result").innerText = "Please enter valid inputs.";
                return;
            }

            const bmi = (weight / (height * height)).toFixed(2);
            let category = "";
            if (bmi < 18.5) {
                category = "Underweight";
            } else if (bmi >= 18.5 && bmi < 24.9) {
                category = "Normal weight";
            } else if (bmi >= 25 && bmi < 29.9) {
                category = "Overweight";
            } else {
                category = "Obesity";
            }
            document.getElementById("bmi-result").innerText = `Your BMI is ${bmi} (${category}).`;
        });
    </script>';

    return $output;
}
add_shortcode('bmi_calculator', 'bmi_calculator_shortcode');

function bmi_calculator_styles() {
    echo '<style>
        #bmi-calculator {
            max-width: 400px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #f9f9f9;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        #bmi-calculator label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        #bmi-calculator input {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        #bmi-calculator button {
            width: 100%;
            padding: 10px;
            background-color: #0073aa;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        #bmi-calculator button:hover {
            background-color: #005177;
        }
    </style>';
}
add_action('wp_head', 'bmi_calculator_styles');
				
			

Steps to Use:

  1. Copy the code above and save it as bmi-calculator.php.

  2. Upload the file to your WordPress plugins folder.

  3. Activate the plugin in your WordPress admin dashboard.

  4. Use the shortcode [bmi_calculator] on any page or post to display the BMI calculator.

Want to download the BMI Calculator plugin?

Click the below download button to get downloaded.

DOWNLOAD

Method 2: Adding a BMI Calculator with HTML and CSS

For non-WordPress users, you can directly embed a BMI calculator into your website using the following HTML and CSS code:

HTML and CSS Code

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BMI Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #bmi-calculator {
            max-width: 400px;
            width: 100%;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #ffffff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        #bmi-calculator label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        #bmi-calculator input {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        #bmi-calculator button {
            width: 100%;
            padding: 10px;
            background-color: #0073aa;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        #bmi-calculator button:hover {
            background-color: #005177;
        }
        #bmi-result {
            margin-top: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="bmi-calculator">
        <form id="bmi-form">
            <label for="bmi-weight">Weight (kg):</label>
            <input type="number" id="bmi-weight" name="weight" step="0.1" required>

            <label for="bmi-height">Height (cm):</label>
            <input type="number" id="bmi-height" name="height" step="0.1" required>

            <button type="button" id="bmi-submit">Calculate BMI</button>
        </form>
        <div id="bmi-result"></div>
    </div>

    <script>
        document.getElementById("bmi-submit").addEventListener("click", function() {
            const weight = parseFloat(document.getElementById("bmi-weight").value);
            const height = parseFloat(document.getElementById("bmi-height").value) / 100;
            if (!weight || !height || height <= 0 || weight <= 0) {
                document.getElementById("bmi-result").innerText = "Please enter valid inputs.";
                return;
            }

            const bmi = (weight / (height * height)).toFixed(2);
            let category = "";
            if (bmi < 18.5) {
                category = "Underweight";
            } else if (bmi >= 18.5 && bmi < 24.9) {
                category = "Normal weight";
            } else if (bmi >= 25 && bmi < 29.9) {
                category = "Overweight";
            } else {
                category = "Obesity";
            }
            document.getElementById("bmi-result").innerText = `Your BMI is ${bmi} (${category}).`;
        });
    </script>
</body>
</html>
				
			

Steps to Use:

  1. Copy the code above and save it as an .html file.

  2. Open the file in your browser or upload it to your website.

  3. The BMI calculator will appear as a functional tool for your visitors.

Conclusion

Both methods are effective ways to integrate a BMI calculator into your website. If you use WordPress, the plugin method provides more customization options, while the HTML and CSS method is perfect for static websites. Feel free to choose the one that best fits your needs and share this tool with your audience to boost engagement!

Do you need an expert? HIRE US NOW!