WP SITES

2948 Tutorials & 189 Plugins

Scroll Indicator JS For WP Themes

Adds a scroll indicator at the bottom of your fixed header in Genesis and other WordPress themes. Only displays on desktops.

Includes the files for use in Genesis child themes & the Twenty Twenty One default theme for WordPress.

Demo Video

Shows the scroll indicator working in the Genesis Sample child theme and the Twenty twenty default theme for WordPress.

Tested using the Twenty Twenty default theme for WordPress & the Genesis Sample child theme by StudioPress.

Note : Includes 2 download folders. One for Genesis and a child theme for Twenty Twenty with the code pre-installed.

Installation Steps – Genesis

There’s 3 steps :

  1. # Upload the scroll-indicator.js file to your child themes folder like this :
  2.  

  3. # Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.
  4.  

  5. # Copy & paste the CSS to the end of your child themes style.css file and clear caching
  6.  

Installation Steps – Non Genesis Themes

If you’re using the Twenty Twenty theme for WordPress or another non Genesis theme, you can install the folder named twentytwenty-child or use the code from this folder for use in your non Genesis child theme.

If your theme includes hooks, you can use the code for Genesis and simply change the hook name from genesis_after_header to whatever your theme uses.

Also works with themes using scroll to top.

Download Folder – Genesis

Download Folder – TwentyTwenty

2 responses to “Scroll Indicator JS For WP Themes”

  1. Jonathon Fowler Avatar
    Jonathon Fowler

    Hi, can this be made to work on mobile devices too?

    1. Yes however you would need to make the site header sticky at all screen widths. CSS modifications are needed but not PHP or JS.

Was This Tutorial Helpful?