Member Avatar for Surfsup

I have a simple script (below) that on click (to the element with an id of #addClass) adds a class (.switcher) to the body tag. The script uses jquery.
I would like to know if it's possible to modify this script so that when the user moves on to the next page within the site the added class remains in place? In fact the class needs to stay in place until the element with an id #removeClass has been clicked no matter how many pages the user chooses to browse through. Please be gentle with your responses - I'm not much of a coder! If it's not possible with this script (or indeed with JS) does anyone have any suggestions as to how it may be possible

<script type="text/javascript">
 
    $("#addClass").click(function () {
	  $('body').addClass('switcher');
    });
    $("#removeClass").click(function () {
	  $('body').removeClass('switcher');
    });
</script>

Thanks

Daniel

  • 2 Contributors
  • 5 Replies
  • 363 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Surfsup

Dani AI

Generated

— this is doable without changing WordPress server code. was right that the solution is to persist the "switcher" state somewhere; the simplest client-side approach is to store a small flag in localStorage and have the site-wide header read it on every page load and apply or remove the class accordingly. That keeps the behavior across page navigation until the flag is cleared.

(function($){
  $(function(){
    var key = 'site.switcher';
    try {
      if (localStorage.getItem(key) === '1') {
        $('body').addClass('switcher');
      }
    } catch (e) {
      // localStorage not available — fail silently
    }

    $('#addClass').on('click', function(){
      try { localStorage.setItem(key, '1'); } catch(e){}
      $('body').addClass('switcher');
    });

    $('#removeClass').on('click', function(){
      try { localStorage.removeItem(key); } catch(e){}
      $('body').removeClass('switcher');
    });
  });
})(jQuery);

Place that script where the header runs on every page (header.php or enqueued by the theme) and make sure it executes after jQuery is loaded. The on-load check applies the class immediately for every page; the click handlers update both the DOM and the stored flag. If some pages lack the #addClass/#removeClass controls, the stored flag still controls the class on load.

Notes and troubleshooting: localStorage is origin-scoped and persists until cleared, so it stays across page loads in the same browser but will not sync across devices — for cross-device persistence the state must be stored server-side. Private browsing or browser settings can block/clear storage, so test in normal and private windows. If the class doesn't stick, open dev tools and inspect localStorage for the key, check the console for JS errors, and confirm the script runs after jQuery.

Recommended Answers

All 5 Replies

Member Avatar for Airshow

Surfsup,

Are these pages hard-coded HTML or dynamically built with server-side scripting?

If the latter, then what?

Airshow

Member Avatar for Surfsup

It's Wordpress site. The header file is sitewide so won't change throughout the site.
Does this help?

Member Avatar for Airshow

Mmm, the solution lies in saving the switcher false|true state somewhere. There are three basis choices; cookie, PHP $_session var, database. Each has its own scope.

Trouble is, WordPress has its own way of doing just about everything. I would suggest cookie but, due to cookie constraints, that may cut across WordPress's standard use of cookies. You really need a WordPress expert or to get lucky with a search in the WordPress documentation/forums.

(Before someone mentions it, a fourth option is to send the "switcher=0|1" on the url querystring merry-go-round but that would need to involve every internal url in the whole site so don't even think about it unless WP makes specific provision for such).

Sorry, it's not a gentle answer and sorry I can't help further.

Airshow

Member Avatar for Surfsup

Thanks - it sound as though it may be possible - which is a great start! Would you mind posting an code example using of one of the methods you suggest and I'll give it a whirl?

Member Avatar for Surfsup

Ok - so it sounds as though it is possible - however I have little/no chance of solving this without assistance. Can I get any help with this - pretty please... ?
Thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.