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
-
function my_show_extra_profile_fields( $user ) {
-
-
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 'This text only appears to new users';
-
}
-
}
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.
-
<script type="text/javascript">
-
$(document).ready(function(){
-
$("#notification").slideDown("slow"); //< — this is the animation code
-
$("#first_name").addClass("selected");
-
$("#last_name").addClass("selected");
-
});
-
</script>
-
</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
-
#notification {
-
position: absolute;
-
top: -20px;
-
left: 0px;
-
height: 85px;
-
width: 100%;
-
background: #ffffe0;
-
display: none;
-
line-height: 10pt;
-
font-family: sans-serif;
-
padding: 5px 10px;
-
}
Putting it all together, you have (in my case):
And the code:
-
function my_show_extra_profile_fields( $user ) {
-
-
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 '
-
<script type="text/javascript">
-
-
$(document).ready(function(){
-
$("#notification").slideDown("slow"); //< — this is the animation code
-
$("#first_name").addClass("selected");
-
$("#last_name").addClass("selected");
-
});
-
-
</script>
-
';
-
}
-
?>
-
<div id="notification">
-
<center><strong>Hey! I see you're new here!</strong> Thanks for registering, and welcome to <strong>evolutionary collective!</strong><br /><br /></center>
-
<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 />
-
-
<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>
-
-
</div>
-
< ?php
-
-
}
-
[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:
-
<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.