Blur WordPress User Information Plugin

After seeing Taylor go to the trouble of making a WordPress plugin and then getting annoyed with turning off/on my own Stylebot version, I made a slightly more sophisticated plugin. The video above shows how it works. It’s available on GitHub.

It does illustrate a few things people may want to know about regarding WordPress plugins.

The few lines below are the entirety of PHP. It’s worth noting that WordPress really prefers if you enqueue javascript and css. This makes sure the scripts load at the right time and gives you some options that are handy (versions, dependencies, header vs footer). You can echo css/js out in various ways, but this path is more robust and avoids you having to inject content in ways that are more hassle to write and maintain in the long-run.

There is a particular hook (admin_enqueue_scripts) to enqueue scripts (yes, both js and css and yes it’s a confusing name) on the admin side. That’s what you see going on below. We’re adding both css and javascript but only in the admin view as opposed to the front of the site.

function blurry_enqueue_custom_admin_style() {
        wp_register_style( 'blurry_css', plugin_dir_url(__FILE__) . 'css/blurry.css', false, '1.0.0' );
        wp_enqueue_style( 'blurry_css' );
        wp_enqueue_script('blurry_js', plugin_dir_url(__FILE__) . 'js/blurry.js','','1.0.2', true);
}
add_action( 'admin_enqueue_scripts', 'blurry_enqueue_custom_admin_style' );

Now everything else is just creating a button that allows us to add/remove a class that blurs the right stuff. The javascript below is pretty commented up.

//make sure we've got a table that has either the class .users-network or .users
if (document.querySelector('.users-network, .users')){

	//turn blur on by default 
	const table = document.querySelector('.users-network, .users');//find table
	table.classList.add('blur-me');//add .blur-me class to table
	
        //make our blur button
	let btn = document.createElement("button");
	btn.innerHTML = "Status: blurred";//set text
	btn.classList.add('blurry-button', 'active');//set classes for the button
	document.body.appendChild(btn);//add the button to the page
	
	//make our button respond to clicks to add/remove class that blurs things
	btn.addEventListener("click", function (){
		table.classList.toggle('blur-me');//toggle .blur-me class on the table
		btn.classList.toggle('active');//toggle .active class on the button
		if(btn.innerHTML === "Status: blurred"){
			btn.innerHTML = "Status: clear";//change the button text
		} else {
			btn.innerHTML = "Status: blurred";//change the button text
		}
	})
}

The CSS isn’t too fancy but it makes the whole thing work. When the javascript adds the .blur-me class, then the CSS inheritance works and blurs stuff. That’s all in the first chunk of CSS. The rest is just making the button behave how I wanted.

 .blur-me .email a, 
 .blur-me .column-username strong, 
 .blur-me td.column-name {
        filter: blur(4px);
    }

.blurry-button {
    position: fixed;
    bottom:  10px;
    right:  20px;
    background: yellow;
    padding:  5px 10px;
    border:  none;
    border-radius: 50px;
    width:  120px;
    box-shadow: 1px 1px 2px #424242;
    transition: all .3s ease;
}

.blurry-button.active {
    background: lime;
}

.blurry-button:hover {
    cursor: pointer;
    box-shadow: 2px 2px 3px #424242;
}