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.
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.
If you’re looking to add the sticky message someplace else, here’s a comprehensive list of Genesis Hooks for you to use as reference.
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.