# Text Size Buttons Shortcode

> Adds a [text_size_controls] shortcode with "A-", "A" and "A+" buttons that make the whole site's text smaller or larger for that visitor, remembered on their device.

- Type: PHP
- Runs: Frontend only
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: font-size, shortcode, readability
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-font-size-controls/

## Code

```php
// Scaling steps in percent of the browser's default font size.
$wpide_text_steps = array( 90, 100, 112, 125, 140 );

add_shortcode( 'text_size_controls', function () use ( $wpide_text_steps ) {
    static $printed = false;

    $html = '<div class="wpide-textsize" role="group" aria-label="Text size">'
        . '<button type="button" data-step="-1" aria-label="Smaller text">A&minus;</button>'
        . '<button type="button" data-step="0" aria-label="Default text size">A</button>'
        . '<button type="button" data-step="1" aria-label="Larger text">A+</button>'
        . '</div>';

    if ( ! $printed ) {
        $printed = true;
        $html   .= '<style>.wpide-textsize{display:inline-flex;gap:4px}.wpide-textsize button{min-width:44px;min-height:44px;font-weight:700;cursor:pointer}</style>';
        $html   .= '<script>(function(){var steps=' . wp_json_encode( array_values( $wpide_text_steps ) ) . ',key="wpideTextStep",def=steps.indexOf(100),i=def;try{var s=parseInt(localStorage.getItem(key),10);if(!isNaN(s)&&steps[s]){i=s;}}catch(e){}function apply(){document.documentElement.style.fontSize=steps[i]===100?"":steps[i]+"%";try{localStorage.setItem(key,i);}catch(e){}}apply();document.addEventListener("click",function(e){var b=e.target.closest(".wpide-textsize button");if(!b){return;}var d=parseInt(b.getAttribute("data-step"),10);i=d===0?def:Math.max(0,Math.min(steps.length-1,i+d));apply();});})();</script>';
    }

    return $html;
} );
```

## Notes

Works best with themes that size text in rem or em; pixel-based themes only scale partly.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Text Size Buttons Shortcode" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/