Increase Conversions with a Slide Down Optin

Thesis Feature Box

No matter what your reason for blogging and running a website, chances are that you want to increase the newsletter conversions for your website. We looked at Pippity, a premium pop-up plugin for WordPress, but it didn’t quite give us the functionality we wanted on Art of Blog.

For Art of Blog, we wanted an opt-in that would slide all of the content down instead of displaying over the content. For that, we rolled our own custom solution.

The Code

Let’s get down to business with the code. As usual, we rolled our custom solution for Thesis. I will explain how to customize this for Non-Thesis WordPress theme later in the post.

Thesis Solution

For Thesis users, we start out by adding code to the feature box. The first thing you need to do for Thesis is to activate your feature box (this option is in your Thesis Design Options) – We used sitewide and full-width above content and sidebars for Art of Blog.

Next, navigate to your custom_functions.php file and enter the PHP code below. This code will display our feature box code anywhere that is not the home page.

function myFeatureBox () { 
	if (!is_page("home") ){ ?>
		<div class="format_text">
				<p>Your unique message would go in here</p>
		</div>
		<div id="hideOpt">x - No, I don't want to subscribe to your blog.</div>
<?php }
}

add_action('thesis_hook_feature_box' , 'myFeatureBox');

Now that we’ve got some code showing in our feature box, we’re going to use a bit of CSS and jQuery to make our feature box actually slide. Let’s start with jQuery. Go ahead and create a custom.js file in your custom folder. Also, you need to be sure to embed this new custom.js in your website. You can do this by going to your Thesis Design Options and add this line of code within embedded scripts.

<script src="/wp-content/themes/thesis_184/custom/custom.js"></script>

Now, if you just want a feature box that will slide down every time someone visits a page of your website, we can do that with just a few lines of code. That code is below:

jQuery(document).ready(function($) {
     $("#feature_box").delay(2000).slideDown("slow");
});

This piece of code will slowly slide down your feature box after delaying for 2,000 milliseconds. But, let’s be real. If someone visits your website, and they never have the option to get rid of that slide down optin… They may try to nuke your website. So, let’s give your visitors an option to hide that slide down! :)

To do this, we’re going to use a jQuery cookie plugin, and we’re going to have an area where visitors can click and choose to hide our slide down optin. We will then test whether there is a cookie before we slide down the optin.

*Note: If you use this code below, do not use the jQuery snippet above.

/*!
 * jQuery Cookie Plugin
 * https://github.com/carhartl/jquery-cookie
 *
 * Copyright 2011, Klaus Hartl
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.opensource.org/licenses/GPL-2.0
 */
(function($) {
    $.cookie = function(key, value, options) {

        // key and at least value given, set cookie...
        if (arguments.length > 1 && (!/Object/.test(Object.prototype.toString.call(value)) || value === null || value === undefined)) {
            options = $.extend({}, options);

            if (value === null || value === undefined) {
                options.expires = -1;
            }

            if (typeof options.expires === 'number') {
                var days = options.expires, t = options.expires = new Date();
                t.setDate(t.getDate() + days);
            }

            value = String(value);

            return (document.cookie = [
                encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value),
                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
                options.path    ? '; path=' + options.path : '',
                options.domain  ? '; domain=' + options.domain : '',
                options.secure  ? '; secure' : ''
            ].join(''));
        }

        // key and possibly options given, get cookie...
        options = value || {};
        var decode = options.raw ? function(s) { return s; } : decodeURIComponent;

        var pairs = document.cookie.split('; ');
        for (var i = 0, pair; pair = pairs[i] && pairs[i].split('='); i++) {
            if (decode(pair[0]) === key) return decode(pair[1] || ''); // IE saves cookies with empty string as "c; ", e.g. without "=" as opposed to EOMB, thus pair[1] may be undefined
        }
        return null;
    };
})(jQuery);

jQuery(document).ready(function($) {
     if( $.cookie('first') == null ) { 
          $("#feature_box").delay(2000).slideDown("slow");
     }
     $('#hideOpt').click(function(){
          $.cookie( 'first', '1',  { expires: 7, path: '/' } );
          $("#feature_box").slideUp("slow");
     });
});

