JQuery Dropdown Message on First Login

I wanted to have a sliding dropdown (Twitter style) displayed to my users after logging into a WordPress site for the first time.

Had to hack this together from a few different sources, so I’m posting the results here in case anyone else is trying to do the same:

Step 1: Display a welcome message to a recently-registered wordpress user (but hide it for older users).

I got most of this info from this post on the WordPress.org support forums, but there was a typo in the code that made it not work.

In your theme’s functions.php

  1. function my_show_extra_profile_fields( $user ) {
  2.  
  3.  global $user_ID;
  4.  if( $user_ID ) {
  5.   $user_info = get_userdata( $user_ID );
  6.   // If user_registered date/time is less than 48hrs from now
  7.   // Message will show for 48hrs after registration
  8.   if ( strtotime( $user_info->user_registered ) > ( time() - 172800 ) )
  9.    echo 'This text only appears to new users';
  10.  }
  11. }

This function inserts the code into the user’s profile page… which is where they’re directed after they log in. I’m using Theme My Login by Jeff Farthing to theme my login and profile pages. The message will display for the first 48 hours after registration, then disappear.

Step 2: Make a nice JQuery slide-in type message box.

  1. <script type="text/javascript">
  2.    $(document).ready(function(){
  3.     $("#notification").slideDown("slow"); //< — this is the animation code
  4.     $("#first_name").addClass("selected");
  5.     $("#last_name").addClass("selected");
  6.    });
  7.    </script>
  8. </script>

This takes any DIV with ID “notification” and slides it down, slowly. The .addClass is specific to my implementation… it highlights the First Name and Last Name fields, to invite the user to fill them out.

Finally, you’ll want to style #notification. Make sure to set its display: property to none

  1. #notification {
  2.  position: absolute;
  3.  top: -20px;
  4.  left: 0px;
  5.  height: 85px;
  6.  width: 100%;
  7.  background: #ffffe0;
  8.  display: none;
  9.  line-height: 10pt;
  10.  font-family: sans-serif;
  11.  padding: 5px 10px;
  12. }

Putting it all together, you have (in my case):

And the code:

  1. function my_show_extra_profile_fields( $user ) {
  2.  
  3.  global $user_ID;
  4.  if( $user_ID ) {
  5.   $user_info = get_userdata( $user_ID );
  6.   // If user_registered date/time is less than 48hrs from now
  7.   // Message will show for 48hrs after registration
  8.   if ( strtotime( $user_info->user_registered ) > ( time() - 172800 ) )
  9.    echo '
  10.   <script type="text/javascript">
  11.  
  12.   $(document).ready(function(){
  13.    $("#notification").slideDown("slow"); //< — this is the animation code
  14.    $("#first_name").addClass("selected");
  15.    $("#last_name").addClass("selected");
  16.   });
  17.  
  18.   </script>
  19.   ';
  20.  }
  21.  ?>
  22.  <div id="notification">
  23.   <center><strong>Hey! I see you're new here!</strong> Thanks for registering, and welcome to <strong>evolutionary collective!</strong><br /><br /></center>
  24.  <span style="line-height: 30px;"><img src="/wp-content/themes/twicet/images/edit.png" style="float: left; margin-right: 10px;"/>You might consider filling out <strong style="color: #f79d34">a little more information about yourself</strong> below <br />
  25.  
  26.  <a href="/forum"><img src="/wp-content/themes/twicet/images/forum.png" style="float: left; margin-right: 10px;"/></a>Or, head over to the <a href="/forum">forum</a>, and participate in a discussion!</span>
  27.  
  28. </div>
  29. < ?php
  30.  
  31. }

[highlight]UPDATE:[/highlight]
Also, I thought this would have been pretty obvious, but remember you must include jQuery somewhere in your page, preferably in the header. The easiest way to do this is:

  1. <script src="http://code.jquery.com/jquery-1.4.4.js"></script>

Of course you don't want to include an external file on a live site— but this works for testing purposes.

