Font-Size Switcher
Adds A-/A+ buttons to let visitors increase or decrease the base font size, saving preference to localStorage.
Module3 parts · by SnipCraft
PHPButtons
php
<?php
if ( ! function_exists( 'scseed_font_switcher_buttons' ) ) {
function scseed_font_switcher_buttons() {
echo '<div id="scseed-font-switcher" aria-label="' .
esc_attr__( 'Adjust font size', 'scseed' ) . '" role="group">' .
'<button id="scseed-font-decrease" aria-label="' . esc_attr__( 'Decrease font size', 'scseed' ) . '">A−</button>' .
'<button id="scseed-font-reset" aria-label="' . esc_attr__( 'Reset font size', 'scseed' ) . '">A</button>' .
'<button id="scseed-font-increase" aria-label="' . esc_attr__( 'Increase font size', 'scseed' ) . '">A+</button>' .
'</div>';
}
add_action( 'wp_footer', 'scseed_font_switcher_buttons' );
function scseed_font_switcher_restore() {
echo '<script>
(function(){
var saved = parseInt(localStorage.getItem("scseed_font_step") || "0", 10);
if (saved !== 0) {
document.documentElement.style.fontSize = (16 + saved * 2) + "px";
}
})();
</script>';
}
add_action( 'wp_head', 'scseed_font_switcher_restore', 1 );
}CSSStyles
css
#scseed-font-switcher {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 9000;
display: flex;
flex-direction: column;
gap: 2px;
}
#scseed-font-switcher button {
display: block;
width: 34px;
height: 34px;
background: #fff;
border: 1px solid #ddd;
border-left: none;
cursor: pointer;
font-weight: 700;
color: #333;
transition: background 0.15s;
line-height: 1;
padding: 0;
}
#scseed-font-switcher button:first-child { border-radius: 0 4px 0 0; }
#scseed-font-switcher button:last-child { border-radius: 0 0 4px 0; }
#scseed-font-switcher button:hover { background: #f0f0f0; }
@media (max-width: 600px) {
#scseed-font-switcher { display: none; }
}JavaScriptScript
js
(function () {
'use strict';
var KEY = 'scseed_font_step';
var MIN = -3;
var MAX = 5;
var BASE = 16;
var STEP_PX = 2;
var step = parseInt(localStorage.getItem(KEY) || '0', 10);
function apply() {
document.documentElement.style.fontSize = (BASE + step * STEP_PX) + 'px';
try { localStorage.setItem(KEY, step); } catch (e) {}
}
var dec = document.getElementById('scseed-font-decrease');
var rst = document.getElementById('scseed-font-reset');
var inc = document.getElementById('scseed-font-increase');
if (!dec || !rst || !inc) { return; }
dec.addEventListener('click', function () { if (step > MIN) { step--; apply(); } });
rst.addEventListener('click', function () { step = 0; apply(); });
inc.addEventListener('click', function () { if (step < MAX) { step++; apply(); } });
})();#frontend#ux#accessibility#typography