Using this code above, we will give the visitor an option to hide our slide down optin. Whenever they click our div, #hideOpt, we will drop a cookie called first, with a value of 1, and set the expires date to a week away. Don’t worry about the value you assign the cookie. When we test for the cookie, we are testing to see if there is any cookie at all.

You can modify this code to your liking. You can change the expires date from a week to a year by typing in 365 instead of 7. You can change the name of the cookie. You can even change how long to delay before sliding down the optin.

That should do for the functional parts of your slide down optin. But, you will most likely be using some css to style your feature box. I will give you just a little bit that we use on Art of Blog.

#feature_box{
	position: relative;
	display: none;
	border-top: 2px solid #E0E0E0;
	border-bottom: 2px solid #e0e0e0;
}
#hideOpt{
	position: absolute;
	bottom: 10px;
	right: 20px;
	color: #999999;
	cursor: pointer;
}

This is some of the code we use on Art of Blog to style our feature box. I’d like to point out a few lines of code. On Art of Blog we wanted #hideOpt at the bottom right of #feature_box. To do this we changed the feature box’s positioning to relative and the hideOpt’s positioning to absolute. This allows us to position #hideOpt within #feature_box. The other line of CSS i’d like to point out is we are using a pointer cursor on #hideOpt. This gives our visitors a visual cue when they hover over the div.

You will most likely want to add your own CSS to get your feature box to your liking, but this will get you rolling.

Art of Blog Feature Box Screenshot

 General WordPress Solution

If you are not running Thesis, then the code to use a slide down optin will be slightly different for you. To begin with, enter the PHP code below in your theme where needed.

if (!is_page("home") ){ ?>
	<div id="feature_box">
		<p>Your unique message would go in here</p>
	</div>
	<div id="hideOpt">x - No, I don't want to make money from my blog</div>
<?php }

Depending on your theme, you may not need to test for the home page as we do above. You can use the same jQuery that we used above. But, you will need to make the script call in your theme’s footer. Use the code below in footer.php.

<script src="/wp-content/themes/thesis_184/custom/custom.js"></script>

As far as CSS goes, I would add the CSS above to the bottom of your theme’s CSS file. As above, you will most likely want add some CSS to style the form to your liking.

In Closing

There is a lot of code above, and this is a fairly involved tutorial. If you have any questions about the code, feel free to leave them in the comments below.

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Eric Binnion

Eric Binnion is a computer science student at Midwestern State University. When Eric is not online, he is usually volunteering in his community or enjoying time with his family. You can find Eric on Twitter.

