how to create & Design Body Mass Index BMI Calculator Tool ?

Here’s a BMI Calculator Tool in PHP that calculates the Body Mass Index (BMI) based on the user’s height and weight. You can integrate this tool into WordPress easily using a custom plugin or a PHP code execution plugin.

1. PHP Code for BMI Calculator Tool

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="BMI Calculator Tool to calculate Body Mass Index (BMI).">
    <meta name="keywords" content="BMI Calculator, PHP, Body Mass Index, Health Tool">
    <title>BMI Calculator Tool</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
        }
        form {
            margin-top: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="number"], input[type="submit"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input[type="submit"] {
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }
        .result {
            font-size: 18px;
            text-align: center;
            color: #333;
        }
        .error {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>BMI Calculator Tool</h1>
    <p>Calculate your Body Mass Index (BMI) based on your height and weight.</p>

    <form method="post">
        <label for="weight">Enter your weight (in kilograms):</label>
        <input type="number" id="weight" name="weight" step="0.1" placeholder="Weight in kg" required>

        <label for="height">Enter your height (in meters):</label>
        <input type="number" id="height" name="height" step="0.01" placeholder="Height in meters" required>

        <input type="submit" name="calculate_bmi" value="Calculate BMI">
    </form>

    <?php
    if (isset($_POST['calculate_bmi'])) {
        $weight = $_POST['weight'];
        $height = $_POST['height'];

        if ($weight > 0 && $height > 0) {
            // BMI calculation formula
            $bmi = $weight / ($height * $height);
            $bmi = round($bmi, 2); // Round to 2 decimal places

            // Determine BMI category
            if ($bmi < 18.5) {
                $category = "Underweight";
            } elseif ($bmi >= 18.5 && $bmi < 24.9) {
                $category = "Normal weight";
            } elseif ($bmi >= 25 && $bmi < 29.9) {
                $category = "Overweight";
            } else {
                $category = "Obese";
            }

            echo "<div class='result'>Your BMI is: $bmi ($category)</div>";
        } else {
            echo "<div class='error'>Please enter valid weight and height values.</div>";
        }
    }
    ?>
</div>

</body>
</html>

2. Integrating the BMI Calculator into WordPress

Method 1: Create a Custom Plugin

This method lets you create a plugin and add the BMI Calculator as a shortcode.

Steps to Create the Plugin:

Create a Plugin Folder:

Navigate to /wp-content/plugins/ via your FTP client or file manager.
Create a folder called bmi-calculator-tool.

Create the Plugin File:

Inside the bmi-calculator-tool folder, create a file named bmi-calculator.php.
Add the following code to bmi-calculator.php:

   <?php
   /*
   Plugin Name: BMI Calculator Tool
   Description: A simple BMI (Body Mass Index) calculator tool.
   Version: 1.0
   Author: Your Name
   */

   // Function to display the BMI calculator tool
   function bmi_calculator_tool_shortcode() {
       ob_start(); // Capture the output
       ?>

       <div class="container">
           <h1>BMI Calculator Tool</h1>
           <p>Calculate your Body Mass Index (BMI) based on your height and weight.</p>

           <form method="post">
               <label for="weight">Enter your weight (in kilograms):</label>
               <input type="number" id="weight" name="weight" step="0.1" placeholder="Weight in kg" required>

               <label for="height">Enter your height (in meters):</label>
               <input type="number" id="height" name="height" step="0.01" placeholder="Height in meters" required>

               <input type="submit" name="calculate_bmi" value="Calculate BMI">
           </form>

           <?php
           if (isset($_POST['calculate_bmi'])) {
               $weight = $_POST['weight'];
               $height = $_POST['height'];

               if ($weight > 0 && $height > 0) {
                   // BMI calculation formula
                   $bmi = $weight / ($height * $height);
                   $bmi = round($bmi, 2); // Round to 2 decimal places

                   // Determine BMI category
                   if ($bmi < 18.5) {
                       $category = "Underweight";
                   } elseif ($bmi >= 18.5 && $bmi < 24.9) {
                       $category = "Normal weight";
                   } elseif ($bmi >= 25 && $bmi < 29.9) {
                       $category = "Overweight";
                   } else {
                       $category = "Obese";
                   }

                   echo "<div class='result'>Your BMI is: $bmi ($category)</div>";
               } else {
                   echo "<div class='error'>Please enter valid weight and height values.</div>";
               }
           }
           ?>

       </div>

       <?php
       return ob_get_clean(); // Return the output
   }

   // Register the shortcode [bmi_calculator_tool]
   add_shortcode('bmi_calculator_tool', 'bmi_calculator_tool_shortcode');

Activate the Plugin:

Go to Plugins > Installed Plugins in your WordPress Admin Dashboard.
Find the BMI Calculator Tool plugin and click Activate.

Use the Shortcode:

To display the BMI calculator on any page or post, use the shortcode:

   [bmi_calculator_tool]

Method 2: Using a PHP Code Plugin

You can also use a PHP code execution plugin to add this tool directly to posts or pages.

Steps:

Install a PHP Code Execution Plugin:

Go to Plugins > Add New.
Search for “Insert PHP Code Snippet” and install the plugin.
Activate it.

Create a PHP Snippet:

In the plugin’s settings, create a new PHP snippet and paste the BMI Calculator Tool code from Step 1.

Use the Snippet:

After creating the snippet, you will get a shortcode like [insert_php_snippet id="1"].
You can place this shortcode on any page or post to display the tool.

By following either method, you’ll have a BMI Calculator Tool integrated into your WordPress site, allowing users to calculate their BMI based on their height and weight inputs.