Title: CI Percentage Calculator
Author: Calculator.io
Published: <strong>November 10, 2026</strong>
Last modified: November 10, 2026

---

Search plugins

![](https://ps.w.org/ci-percentage-calculator/assets/icon-256x256.png?rev=3794956)

# CI Percentage Calculator

 By [Calculator.io](https://profiles.wordpress.org/calculatorio/)

[Download](https://downloads.wordpress.org/plugin/ci-percentage-calculator.1.1.0.zip)

 * [Details](https://wordpress.org/plugins/ci-percentage-calculator/#description)
 * [Reviews](https://wordpress.org/plugins/ci-percentage-calculator/#reviews)
 *  [Installation](https://wordpress.org/plugins/ci-percentage-calculator/#installation)
 * [Development](https://wordpress.org/plugins/ci-percentage-calculator/#developers)

 [Support](https://wordpress.org/support/plugin/ci-percentage-calculator/)

## Description

Instantly calculate percentages, percentage change, and percent differences with
our free Percentage Calculator. Get fast, accurate results in seconds!

Add the calculator to any page, post or widget area with the shortcode `[ci_percentage_calculator]`.

**What you enter:** Value 1, Value 2.

**What you get:** Percentage.

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/percentage-calculator/](https://www.calculator.io/percentage-calculator/)

### Usage

Add the Percentage Calculator shortcode to your page, post or sidebar:

    ```
    [ci_percentage_calculator]
    ```

Or add the following code to your template where you would like the Percentage Calculator
to appear:

    ```
    <?php echo do_shortcode( '[ci_percentage_calculator]' ); ?>
    ```

All attributes are optional:

 * `title` – `1` (default) shows the calculator heading with its icon, `0` hides
   it. Example: `[ci_percentage_calculator title="0"]`
 * `theme` – `light` (default), `dark`, or `auto` to follow the visitor’s light/
   dark system setting. Example: `[ci_percentage_calculator theme="auto"]`
 * `accent` – an accent colour for buttons and highlights, as a hex value. Example:`[
   ci_percentage_calculator accent="#2563eb"]`
 * `max_width` – the widest the calculator may be: a number followed by `px`, `%`
   or `rem`. The calculator is centred when it is narrower than its column. Example:`[
   ci_percentage_calculator max_width="720px"]`

Attributes can be combined: `[ci_percentage_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/percentage-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

[⌊The Percentage Calculator input form: Value 1, Value 2.⌉⌊The Percentage Calculator
input form: Value 1, Value 2.⌉[

The Percentage Calculator input form: Value 1, Value 2.

[⌊The Percentage Calculator results: Percentage.⌉⌊The Percentage Calculator results:
Percentage.⌉[

The Percentage Calculator results: Percentage.

## Installation

 1. Upload the /ci-percentage-calculator/ folder to the /wp-content/plugins/ directory,
    or install the plugin from the Plugins screen.
 2. Activate the Percentage Calculator plugin through the “Plugins” menu in WordPress.
 3. Add the `[ci_percentage_calculator]` shortcode to a page or post.

## FAQ

### How do I add the calculator to a page?

Add the shortcode `[ci_percentage_calculator]` to a page or post. In the block editor
use a Shortcode block. In a theme template use `<?php echo do_shortcode( '[ci_percentage_calculator]');?
>`.

### Which shortcode attributes are available?

title (1 or 0), `theme` (light, dark or auto), `accent` (a hex colour such as #2563eb)
and `max_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, or `theme="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.js` file from script optimisation.

### How do I calculate the percentage of a number?

Multiply the number by the percentage and divide by 100. For example, 20% of 3,000
is (20 ÷ 100) × 3,000 = 600, and the remaining 80% is (80 ÷ 100) × 3,000 = 2,400.

### How do I find what percent one number is of another?

Divide the first number by the total and multiply by 100. For instance, a $3,000
profit on a $12,000 investment is (3,000 ÷ 12,000) × 100% = 25%, meaning it equals
a quarter of the total.

### How do I calculate a percentage increase between two numbers?

Subtract the starting value from the ending value, divide by the starting value,
and multiply by 100. Going from $12,000 to $15,000 is (15,000 − 12,000) ÷ 12,000
× 100% = 25%, so the amount grew by 25%.

### How do I calculate a percentage decrease?

Subtract the smaller value from the original, divide by the original, and multiply
by 100. If profit falls from $3,000 to $2,700, that is (3,000 − 2,700) ÷ 3,000 ×
100% = 10%, a 10% decrease.

### Does the order of the two numbers matter when finding the percentage difference?

Yes, the order changes the result. Entering $12,000 then $15,000 gives a 25% increase,
while entering $15,000 then $12,000 evaluates a drop and gives a 20% decrease.

## Reviews

There are no reviews for this plugin.

## Contributors & Developers

“CI Percentage Calculator” is open source software. The following people have contributed
to this plugin.

Contributors

 *   [ Calculator.io ](https://profiles.wordpress.org/calculatorio/)

[Translate “CI Percentage Calculator” into your language.](https://translate.wordpress.org/projects/wp-plugins/ci-percentage-calculator)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/ci-percentage-calculator/),
check out the [SVN repository](https://plugins.svn.wordpress.org/ci-percentage-calculator/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/ci-percentage-calculator/)
by [RSS](https://plugins.trac.wordpress.org/log/ci-percentage-calculator/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.1.0

 * New shortcode attributes: `title`, `theme` (light, dark, auto), `accent` and `
   max_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 Percentage Calculator

## Meta

 *  Version **1.1.0**
 *  Last updated **3 days ago**
 *  Active installations **Fewer than 10**
 *  WordPress version ** 5.0 or higher **
 *  Tested up to **7.1.4**
 *  PHP version ** 7.4 or higher **
 * Tag
 * [percentage calculator](https://wordpress.org/plugins/tags/percentage-calculator/)
 *  [Advanced View](https://wordpress.org/plugins/ci-percentage-calculator/advanced/)

## Ratings

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/ci-percentage-calculator/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/ci-percentage-calculator/reviews/)

## Contributors

 *   [ Calculator.io ](https://profiles.wordpress.org/calculatorio/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/ci-percentage-calculator/)