There's valid psychology that validates the notion that if we provide an individual of progress required to complete a task, they're far more likely to complete it. This principle is the motivation for progress bars on forms to indicate what effort is required for completion... and they work.
WordPress themes now come with shortcode that'll render circular (or other) progress bars on your website for no good reasons other than fancy-pants exhibitionism and it annoys us to no end - don't use them unless they serve a purpose.
One style of progress bar that we believe is truly beneficial is a page scroll progress bar to indicate a page reading position with relation to the end of a document. The indicator creates a 'temporal expectancy' and give us motivation to scroll through to completion (for a little dopamine rush, apparently).
In this article we'll show you how to create the most basic of scroll-bars fixed to the footer of your WordPress website. To see the effect, scroll down on this page. We're building our own full-featured solution for our client area and this was the first example we played with (this code isn't overly efficient). However, the code works well and navigates the complexities often associated with incorporating this feature.
progresstag simply because it's semantically accurate) will make its way into a client function shortly.
The height, color, and background color of the progress bar may all be altered to your liking.
Copy and paste the WordPress function into your theme's
functions.php file or, if you sensibly have one installed, your custom functions plugin.
- We use inline styling for the progress bar. You'll likely want to alter the
heightof the scrollbar,
background(resting color), and scoll
backgroundcolor (inner div).
- Set the scrollbar to the top of your page by changing
- See also: "Add a Fixed (Floating) Footer or Header Bar in WordPress in One Line of Code".
- If you have a long footer height, consider factoring this into your window height calculation to have it excluded.