10 Comments

  1. This code doesn’t seem to be working for me on WP 3.01.. Even the first function doesn’t do the intended job on a first login.. Mind helping me?

    • The first function with the “echo ‘this text only appears to recently registered users’;”, or the function with the javascript? You do need jQuery installed (I’m pretty sure..) to make the slide down work.

      If the straight-up text doesn’t display.. it could be for a few reasons. Make sure the user was actually registered within 48 hours (or expand the time window).. make sure your server time is correct..

      You can shoot me an email if you want at bryce@brycecorkins.com– I usually respond to those faster.

  2. Is it possible to change the page that the message appears on? (Instead of it appearing on the user’s profile page. Wanting to hook it up with a BuddyPress install.)

    • Yeah, just drop the document.ready function on whatever page you want it to appear on.

      I’m toying with making this into a plugin (called via a shortcode) but it would be my first plugin. If you’ve got any thoughts, shoot me an email.

      • Thanks for the quick reply Bryce. Taking another look at this I’m not 100% sure where to put the different pieces of code. I’ll add the document.ready function to the page I want it to appear on (like you mentioned.)

        But what goes in the functions.php? Do I put the big block of code that you have at the bottom of your post or just the first piece of code at the top of your post?

        Thanks again man! A plugin version would be awesome. Honestly, I’m surprised there isn’t one out there.

  3. Nice.

    But where can we place the function ‘my_show_extra_profile_fields’ OR how it is being triggered?

    Thanks advance!

  4. Hi Bryce,

    Thanks for the bit of code. Works like a charm. I went ahead and modified it slightly so there’s no need to pass the $user argument. This works for the current user logged in:

    function ap_new_user_message() {
    $current_user = wp_get_current_user();
    $user_ID = $current_user->ID;
    //global $user_ID;
    if( $user_ID ) {
    $user_info = get_userdata( $user_ID );
    // If user_registered date/time is less than 48hrs from now
    // Message will show for 48hrs after registration
    if ( strtotime( $user_info->user_registered ) > ( time() – 172800 ) )
    echo ‘

    $(document).ready(function(){
    $(“#notification”).slideDown(“slow”); //< — this is the animation code
    $("#first_name").addClass("selected");
    $("#last_name").addClass("selected");
    });

    ‘;
    }
    ?>

    Hey! I see you’re new here! Thanks for registering, and welcome to evolutionary collective!
    You might consider filling out a little more information about yourself below

    Or, head over to the forum, and participate in a discussion!

    <?php

    }

    Now I’m off to find the option to click to hide the drop down. Any ideas?

    Thanks,
    Bryan

    • Here it is, if anyone is interested… Thanks again for the start, Bryce!

      ————————————————————————————————–

      function ap_new_user_message() {
      $current_user = wp_get_current_user();
      $user_ID = $current_user->ID;
      //global $user_ID;
      if( $user_ID ) {
      $user_info = get_userdata( $user_ID );
      // If user_registered date/time is less than 48hrs from now
      // Message will show for 48hrs after registration
      if ( strtotime( $user_info->user_registered ) > ( time() – 172800 ) )
      echo ‘

      $(document).ready(function(){
      if ($(\’#notification\’).is(\’:hidden\’)) {
      $(“#notification”).slideDown(“slow”); //< — this is the animation code
      $("#first_name").addClass("selected");
      $("#last_name").addClass("selected");
      }

      $("#slideToggle").click(function () {
      $(\'#notification\').slideToggle(); });

      });

      ‘;
      }
      ?>

      Hey! I see you’re new here! Thanks for registering, and welcome to evolutionary collective!
      You might consider filling out a little more information about yourself below

      Or, head over to the forum, and participate in a discussion!
      Click here

      <?php
      }

  5. We expanded on this by putting a one time service agreement message on the overlay, as follows:

    ID;
    if( $user_ID ) {
    $user_info = get_userdata( $user_ID );
    $new_time = “10 September 2010″;
    global $wpdb;
    $wpdb->query( $wpdb->prepare(“UPDATE wp_users SET user_registered = %d WHERE id = %s”, $new_time, $user_ID ));
    }
    } ?>

    So if they agreed, the overlay went away, and if they didn’t opt-in, it remained.

    Cordially,

    Robert Whitis

Leave a Comment