WordPress Front Page Login & a Sliding jQuery Panel

There are two things that are all the rage in web development at the moment–WordPress and jQuery. I’ve got a fairly decent handle on making WordPress do what I want it to but I’m at a loss when it comes to do with anything javascript related. I can’t code anything myself, so I’m one of the many people who set out to find the solution via Google and the talented developers who code nifty things. This is one of those nifty things I borrowed. A recent client wanted a way for Subscribers to his site to be able to log in, register or recover a lost password from the front page. This is the tale of how I accomplished that.

When I went searching, I found what I thought was the perfect solution until I tried registering or logging in. Jeeremie over at Web-kreation has a sweet tutorial on implementing a jQuery sliding panel in WordPress. I followed the tutorial, I copied the code and everything worked like a peach except for that little problem I mentioned earlier. All his beautiful work that allowed me to have the forms in the sliding panel was for naught was you actually wanted to log in or register. Then you were taken away from the page and to dumped onto the regular old wp_login.php page. The breaks squealed and I scratched my head and thought, “Nope, this isn’t gonna work.” I figured there had to be something I could combine with his sliding panel code to make this do what I wanted it to do. That’s when I came across AJAX Login Widget++ written by David Underhill. Voila, magic! Now, it’s not the perfect solution because you have to fiddle with a file in the plugin folder but it works for what the client wants and that’s all that matters. Right? Right! Below is the code that I used to make this work. If you have questions, you can ask and I’ll do my best to answer but you may be better off going to the sites listed above and getting help from the creators of this goodness.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134

<!-- Panel --> <div id="toppanel"> <?php global $user_identity, $user_ID; // If user is logged in or registered, show dashboard links in panel if (is_user_logged_in()) { ?> <div id="panel"> <div class="content clearfix"> <div class="left border"> <h1>Welcome back <?php echo $user_identity ?></h1> <h2>My Account</h2> <ul> <li>Go to Dashboard</li> <li>Edit My Profile</li> <?php if ( current_user_can('level_1') ) : ?> <li>Comments</li> <?php endif ?> <li>  </li> </ul> </div> <div class="left narrow"> <?php if ( current_user_can('level_10') ) : ?> <h2>Appearance</h2> <ul> <li>Themes</li> <li>Widgets</li> <li>Theme Editor</li> </ul> <h2>Plugins</h2> <ul> <li>Plugins</li> <li>Install a Plugin</li> <li>Plugin Editor</li> </ul> <?php endif ?> </div> <?php if ( current_user_can('level_2') ) : ?> <div class="left narrow"> <h2>Posts</h2> <ul> <li>New Post</li> <li>Edit Posts</li> <?php if ( current_user_can('level_3') ) : ?> <li>Tags</li> <li>Categories</li> <?php endif ?> </ul> <?php if ( current_user_can('level_3') ) : ?> <h2>Pages</h2> <ul> <li>New Page</li> <li>Edit Pages</li> </ul> <?php endif ?> </div> <?php endif ?> <?php if ( current_user_can('level_2') ) : ?> <div class="left narrow"> <?php if ( current_user_can('level_3') ) : ?> <h2>Users</h2> <ul> <li>Author & Users</li> <li>Add New</li> </ul> <?php endif ?> <h2>Library</h2> <ul> <li>Library</li> <li>Add New</li> </ul> </div> <?php endif ?> <?php if ( current_user_can('level_10') ) : ?> <div class="left narrow"> <h2>Settings</h2> <ul> <li>General</li> <li>Writing</li> <li>Reading</li> <li>Discussion</li> <li>Media</li> <li>Privacy</li> <li>Permalinks</li> <li>Miscellaneous</li> </ul> </div> <?php endif ?> </div> </div> <!-- /login --> <!-- The tab on top --> <div class="tab"> <ul class="login"> <li class="left"> </li> <!-- Logout --> <li>  </li> <li class="sep">|</li> <li id="toggle"> Show Dashboard Close Panel </li> <li class="right"> </li> </ul> </div> <!-- / top --> <?php // Else if user is not logged in, show login and register forms } else { ?> <div id="panel"> <div class="content clearfix"> <div class="left border"> <h1>Put a Salutation Here</h1> <h2>You can put even more stuff here.</h2> <p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p> </div> <?php add_ajax_login_widget(); ?> </div> <!-- /login --> <!-- The tab on top --> <div class="tab"> <ul class="login"> <li class="left">&nbsp;</li> <!-- Login / Register --> <li id="toggle"> Log In | Register Close Panel </li> <li class="right">&nbsp;</li> </ul> </div> <!-- / top --> <?php } ?> </div> <!--END panel -->

The nice thing about the way Jeeremie coded this, your WordPress Dashboard links are available to you by levels. For example, if you’re an Administrator of the site, then you will see all the links available that you would in the Dashboard. He separates them with some spiffy PHP based on user levels.

The code for the Ajax Login Widget++ is on line 119.

One more neat thing that another user, Jonathan, over at Web-kreation came up with is only showing the sliding panel to the admin. Here’s the code for that:

1 2 3 4 5 6

<?php if ( current_user_can('level_10') ) : ?> <!-- Panel --> <div id="toppanel"> ... ALL THE CODE FROM ABOVE GOES HERE... </div><!--END panel --> <?php endif; ?>

Of course, if you’re going to show the sliding panel only to the Admin, then you won’t need all the user level codes in the original code.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s