Hider – Remove Elements via URL Parameters Plugin

Origin Story

About a week ago I posted about a theme that was designed to integrate into the LMS via iframe embeds. The goal was to strip out extra things like headers and sidebars that were confusing or unwanted. You’d still have a normal WordPress site at your regular URL but would be able to selectively embed chunks of it in the LMS in whatever way you desired.

That is the key that I don’t think I stressed enough. You could easily add CSS display:none and whittle you site down via the customizer but I wanted to be able to do that only when embedding the site (or linking to the stripped down version).

After some back and forth conversation on Twitter I decided to write a simpler version as a plugin rather than a theme so it could be used more broadly.

The plugin is here if you want to give it a shot.

The Pieces

To make things simpler I wanted all the divs to have an ID. I considered giving an ID to everything but figured in 95% of the cases the major pieces of the theme would be in divs.

That’s an amazingly easy thing to do in javascript. I could have made this even more concise but figured this would be easier to understand. The first function gets all the divs on the page and the second adds an ID if one doesn’t already exist.

function activateAllDivs(){
	allDivs = document.querySelectorAll('div')
	allDivs.forEach(function(div, index) {
	 idEverything(div, index)
	});
}

//make sure everything has an ID
function idEverything(div, index){
   if (div.id){   
    console.log(div.id);//got an id? great moving on . . . 
  } else {
    div.id = 'newId-'+index; //no id? well that's not an option
  }
}

Now we need to read the div IDs in the URL that we would like to hide. I loop through the array of IDs and set the inline CSS to diplay: none. I did that to make sure it’d override any other inline CSS after seeing that fail on a theme or two when I just added a class.

window.onload = function(){
  const urlParams = new URLSearchParams(window.location.search);
  const hide = urlParams.get('hide');//get hide parameters
  let hideArray  = hide.split(',');//make comma delimited set of IDs into array
  
  hideArray.forEach(function(el){
    document.getElementById(el).style.display = 'none' // was using add class but moved to inline for more aggression
  })
  activateAllDivs();
}

That’s all there is to it. There are a bunch of other things I half-built. I had it set so that rolling over divs changed their color so you could see better what you were planning to remove. I was going to set them to set the URL onclick events with the ID of the thing clicked. I was going to generate the embed code as well for cut/paste. I may still do those things but given how easy the Canvas API is looking, it feels like I’d need a more directly interested audience to bother doing much more. I like this idea though and it gave me a chance to play with some concepts that I am confident we’ll use in other ways.