Comments

  • Avinash D'Souza says:

    This is the best bit of code I’ve seen all month. Just what we were looking for over at the kolakube forums! Not too sure about the conversion effectiveness but it sure does grab a few eyeballs. Thanks a ton, Eric… :-)

    • Eric Binnion says:

      Avinash,

      Thanks for the love. We definitely appreciate it, and we hope you enjoy the code.

  • Keith Davis says:

    Love the optin form with the tasteful slidedown.
    I hate those popup optin forms, but this I think is rather stylish.

    I’m a genesis man not thesis.
    Would this go in the functions.php file for genesis?

    • Eric Binnion says:

      Hey Keith,

      I’m much more of a Thesis man myself, so i’d be lying to you if I just answered your question ;)

      But, I’ll tweet Bill Erickson and maybe he’ll give us some input.

      • Claudia says:

        Hi Eric,

        Did you find out anything else with Bill Erickson? After following your instructions carefully, I’ve been unable to make your cool code work with Genesis in a local installation :(

        So far, I can’t get the custom.js file to work, even if I have double checked ID’s and file path. Did you find anything else for this to work in Genesis???

        Cheers!

        • Eric Binnion says:

          Hi Claudia,

          Since you’re running a local installation, it is hard to diagnose what your problem is. If you put your site up on a dev server, I’ll take a look at it.

  • Pat says:

    Hi Eric,

    Great looking code. One thing to note in your section on using this with standalone WordPress themes. You don’t want to drop that script call in your footer.php file. You run a risk of javascript conflicts in the future.

    I’d use wp_enqueue_scripts() in my functions file to load it instead:

    wp_enqueue_script( ‘custom’, get_bloginfo(‘stylesheet_directory’) .’/custom.js’, jQuery ,1.0 ,TRUE );

    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    As for Genesis child themes, you would use the same code as your Thesis instructions show, but you’d hook the function to one of the Genesis hooks. Do you want to slide this div down from above the header? You’d use:

    add_action( ‘genesis_before_header’ , ‘myFeatureBox’ );

    You can find a great list of the hooks at Nick the Geek’s website:
    http://designsbynickthegeek.com/tutorials/genesis-explained-the-framework

  • Billy says:

    Hi Eric

    Excellent tutorial and a fine solution. Far better and less intrusive than a pop-up.

    Can you advise how I’d alter the JQuery so visitors who minimized it don’t see it again when they return to the website. I don’t mind reminding them every so often, but I reckon regular visitors would get fed up having to close it every time they came to the site. Cheers.

    • Eric Binnion says:

      Hey Billy,

      As is, the jQuery will drop a cookie that lasts for 7 days when the user clicks hides the slide down. Of course, this is dependent upon the visitor having cookies enabled and the cookies not being flushed ;)

      Let me know if you have any other questions.

      • Billy says:

        Hi Eric

        Thanks for the reply. We’ve put the box on this website with the 7 day cookie expiry, but it’s reloading every time on all the machines and browsers we’ve tried it on. Would you have any suggestions on what might be causing it?
        Cheers

        • Eric Binnion says:

          Billy, first I like the way that looks on your website. I’m on my iPhone, but it looks like you’re using the Skeptical theme. I would assume that something is a bit off in the jQuery. Paste it here and I’ll look at it.

          • Billy says:

            Appreciate the assistance, Eric.

            This is the content of the general.js file in Skeptical which the guys at Woo Themes recommend for adding jQuery.

            // JavaScript Document

            jQuery(document).ready(function(){

            jQuery(‘.nav > li ul’).mouseover(function(){

            if(! jQuery(this).parent().hasClass(‘current_page_item’)){
            jQuery(this).parent().addClass(‘current_page_item’).addClass(‘fake’);
            }

            });
            jQuery(‘.nav > li ul’).mouseleave(function(){

            if(jQuery(this).parent().hasClass(‘fake’)){
            jQuery(this).parent().removeClass(‘current_page_item’).removeClass(‘fake’);
            }
            });

            });

            jQuery(document).ready(function($) {
            $(“#feature_box”).delay(2000).slideDown(“slow”);
            });

            /*!
            * jQuery Cookie Plugin
            * https://github.com/carhartl/jquery-cookie
            *
            * Copyright 2011, Klaus Hartl
            * Dual licensed under the MIT or GPL Version 2 licenses.
            * http://www.opensource.org/licenses/mit-license.php
            * http://www.opensource.org/licenses/GPL-2.0
            */
            (function($) {
            $.cookie = function(key, value, options) {

            // key and at least value given, set cookie…
            if (arguments.length > 1 && (!/Object/.test(Object.prototype.toString.call(value)) || value === null || value === undefined)) {
            options = $.extend({}, options);

            if (value === null || value === undefined) {
            options.expires = -1;
            }

            if (typeof options.expires === ‘number’) {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
            }

            value = String(value);

            return (document.cookie = [
            encodeURIComponent(key), ‘=’, options.raw ? value : encodeURIComponent(value),
            options.expires ? ‘; expires=’ + options.expires.toUTCString() : ”, // use expires attribute, max-age is not supported by IE
            options.path ? ‘; path=’ + options.path : ”,
            options.domain ? ‘; domain=’ + options.domain : ”,
            options.secure ? ‘; secure’ : ”
            ].join(”));
            }

            // key and possibly options given, get cookie…
            options = value || {};
            var decode = options.raw ? function(s) { return s; } : decodeURIComponent;

            var pairs = document.cookie.split(‘; ‘);
            for (var i = 0, pair; pair = pairs[i] && pairs[i].split(‘=’); i++) {
            if (decode(pair[0]) === key) return decode(pair[1] || ”); // IE saves cookies with empty string as “c; “, e.g. without “=” as opposed to EOMB, thus pair[1] may be undefined
            }
            return null;
            };
            })(jQuery);

            jQuery(document).ready(function($) {
            if( $.cookie(‘first’) == null ) {
            $(“#feature_box”).delay(2000).slideDown(“slow”);
            }
            $(‘#hideOpt’).click(function(){
            $.cookie( ‘first’, ‘1’, { expires: 7, path: ‘/’, });
            $(“#feature_box”).slideUp(“slow”);
            });
            });

  • Thanks for sharing this. I love how it works and looks on your site. I plan to try it on mine.

  • Eric Binnion says:

    Hey Billy,

    I didn’t explain well enough how to implement the code above. I have now fixed that.

    If you used the jQuery cookie plugin, you weren’t supposed to copy the little snippet above. Again, my fault.

    The first snippet doesn’t check for a cookie, so it will keep sliding down every time a page is loaded. This might be desirable depending on the type of site.

    The second jQuery snippet checks for a cookie before it slides down the feature box.

    Since you had both snippets in your code, the feature box slid down every time.

    Thanks for pointing that out to me.

    • Billy says:

      Thanks very much, Eric. That did the trick.

      The fix seemed pretty obvious in hindsight, but novices like myself usually need the obvious pointed out.

      Cheers for taking the time to help join the dots.

      • Eric Binnion says:

        No worries. I’m a computer science student and I still have trouble with code every day :)

        I should’ve explained it better in the first place.

        Thank you for making your code public so I could correct the post for everyone else.

  • Jason says:

    Hi Eric – love the blog and read AOB a lot. Just added the code (swapped _184 for _185) added the custom.js file and in the custom folder (now accessible from custom file editor).

    Turned feature box on, sitewide, above content and sidebars.

    I does not display. I would like to turn the cookies off for testing because one would think that if you click to hide (even as admin) you won’t see it for 7 days?

    In any event – it does not display. Then I checked the CSS ( I just copied over) and realized display:none;

    I deleted that and it’s open now. Now don’t laugh but i’m afraid to click hide for fear I wont see then box for 7 days.

    So the question is… What can I add/remove/change during dev?

    Thanks so much

    Jason

    • Jason says:

      I added a link to my name to the dev site. I think it’s best for me if I can just have it set to open or close on page load and the option for the visitor to open the box or close the box and a cookie to keep it closed for x days if they opted to close.

      Also think I would like to leave the top 30 to 80 pxiels exposed to keep the linked exposed (visible) along with the headline.

      Css styling I can handle but just how would I make this happen?

    • Eric Binnion says:

      Hey Jason,

      During Dev, you can either have the cookies on or off. The first bit of jQuery code I gave will slide down the optin area every time. The second bit of jQuery will check for a cookie.

      I checked out your website, and when I clicked view-source and searched for .js… I didn’t see anything. Did you include the script in the Thesis Design Options?

      And I won’t laugh about you being afraid to click hide. As a side note, you can always clear out cookies (in Chrome, you can delete a specific cookie for a single site even).

      As far as you wanting to leave part open, there are several ways to approach it. Look into the jQuery docs about the slideToggle function. I would create two separate divs, the top one being the toggle, then the bottom one being the content.

      • Jason Davis says:

        Wow! Totally bummed. Setup everything above with a fresh install, clean code, no customization (excluding yours) and still I get nothing.

        It’s setup at ParkPush.com and i’d be happy to give you the login so you can see for yourself why I may be going crazy! Truly baffled.

        • Eric Binnion says:

          I checked it out, and I would guess that the problem is that the jQuery library hasn’t been included. I should’ve been more specific about this in the tutorial. To turn on jQuery, you can go to Thesis -> Design Options -> Sitewide JS Libraries and select the jQuery button.

          Let me know if that helps.

  • Jason Davis says:

    Like a charm! Sometimes it’s the little things.

    Thank you for your time and I really appreciate it. Coffee on me!

    I’m going to do some digging around to play with customizations like leaving the window cracked open, creating an open/close button, etc… I’ll post back anything worth while when i find it.

    Thanks again.

  • Max says:

    Hi Eric

    I’m having a bit of trouble getting this working. I’ve tripled check everything and I’m not sure what’s going on.

    Site is here: http://themestats.com/blog

    The feature box doesn’t slide down. Instead it is permanently displayed there. Yet when you click on the hide button, it disappears (indicating that it is calling jquery fine). However, also, when you refresh the page having hidden it, it reappears.

    Would really appreciate a hand, spent the last 30 minutes tearing my hear out!

    Thanks Eric! Max

    • Eric Binnion says:

      It looks like your #feature_box does not have display:none set. Try that, and let me know how it works for you :)

      At first glance, everything else looks pretty good.

      • Max says:

        Hey Eric. Very observant! However, I removed this because with it, nothing ever appears (it was one of the things I tinkered with). I’ve added it back in, and as you’ll see, the feature box never appears.

        It is a mystery my end :(

  • Francisco says:

    Hi Eric,

    I’m also using Genesis and can’t get the code to work. Could you help me to see why? Any help would be greatly appreciated!

    Regards

    • Eric Binnion says:

      Hi Francisco,

      After looking at your website, it looks like you haven’t include jQuery. You will need to include jQuery before you can use this code.

      • Francisco says:

        Hi Eric, thanks for looking at it :)

        If you see the source code and scroll to the end of the page, you’ll see the call to /lib/custom.js is there, and that’s why I don’t quite get what am I missing.

        Any guess?

        • Eric Binnion says:

          You also will need to include the jQuery library for the JS code I gave you to work.

          There are two ways to do this.

          1) Just use a script tag. <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>

          2) Alternatively, check out this article on enqueueing a script via the functions.php file for your theme from CSS tricks. This is the preferred way to add jQuery to your website since it should not conflict with other plugins.

          Let me know if that helps.

          • Francisco says:

            Nope Eric :(

            I’ve added the js file and still nothing shows up. Also, I have no other scripts running so it’s safe to say there is no conflict now.

            I guess something may be preventing jquery to do its part, but I can’t tell what else could be.

            As suggested above by Pat, I’ve added this to my functions.php file:


            /** Slide down */
            add_action( 'genesis_after_header', 'myFeatureBox' );
            function myFeatureBox () {
            if (!is_page("home") ){ ?>

            Your unique message would go in here
            X - No, I don't want to subscribe to your blog.

            <?php }
            }

            Could the problem be here? What else could be?

          • Eric Binnion says:

            You need to include two scripts for this to work. First, you will need to include jQuery since the code I gave you relies on it. Second, you will need to add my script I gave you.

            You have done the second step, but I still don’t see jQuery on your website when I look at the source code. You will need to add jQuery using one of the two methods I suggested in my last comment.

            I hope this helps.

          • Francisco says:

            Thank you Eric,

            You have been very patient and I appreciate it. The two files are there, but I think you saw a cached page (!).

            I have disabled caching and now you should find the jQuery library in the header and the custom.js in the footer. Anyway, it doesn’t seem to be working for me.

          • Eric Binnion says:

            Alright,

            So after further looking, I think I see what’s happening. In your HTML, you are using a class of featbox. The javascript I gave you is looking for an id of feature_box. So the javascript is never seeing the feature box. I honestly should’ve seen this earlier, but I stopped with the not seeing jQuery since that was a must ;)

            So, how do we fix this?

            Well, I would just go into the javascript and change the code within document ready to look like this:

            jQuery(document).ready(function($) {
                 if( $.cookie('first') == null ) { 
                      $(".featbox").delay(2000).slideDown("slow");
                 }
                 $('#hideOpt').click(function(){
                      $.cookie( 'first', '1',  { expires: 7, path: '/' } );
                      $(".featbox").slideUp("slow");
                 });
            });
            

            This should take care of your issue. Note that you will still need to do quite a bit of styling on your feature box, but the slide down functionality should now work.

            I hope this works for you.

  • Francisco says:

    Yeah! That was it. Also I should have been more careful to see this. Style is not a problem, but I needed this first.

    Thanks a lot Eric :D

  • William says:

    Hi Eric, I’ve got it!

    Now I need to know what do you use to avoid having the slide appear on the homepage, as I already have a signup form there.

    Cheers!

    • Eric Binnion says:

      Hey William,

      There are a couple of ways to do this. Depending on what theme you are using, you can only add this optin to page/post templates. That means, you could include this code on template files except for front-page.php.

      Now, if you are using themes that make use of hooks (like Genesis or Thesis), let’s just add a simple if statement to the PHP code.

      if ( !is_home() ){
           // add the slider code here
      }
      

      This if statement will only display the code when it’s not on the home page. I hope that helps. Please feel free to leave me more details and I will give you a more directed answer. :)