Add a Sticky Message to Your Website

Brian Gardner

The other day I was designing a personal site and implemented a feature that I thought would be really fun to share. It’s called a Sticky Message, which I also added to my Mobile First theme that’s freely available for you to download.

If you’re wondering how to add the Sticky Message into your Genesis website, I’ve got good news for you. It’s quite simple, and I’m going to show you below.

Adding a Sticky Message

The first thing you need to do is register the Sticky Message widget area. Open up your theme’s functions.php file and place the following code:

Next you’ll need to use a function to hook the output of the Sticky Message widget area in place. In your theme’s functions.php file, place the following code:

The last function you need to add to your theme’s functions.php is the function that enqueues the JS file that is required. Place the following code:

It’s possible your theme already has a function which enqueues scripts and styles, and it’s perfectly ok to combine the wp_enqueue_script line of code in that.

Create a sticky-message.js file and use the code below. You’ll need to to add this file to your theme’s /js/ folder.

The javascript you see above will add the .reveal class to the .sticky-message element after a person has scrolled 100px down from the top of the screen.

Now that you’ve got all of the code in place, style the Sticky Message container. The CSS you see below displays what you see on the Mobile First demo.

I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.