End of page Slide Out Box in Genesis using jQuery

In this tutorial I show how we can slide out the contents of a widget area when visitors scroll to the bottom of pages in Genesis.

In this example we are going to show Genesis eNews Extended plugin's widget in the slide out box. The box will slide back off the screen when the visitor scrolls up. Clicking the Close button will close the slide out box as expected.

The solution is based on the Ultimate NYTimes jQuery Slidebox.

Live Demo

(scroll down to the bottom of page to see opt-in slide out)

Summary of steps:

• register a custom "Slide Out Box" widget area
• load the required jQuery code in footer
• output the html of "Slide Out Box" widget area using wp_footer hook
• populate the "Slide Out Box" widget area

Step 1

a) Create a file named say, end-of-page-slide-out-box.js in child theme's js directory (create, if not existing) having the following code: