Luthiery Laboratories

It took me about half an hour * to reverse-engineer the functionality of thousands of lines of plugin code to make the little up-arrow bug you see at the bottom-right of every page. That bug is very useful because it shoots you straight back up to the navigation menu, no matter how far down a page you might be. Here is the entire code for it:

<style type="text/css">
div#simple-to-top 
{
background-color: #007acc;
color:            white;

visibility:     visible;
position:       fixed; 
bottom:         20px;
right:          0px;
z-index:        50000; /* over everything */

border-radius: 50% 0% 0% 50%; /* 50% = circle */
opacity:       0.25;
height:        40px;
width:         40px;
padding:       10px;
}

div#simple-to-top:hover
{
opacity: 0.75;
}
</style>

<div id="simple-to-top" class="dashicons dashicons-arrow-up-alt" onClick="document.documentElement.scrollTop=document.body.scrollTop=0"></div>

* That's embarrassing. Should have taken me ten minutes, but I'm a little rusty.

That's it. You could just paste that into your theme's footer.php file, change the colors to suit yourself, and you're done. I actually split it up and put the css in my css files; this was the all-in-one development version.

In order to use WP's built-in Dashicons in the front-end, you'll also need to add the second of these two lines after the first one in your theme's functions.php:

wp_enqueue_style('genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.4.1' );

wp_enqueue_style( 'dashicons' ); //// enable dashicons in front end

This code leverages three things to do what took 1.3 megabytes of plugin plus JQuery and Genericons to do:

• css opacity and :hover make the bug usable but not obstructive
• the 'onClick' element of the div tag accomplishes everything else

OK, that's actually only two things. This points out a problem with most programmers: Everyone thinks they are creating the Sistine Chapel of code. "Simple", "lightweight", and "efficient" are things that are no longer taught, let alone applied. My little code snippet has no measurable effect on performance. You can bet that a huge bloated plugin did !

( I remember in a graduate CS class when it took me a few days and a dozen lines of code to accomplish an assignment that was intended to take all semester. That prof was really annoyed !!! )

Yes, my version is not as flashy as the plugin. The bug does not disappear when you are at the top of the page. I could easily code that up, but I think my version is better. The bug is a ghost until you mouse over it, and even then it is a little transparent. And since it is always there, you can't miss it.

This site is running faster and faster as I eliminate unnecessary fat and build functionality into the theme. This theme is less than half the size of the original twentysixteen, with far greater capabilities. All the menu structures in the sidebar and the popup are automatically generated by the theme. Soon, everything you see will be. Stay tuned for more ...