Recently I had to create a custom message that would warn users before they left the current website they were on. The user also had to have the option to cancel if they did not want to move forward with going to the outbound link. This is an awesome alternative if you don’t want to install a custom WordPress plugin.

Here is how I did it.

1. I downloaded the LeaveNotice jQuery plugin by Andrew.
2. I installed the js and css files into my child theme directory
3. I enqueued the scripts required into the head of website
4. I added the necessary code to display my message

1. Download Script and Follow Directions

Andrew creates very detailed and easy to read instructions on how to download the files and add the custom code needed to replicate it on your own website.

2. Install your scripts

I am a child theme nut. You will want to navigate via ftp to wp-content/themes/your-child-theme. Create the directory leavenotice and drop the files there. So you are dragging and dropping the 2 files (jquery.leaveNotice.css and jquery.leaveNotice.min.css) into wp-content/themes/your-child-theme/leavenotice.

3. Enqueue your scripts

There are a few ways to do this depending on what your comfortable with. There is the traditional way via functions.php. There is the genesis way via the head code in settings and you can install a plugin for head scripts. I’m going to show you how to do it the genesis way.

Inside that box that genesis gives you for custom code like google analytics and custom scripts,  your going to add this code (make sure to replace “yourwebsite.com and your-child-theme with your actually website and child theme…

[code]

[/code]

4. Call out your code!

You will also put this in the custom scripts section (head of your site or head of your page). In my particular case, I wanted all outbound links to open up this message, but this plugin allows you to target other behaviors too with lots of other functionalities and customizations.

[code]

[/code]