25% off ProSNIPC25OFF

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&minus;</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