How to Make Age Calculator WordPress Plugin

Here's the complete solution for Age Calculator WordPress plugin:

1. Create a new directory age-calculator   in your WordPress plugins directory with the following structure:

age-calculator/
├── age-calculator.php
├── css/
│   └── style.css
└── js/
    └── script.js

2. age-calculator.php (Main plugin file):

<?php
/*
Plugin Name: Age Calculator
Description: A responsive age calculator with datetime picker and AJAX support
Version: 1.0
Author: Your Name
*/

// Enqueue required scripts and styles
function age_calculator_enqueue_scripts() {
    // Flatpickr CSS
    wp_enqueue_style(
        'flatpickr-css',
        'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css'
    );
    
    // FontAwesome
    wp_enqueue_style(
        'font-awesome',
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'
    );
    
    // Plugin CSS
    wp_enqueue_style(
        'age-calculator-css',
        plugin_dir_url(__FILE__) . 'css/style.css'
    );
    
    // Flatpickr JS
    wp_enqueue_script(
        'flatpickr-js',
        'https://cdn.jsdelivr.net/npm/flatpickr',
        array('jquery'),
        null,
        true
    );
    
    // Plugin JS
    wp_enqueue_script(
        'age-calculator-js',
        plugin_dir_url(__FILE__) . 'js/script.js',
        array('jquery', 'flatpickr-js'),
        null,
        true
    );
    
    // Localize script for AJAX URL
    wp_localize_script('age-calculator-js', 'ageCalculator', array(
        'ajaxurl' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'age_calculator_enqueue_scripts');

// Register shortcode
function age_calculator_shortcode() {
    ob_start(); ?>
    <div class="age-calculator-container">
        <div class="input-group">
            <input type="text" id="birthdatetime" placeholder="Select Date & Time of Birth">
            <button id="calculateAge" class="calculate-btn">
                <i class="fas fa-calculator"></i> Calculate Age
            </button>
        </div>
        <div id="ageResult" class="result-container"></div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('age_calculator', 'age_calculator_shortcode');

// AJAX handler
function calculate_age_ajax() {
    if (!isset($_POST['birthdate'])) {
        wp_send_json_error('Invalid request');
    }

    try {
        $birthdate = new DateTime($_POST['birthdate']);
        $now = new DateTime('now');
        $diff = $now->diff($birthdate);
        
        wp_send_json_success(array(
            'years'   => $diff->y,
            'months'  => $diff->m,
            'days'    => $diff->d,
            'hours'   => $diff->h,
            'minutes' => $diff->i,
            'seconds' => $diff->s
        ));
    } catch (Exception $e) {
        wp_send_json_error('Invalid date format');
    }
}
add_action('wp_ajax_calculate_age', 'calculate_age_ajax');
add_action('wp_ajax_nopriv_calculate_age', 'calculate_age_ajax');

3. js/script.js (JavaScript functionality):

jQuery(document).ready(function($) {
    // Initialize Flatpickr
    const fp = flatpickr("#birthdatetime", {
        enableTime: true,
        dateFormat: "Y-m-d H:i",
        time_24hr: true,
        minDate: "1900-01-01",
        maxDate: "today",
        defaultDate: "2000-01-01",
        locale: {
            firstDayOfWeek: 1
        }
    });

    // Handle calculate button click
    $('#calculateAge').click(function(e) {
        e.preventDefault();
        const birthdate = fp.selectedDates[0];
        
        if (!birthdate) {
            alert('Please select your birthdate and time');
            return;
        }

        $.ajax({
            url: ageCalculator.ajaxurl,
            type: 'POST',
            data: {
                action: 'calculate_age',
                birthdate: birthdate.toISOString()
            },
            success: function(response) {
                if (response.success) {
                    const age = response.data;
                    const resultHtml = `
                        <div class="age-result">
                            <h3><i class="fas fa-user-clock"></i> Your Age:</h3>
                            <p>
                                ${age.years} Years, 
                                ${age.months} Months, 
                                ${age.days} Days,<br>
                                ${age.hours} Hours, 
                                ${age.minutes} Minutes, 
                                ${age.seconds} Seconds
                            </p>
                        </div>
                    `;
                    $('#ageResult').html(resultHtml);
                } else {
                    $('#ageResult').html('<div class="error">Error calculating age</div>');
                }
            }
        });
    });
});

4. css/style.css (Styling):

.age-calculator-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

#birthdatetime {
    flex: 1;
    padding: 12px;
    border: 2px solid #007bff;
    border-radius: 5px;
    font-size: 16px;
}

.calculate-btn {
    padding: 12px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.calculate-btn:hover {
    background: #0056b3;
}

.result-container {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.age-result h3 {
    color: #2c3e50;
    margin-bottom: 15px;
}

.age-result p {
    font-size: 18px;
    line-height: 1.6;
    color: #34495e;
    margin: 0;
}

.error {
    color: #dc3545;
    padding: 10px;
    background: #ffe6e6;
    border-radius: 5px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .input-group {
        flex-direction: column;
    }
    
    .calculate-btn {
        width: 100%;
    }
}

Installation Steps:

Create a ZIP file of the  age-calculator   directory containing the three files

Log in to your WordPress admin dashboard

Go to Plugins → Add New → Upload Plugin

Upload the ZIP file and activate the plugin

Create a new page or edit an existing one

Add the shortcode  [age_calculator]   where you want the calculator to appear

Publish/update the page

Features Included:

Modern datetime picker with decade selection

AJAX-based calculations

Responsive design

FontAwesome icons

Real-time updates without page refresh

Server-side age calculation

Clean and professional UI

Error handling

Mobile-friendly layout