Description
Use our free online Age Calculator to find your exact age in years, months, days, hours, and seconds. Quickly calculate your birthday or time between dates.
Add the calculator to any page, post or widget area with the shortcode [ci_age_calculator].
What you enter: Date of Birth, Age at the Date of.
What you get: Age, shown in years, months, weeks, days, hours, minutes, seconds.
Features:
- Works as soon as it is activated: no account, no API key and no settings page.
- Calculates in your visitor’s browser. Nothing they type is sent to calculator.io or anywhere else, and the plugin loads no ads, trackers or external scripts.
- Responsive: the form and the results sit side by side on wide pages and stack on narrow ones. The frame resizes itself to fit the calculator.
- Optional light, dark or automatic (follows the visitor’s system setting) theme, a custom accent colour and a maximum width, all set in the shortcode.
- The calculator runs in an iframe, so your theme’s styles cannot break it and it cannot break your theme.
More about this calculator: https://www.calculator.io/age-calculator/
Usage
Add the Age Calculator shortcode to your page, post or sidebar:
[ci_age_calculator]
Or add the following code to your template where you would like the Age Calculator to appear:
<?php echo do_shortcode( '[ci_age_calculator]' ); ?>
All attributes are optional:
title–1(default) shows the calculator heading with its icon,0hides it. Example:[ci_age_calculator title="0"]theme–light(default),dark, orautoto follow the visitor’s light/dark system setting. Example:[ci_age_calculator theme="auto"]accent– an accent colour for buttons and highlights, as a hex value. Example:[ci_age_calculator accent="#2563eb"]max_width– the widest the calculator may be: a number followed bypx,%orrem. The calculator is centred when it is narrower than its column. Example:[ci_age_calculator max_width="720px"]
Attributes can be combined: [ci_age_calculator title="0" theme="auto" accent="#2563eb" max_width="720px"]
Source code and libraries
The plugin’s own JavaScript and CSS are shipped unminified and human-readable: assets/js/*.js (except assets/js/lib/), assets/css/main.css, assets/css/ci-widget.css, assets/css/ci-embed.css and the PHP file. main.css is the compiled, unminified stylesheet of calculator.io. The calculator is also published on the calculator.io website: https://www.calculator.io/age-calculator/
Third-party libraries bundled in assets/js/lib/. Where a file is minified, the readable source is available at the upstream address:
- math.js 3.37.1 (Apache-2.0) –
assets/js/lib/math.min.js, minified build. Source: https://github.com/josdejong/mathjs - marked 15.0.12 (MIT) –
assets/js/lib/marked.min.js, minified build. Source: https://github.com/markedjs/marked - Inputmask 5.0.9-beta.70 (MIT) –
assets/js/lib/input-mask.min.js, minified build. Source: https://github.com/RobinHerbots/Inputmask - lazysizes 5.3.2 (MIT) –
assets/js/lib/lazysizes.js. Source: https://github.com/aFarkas/lazysizes - Air Datepicker 3.3.0 (MIT) –
assets/js/lib/air-datepicker.js. Source: https://github.com/t1m0n/air-datepicker - Inter font (SIL Open Font License 1.1) –
assets/fonts/inter-v20-latin.woff2. Source: https://github.com/rsms/inter
Screenshots
Installation
- Upload the /ci-age-calculator/ folder to the /wp-content/plugins/ directory, or install the plugin from the Plugins screen.
- Activate the Age Calculator plugin through the “Plugins” menu in WordPress.
- Add the
[ci_age_calculator]shortcode to a page or post.
FAQ
-
How do I add the calculator to a page?
-
Add the shortcode
[ci_age_calculator]to a page or post. In the block editor use a Shortcode block. In a theme template use<?php echo do_shortcode( '[ci_age_calculator]' ); ?>. -
Which shortcode attributes are available?
-
title (1 or 0),
theme(light, dark or auto),accent(a hex colour such as #2563eb) andmax_width(for example 720px, 80% or 40rem). See the Usage section for examples. Invalid values are ignored and the default is used instead. -
How do I get a dark calculator?
-
Use
theme="dark"for always dark, ortheme="auto"to follow the visitor’s light/dark system setting. The default,theme="light", keeps the calculator light on any background. -
Can I hide the heading?
-
Yes. Use
title="0"and the heading with the calculator’s icon is not printed, so you can write your own. -
Does the plugin send data anywhere?
-
No. The calculation happens in the visitor’s browser, nothing they enter leaves the page, and the plugin makes no requests to calculator.io or any other external service. It sets no cookies and loads no ads or trackers.
-
The calculator is the wrong height or has a scrollbar.
-
The frame adjusts its height automatically while the page is open. If your theme or a caching or optimisation plugin removes scripts from the page, the frame keeps a default height; exclude the plugin’s
ci-embed.jsfile from script optimisation. -
How do I calculate my exact age?
-
Enter your date of birth in the “Date of Birth” field and the date you want to measure to in the “Age at the Date of” field, then click “Calculate.” The tool returns your exact age in years, months, days, hours, minutes, and seconds. Including your birth hour and minute yields a more precise result than the day, month, and year alone.
-
How old am I in days, hours, and seconds?
-
An online age calculator converts the gap between your birth date and today into days, hours, minutes, and seconds automatically. This bypasses the limitations of a standard calculator, which struggles with time because months vary in length from 28 to 31 days and leap years add an extra day, February 29.
-
Do I really have more than one age?
-
Yes. Beyond your chronological age you also have a biological, psychological, social, and mental age. Chronological age counts the exact time since birth, while the others reflect physical wear on your body, how old you feel and act, your life milestones versus your peers, and your cognitive performance.
-
What is chronological age?
-
Chronological age, sometimes called “passport age,” is the exact number of years, months, and days that have passed since a person was born. In the modern system a person is considered 0 years old at birth, and one year is added on each subsequent birthday.
-
What is Korean age?
-
Korean age comes from a traditional Asian counting system in which a child is considered one year old on the day they are born, with a year added on New Year’s Day rather than on the actual birthday. Because of this, a baby born on December 31 would turn two the very next day. Today Korea uses the international chronological system for official and legal purposes.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“CI Age Calculator” is open source software. The following people have contributed to this plugin.
Contributors
Translate “CI Age Calculator” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.1.0
- New shortcode attributes:
title,theme(light, dark, auto),accentandmax_width - Responsive layout: form and results wrap into one column on narrow pages, wide tables scroll inside their own box
- The frame now follows the calculator’s height when it changes or the window is resized
- Fixed the missing heading icon
- The plugin’s JavaScript and CSS are now shipped unminified
- The WordPress-side script and styles load only on pages that use the shortcode
1.0.1
- Removed leftover files of earlier plugin versions
- Tested up to WordPress 7.1
1.0.0
- Initial release of Age Calculator