thb_sliding-panel-admin

April 7, 2009

AJAX / Javascript, All, Forms, Freebies, jQuery, Tutorials, Wordpress

Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+

Article written by Jeeremie

About one week ago, I introduced the Nice & Clean Sliding Login Panel built with jQuery which was a redesigned of my popular Mootools sliding panel. Today, we will see how to implement it in WordPress 2.7+. Please note I am not going to cover any previous version of WordPress in this tutorial.

Before I give you the code, let me briefly explain you what we want to achieve.

If user didn’t log in or register yet, we will show the login and register forms in the sliding panel with a short Welcome Message:
sliding-panel-login

Once user is logged in, we will change panel content to show a dashboard menu with a short “Welcome Back” message. This is what our code will look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 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()) { 
?>
 
<!-- Dashboard menu will come here -->
 
<?php 
	// Else if user is not logged in, show login and register forms
	} else {	
?>
 
<!-- Login and Register forms will come here -->
 
<?php } ?>	
</div> <!--END panel -->

Simple, isn’t it?

WordPress, since version 2.0, introduced user roles and capabilities. To take advantage of this, we are going to use the current_user_can() function to control what links users can or cannot see depending on the role attributed to them. This is done like this:

1
2
3
<?php if ( current_user_can('level_10') ) : ?>
<!-- Content placed here will only be seen by ADMINS of the site! -->		
<?php endif ?>

“level_10″ is the highest level in WordPress and gives user full control and access to the site. This level is reserved to the owner of the site and admins. You can read more about user roles here »

Below is a screenshot of the panel display for admins (‘level_10′):
sliding-panel-admin

Below is a screenshot of the panel display for authors (‘level_2′):
sliding-panel-author

Below is a screenshot of the panel display for subscibers (‘level_0′):
sliding-panel-subscriber

The last screenshot looks really empty because Subscribers have only a limited access to the dashboard. You can try to fill the panel with some extra content for subscribers and contributors if you don’t want your panel to look so empty. It is up to you.

STEP 1: The HTML code

(Note: For the sake of this tutorial, I am going to implement the script into the default WordPress 2.7 theme (wp-content/themes/default).)

Open header.php in your text editor or log in to your dashboard and navigate to Appearance > Editor and select this file. Find the code below and delete it:

1
2
3
<?php wp_head(); ?>
</head>
<body>

Replace it by this:

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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<?php wp_head(); ?>
 
  	<!-- PNG FIX for IE6 -->
  	<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
	<!--[if lte IE 6]>
		<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/pngfix/supersleight-min.js"></script>
	<![endif]-->
 
    <!-- jQuery - the core -->
	<script src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js" type="text/javascript"></script>
	<!-- Sliding effect -->
	<script src="<?php bloginfo('template_url'); ?>/js/slide.js" type="text/javascript"></script>
 
</head>
<body>
<!-- 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>Headline</h2>				
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<h2>Dashboard</h2>
				<ul>					
					<li><a href="<?php bloginfo('url') ?>/wp-admin/index.php">Go to Dashboard</a></li>
				</ul>
			</div>
			<div class="left narrow">			
				<h2>My Account</h2>				
				<ul>					
					<li><a href="<?php bloginfo('url') ?>/wp-admin/index.php">Global Dashboard</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Edit My Profile</a></li>
					<?php if ( current_user_can('level_1') ) : ?>
						<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-comments.php">Comments</a></li>
					<?php endif ?>
	        		<li><a href="<?php echo wp_logout_url(get_permalink()); ?>" rel="nofollow" title="<?php _e('Log out'); ?>"><?php _e('Log out'); ?></a></li>
				</ul>	
				<?php if ( current_user_can('level_10') ) : ?>		
				<h2>Appearance</h2>				
				<ul>						
					<li><a href="<?php bloginfo('url') ?>/wp-admin/themes.php">Themes</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/widgets.php">Widgets</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/theme-editor.php">Theme Editor</a></li>
				</ul>
				<?php endif ?>
			</div>
			<?php if ( current_user_can('level_2') ) : ?>
			<div class="left narrow">			
				<h2>Posts</h2>				
				<ul>					
					<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">New Post</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/edit.php">Edit Posts</a></li>
				<?php if ( current_user_can('level_3') ) : ?>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-tags.php">Tags</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/categories.php">Categories</a></li>
				<?php endif ?>
				</ul>
				<?php if ( current_user_can('level_10') ) : ?>		
				<h2>Plugins</h2>				
				<ul>						
					<li><a href="<?php bloginfo('url') ?>/wp-admin/plugins.php">Plugins</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/plugin-install.php">Install a Plugin</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/plugin-editor.php">Plugin Editor</a></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>Pages</h2>				
				<ul>		
					<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">New Page</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-pages.php">Edit Pages</a></li>
				</ul>
				<?php endif ?>			
				<h2>Library</h2>				
				<ul>					
					<li><a href="<?php bloginfo('url') ?>/wp-admin/upload.php">Library</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/media-new.php">Add New</a></li>
				</ul>
				<?php if ( current_user_can('level_3') ) : ?>		
				<h2>Users</h2>				
				<ul>						
					<li><a href="<?php bloginfo('url') ?>/wp-admin/users.php">Author &amp; Users</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/user-new.php">Add New</a></li>
				</ul>
				<?php endif ?>
			</div>
			<?php endif ?>
			<?php if ( current_user_can('level_10') ) : ?>
			<div class="left narrow">			
				<h2>Settings</h2>				
				<ul>						
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-general.php">General</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-writing.php">Writing</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-reading.php">Reading</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-discussion.php">Discussion</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-media.php">Media</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-privacy.php">Privacy</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-permalink.php">Permalinks</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-misc.php">Miscellaneous</a></li>
				</ul>
			</div>
			<?php endif ?>
		</div>
	</div> <!-- /login -->	
 
    <!-- The tab on top -->	
	<div class="tab">
		<ul class="login">
	    	<li class="left">&nbsp;</li>
	    	<!-- Logout -->
	        <li><a href="<?php echo wp_logout_url(get_permalink()); ?>" rel="nofollow" title="<?php _e('Log out'); ?>"><?php _e('Log out'); ?></a></li>
			<li class="sep">|</li>
			<li id="toggle">
				<a id="open" class="open" href="#">Show Dashboard</a>
				<a id="close" style="display: none;" class="close" href="#">Close Panel</a>	
			</li>
	    	<li class="right">&nbsp;</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>Welcome to Web-Kreation</h1>
				<h2>Sliding login panel Demo with jQuery</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>
				<h2>Download</h2>
				<p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/articles/implement-a-nice-clean-jquery-sliding-panel-in-wordpress-27" title="Download">article &raquo;</a></p>
			</div>
			<div class="left">
				<!-- Login Form -->
				<form class="clearfix" action="<?php bloginfo('url') ?>/wp-login.php" method="post">
					<h1>Member Login</h1>
					<label class="grey" for="log">Username:</label>
					<input class="field" type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="23" />
					<label class="grey" for="pwd">Password:</label>
					<input class="field" type="password" name="pwd" id="pwd" size="23" />
	            	<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
        			<div class="clear"></div>
					<input type="submit" name="submit" value="Login" class="bt_login" />
					<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
					<a class="lost-pwd" href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Lost your password?</a>
				</form>
			</div>
			<div class="left right">
			<?php if (get_option('users_can_register')) : ?>	
				<!-- Register Form -->
				<form name="registerform" id="registerform" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
					<h1>Not a member yet? Sign Up!</h1>	
					<label class="grey" for="user_login"><?php _e('Username') ?></label>
					<input class="field" type="text" name="user_login" id="user_login" class="input" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" size="20" tabindex="10" />
					<label class="grey" for="user_email"><?php _e('E-mail') ?></label>
					<input class="field" type="text" name="user_email" id="user_email" class="input" value="<?php echo attribute_escape(stripslashes($user_email)); ?>" size="25" tabindex="20" />
					<?php do_action('register_form'); ?>
					<label id="reg_passmail"><?php _e('A password will be e-mailed to you.') ?></label>
					<input type="submit" name="wp-submit" id="wp-submit" value="<?php _e('Register'); ?>" class="bt_register" />
				</form>
			<?php else : ?>
				<h1>Registration is closed</h1>
				<p>Sorry, you are not allowed to register by yourself on this site!</p>
				<p>You must either be invited by one of our team member or request an invitation by email at <b>info {at} yoursite {dot} com</b>.</p>
 
				<!-- Admin, delete text below later when you are done with configuring this panel -->
				<p style="border-top:1px solid #333;border-bottom:1px solid #333;padding:10px 0;margin-top:10px;color:white"><em>Note: If you are the admin and want to display the register form here, log in to your dashboard, and go to <b>Settings</b> > <b>General</b> and click "Anyone can register".</em></p>
			<?php endif ?>			
			</div>
		</div>
	</div> <!-- /login -->	
 
    <!-- The tab on top -->	
	<div class="tab">
		<ul class="login">
	    	<li class="left">&nbsp;</li>
	    	<!-- Login / Register -->
			<li id="toggle">
				<a id="open" class="open" href="#">Log In | Register</a>
				<a id="close" style="display: none;" class="close" href="#">Close Panel</a>			
			</li>
	    	<li class="right">&nbsp;</li>
		</ul> 
	</div> <!-- / top -->			
<?php } ?>	
</div> <!--END panel -->

STEP 2: Copy the CSS in style.css

Expand the code below, copy it and save it at the bottom of your theme stylesheet (e.g. wp-content/themes/default/style.css):

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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
/* sliding panel */
#toppanel {
    position: absolute;   /*Panel will overlap  content */
    /*position: relative;*/   /*Panel will "push" the content down */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 130%; /* font-size set to 130% for the default Kubrick Wordpress theme */
}
 
#panel {
	width: 100%;
	height: 280px;
	color: #999999;
	background: #272727;
	overflow: hidden;
	position: relative;
	z-index: 3;
	display: none;
}
 
#panel h1 {
	font-size: 1.6em;
	padding: 5px 0 10px;
	margin: 0;
	color: white;
	text-align: left;
}
 
#panel h2{
	font-size: 1.2em;
	padding: 10px 0 5px;
	margin: 0;
	color: white;
	text-align: left;
}
 
#panel p {
	margin: 5px 0;
	padding: 0;
}
 
#panel a {
	text-decoration: none;
	color: #15ADFF;
}
 
#panel a:hover {
	color: white;
}
 
#panel a-lost-pwd {
	display: block;
	float: left;
}
 
#panel ul {
	margin: 0 0 5px 0;
	padding: 0;
	line-height: 1.6em;
	list-style: none;
}
 
#panel .content {
	width: 960px;
	margin: 0 auto;
	padding-top: 15px;
	text-align: left;
	font-size: 0.85em;
}
 
#panel .content .left {
	width: 280px;
	float: left;
	margin-bottom: 25px;
	padding: 0 15px;
	border-right: 1px solid #333;
	min-height: 220px;
}
 
#panel .content .border {
	border-left: 1px solid #333;
}
 
#panel .content .narrow {
	width:120px !important;
}
 
#panel .content form {
	margin: 0 0 10px 0;
}
 
#panel .content label {
	float: left;
	padding-top: 8px;
	clear: both;
	width: 280px;
	display: block;
}
 
#panel .content input.field {
	border: 1px #1A1A1A solid;
	background: #414141;
	margin-right: 5px;
	margin-top: 4px;
	width: 200px;
	color: white;
	height: 16px;
}
 
#panel .content input:focus.field {
	background: #545454;
}
 
/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
	display: block;
	float: left;
	clear: left;
	height: 24px;
	text-align: center;
	cursor: pointer;
	border: none;
	font-weight: bold;
	margin: 10px 0;
}
 
#panel .content input.bt_login {
	width: 74px;
	background: transparent url(images/bt_login.png) no-repeat 0 0;
}
 
#panel .content input.bt_register {
	width: 94px;
	color: white;
	background: transparent url(images/bt_register.png) no-repeat 0 0;
}
 
#panel .lost-pwd {
	display: block;
	float:left;
	clear: right;
	padding: 15px 5px 0;
	font-size: 0.95em;
	text-decoration: underline;
}
 
/* Panel Tab/button */
.tab {
  	background: url(images/tab_b.png) repeat-x 0 0;
	height: 42px;
	position: relative;
    top: 0;
    z-index: 999;
}
 
.tab ul.login {
	display: block;
	position: relative;
  	float: right;
  	clear: right;
  	height: 42px;
	width: auto;
  	font-weight: bold;
	line-height: 42px;
	margin: 0;
	right: 150px;
  	color: white;
  	font-size: 80%;
	text-align: center;
}
 
.tab ul.login li.left {
  	background: url(images/tab_l.png) no-repeat left 0;
  	height: 42px;
	width: 30px;
	padding: 0;
	margin: 0;
  	display: block;
	float: left;
}
 
.tab ul.login li.right {
  	background: url(images/tab_r.png) no-repeat left 0;
  	height: 42px;
	width: 30px;
	padding: 0;
	margin: 0;
  	display: block;
	float: left;
}
 
.tab ul.login li {
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 42px;
  	background: url(images/tab_m.png) repeat-x 0 0;
}
 
.tab ul.login li a {
	color: #15ADFF;
}
 
.tab ul.login li a:hover {
	color: white;
}
 
.tab .sep {color:#414141}
 
.tab a.open, .tab a.close {
	height: 20px;
	line-height: 20px !important;
	padding-left: 30px !important;
	cursor: pointer;
	display: block;
	width: 100px;
	position: relative;
	top: 11px;
}
 
.tab a.open {background: url(images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(images/bt_close.png) no-repeat left -19px;}

Note: I have set font-size to 130% for #toppanel because the panel font was too small in the Default theme. If you use this code with another theme and font is too big, modify this value or just delete “font-size: 130%;”.

STEP 3: Add the Javascript files & Images to your theme.

Click here to download the sliding panel from my previous article. When prompted save Sliding_login_panel_jquery.zip on your desktop. Uncompress the file (with 7zip for example) and copy the “js” folder (all of it) into wp-content/themes/default/. Copy all the images from the zip file and save them in wp-content/themes/default/images/.

By now, if you saved the files to the right folders and added the HTML and CSS code to the right files, the panel should slide as expected. To test your sliding panel, you can create different users in Users > Add New and select a different role for each. Then sign in with the different accounts you just created to see how the panel behaves.

Let’s now take care of the register form.

STEP 4 (Optional): Register form

If you want the register form to appear in your panel, you will need to follow one last step. Go to Settings > General and check “Anyone can register”. If you don’t check this box, this is what you will see:
sliding-panel-register-disable

When you succesfully register or get an error you will be redirected to http://yoursite.com/wp-login.php?action=register. I would have prefered to handle errors and messages directly from the sliding panel but that was not possible without adding a lot of code to it.

I was surprised to see there was so little documentation about adding a register form to the front page. I found a few plugins but nothing really interesting.

If you know something interesting about it, let me know.

Not Working. Help!

You followed all the steps above but it didn’t work. Don’t worry! I have bundled this jQuery Sliding Panel with the default theme. Just download it below and install it as you would normally do for any theme:

Download(84.4 KiB, 12,063 hits)

If it still doesn’t work, make sure jQuery doesn’t conflict with another AJAX library (Mootools, Prototype…).

Conclusion

I tried to make this tutorial as simple as I could for you to implement this script into your WordPress theme. However, depending on the theme you use, you might run into a problem. If so, ask your questions below and I will try to help you.

Update: Plugins for WordPress, Drupal, Joomla, Tutorials…

It seems this sliding panel has inspired many people. Some of them even have created some plugins for WordPress, Drupal…:

Enjoy!

(Note: If you created a plugin based on this script for another CMS, feel free to contact me or leave a comment below and I will add it to this list).

The Author

Article written by Jeeremie:

Hi, My Name is Jeremie Tisseau. I am a French UI/UX Designer, Event Organizer and Web Entrepreneur based in Bangkok, Thailand, since January 2009. I design beautiful and functional web and mobile apps for early stage startups.

Want to become a guest author on this blog?

192 Comments

  1. Marcos says:

    8 Apr, 2009

    Muy bueno!!!
    Gracias por todos los aportes!
    Saludos
    Marcos.

  2. not2comply says:

    8 Apr, 2009

    Nice tutorial, thanks for sharing…

  3. Wordpress themes says:

    8 Apr, 2009

    slidingPanel.txt link doesn’t work. please fix it.

    Thanks :)

  4. Sean says:

    9 Apr, 2009

    I followed the steps and the login comes up correctly but I have two problems:

    1) Opening the sliding over lay doesn’t overlap content on the page. Basically the existing content and the slider look weird as part of the original content can be seen over the slider.

    2) Login/New Registration wont work. The regular login still works, but if I try to login or register from the slider nothing happens..
    PLEASE HELP!

    • Jeremie Tisseau says:

      9 Apr, 2009

      @Sean,

      1) Someone else reported having a similar problem on my previous post. Panel won’t overlap flash contents even with a high z-index value (e.g. z-index:999999). I read this on a site: “Just add a high number (eg. z-index:10) to the CSS and it will always be in front. If you have flash files don’t forget to set your Flash files to wmode=’transparent’.” I don’t know if it helps. Otherwise, change #toppanel position from absolute to relative in your CSS:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      
      /* sliding panel */
      #toppanel {
      	/*position: absolute;*/   /*Panel will overlap  content */
      	position: relative;   /*Panel will "push" the content down */
      	top: 0;
      	left: 0;
      	width: 100%;
      	z-index: 999;
      	text-align: center;
      	margin-left: auto;
      	margin-right: auto;
      	font-size: 130%; /* font-size set to 130% for the default Kubrick Wordpress theme */
      }

      This will push the content down instead of overlapping it.

      2) It seems to work fine for me, at least for the register form.

  5. rgravel says:

    9 Apr, 2009

    Great, thanks! But I seem to have a problem… I use qTranslate, so when I switch language, my URL looks like: “http://forummille-isles.org/ForumMille-Isles/?p=301&lang=en”. So when I try to click on any link defined in header.php (eg. Dashboard), here’s what I have: “http://forummille-isles.org/ForumMille-Isles/?lang=enwp-admin/index.php”. How should I put the language parameters at the end of the URL to get this: “http://forummille-isles.org/ForumMille-Isles/wp-admin/index.php?lang=en”?

  6. rgravel says:

    9 Apr, 2009

    I solved my problem. Thanks anyway

  7. wfisimster says:

    11 Apr, 2009

    Génialissime as always ;)

    Implémenté directement sur mon nouveau site ;)

    Bravo & merci !

  8. Eric says:

    13 Apr, 2009

    Im assuming that the same avatar code used for the mootools version will also work for this version?

  9. Jeremie Tisseau says:

    13 Apr, 2009

    I didn’t try it but there’s no reason it would not. I don’t think the ‘get_avatar()’ function changed in WordPress 2.7+.

  10. antonio says:

    13 Apr, 2009

    works ok. It’s a pity it doesn`t work with mootools :-(

  11. Alex Vorn says:

    14 Apr, 2009

    Nice post. Maybe you could have been one step further by showing a demo. :)

  12. Chon says:

    15 Apr, 2009

    PERFECT!! This is the best solution for having a login form on every page and keeping user on the same page after they sign in. I have been looking for a plugin to do this, but this is much better. Thanks for this!

  13. Junard says:

    15 Apr, 2009

    Could show us the code on how the sliding panel will handle the wordpress registration error without redirecting to http://yoursite.com/wp-login.php?action=register.

    Thank you.

  14. dewey says:

    15 Apr, 2009

    Almost perfect! The one thing I dont like is that it sends the user to the default wordpress page A) upon registering B) when retrieving the lost password… All the register/login process should be done on the panel…

    in reply to this…
    “I was surprised to see there was so little documentation about adding a register form to the front page. I found a few plugins but nothing really interesting. If you know something interesting about it, let me know.”

    There is this Ajax login/register script which does the job… it is my primary choice just because your sliding panel script is not standalone :)

    This is the keyword “User can login, register, and retrieve a lost password without ever leaving the page they are on.”

  15. dewey says:

    15 Apr, 2009

  16. Jeremie Tisseau says:

    16 Apr, 2009

    Thanks Dewey. Nice indeed but his script is about 1000 lines of code in total! I could have used the code from wp-login.php and tweak it a little bit to process the login and registration from the panel but the script is about 500 lines too. If I were to add so much code, then it would become a WordPress plugin. I have started to work on one but I am too busy to work on that right now, maybe in a couple of weeks.

  17. Andrei Gusan says:

    16 Apr, 2009

    nice tutorial

  18. tj says:

    16 Apr, 2009

    Anyone have issues when trying to use captcha to prevent spam accounts?

    Mine is redirecting to the regular login page and then changing the captcha image saying I typed it in wrong to begin with.

    TJ

  19. NinePro says:

    17 Apr, 2009

    Thanks for this man, sure it will come in useful

    Keep up the fab work…

    Jason…

  20. WORDPRESSGALA says:

    20 Apr, 2009

    Thanks, very useful!

  21. JR says:

    21 Apr, 2009

    1st – great tutorial. i am self taught (or chronic code stealer) and it was super easy for me to follow. THANKS.

    2. when I first implemented it in my personal site, had no issues (still undergoing major construction… the JR shameless plug sorry).

    And then when i went to implement it on our school site the topbar is dead. here is a Link to the TEST SITE.

    If you need to see the code let me know and i can email it to you(or how ever you need it sent to you)(since i didnt want to comment jack and plus i didnt know how to implement a cool box to put it in.)

    Thanks again for the awesome tutorials and thanks for any help you can shoot my way.

    • Jeremie Tisseau says:

      21 Apr, 2009

      It seems to work fine. What is the problem?

  22. JR says:

    21 Apr, 2009

    oops what i meant was that the top bar buttons arent clickable for me (ff3 3.08 / ie7) and i tested a few different computers… it shows the bar and the items just not the ability to click them and take you to the next page… tried moving the code around and still got nada.

    thanks again for the quick response.

  23. Jeremie Tisseau says:

    21 Apr, 2009

    So you mean after you logged in you can’t click the link inside the panel, right? If so, that’s weird. I really have no idea what could be the problem. Try to turn of your plugins and see if it fixes your problem. Also, I see you are using a frame for your test site. Maybe that’s your problem.

  24. JR says:

    21 Apr, 2009

    will do… thanks again for the quick response. its not so much a big deal on the school site, i wanted it more for me and it works on my site so i’m 85% happy… now just to figure it out.

  25. Jimmy says:

    23 Apr, 2009

    how would I add a avatar option?

  26. Jeremie Tisseau says:

    23 Apr, 2009

  27. Eric says:

    28 Apr, 2009

    I got it to work with all my mootools just fine. Takes a lil work but you can get it to work.

    http://jericosystems.com

    the top login is of course jquery and the “about” on the sidebar, post ratings, and polls are all mootools.

  28. Eve says:

    30 Apr, 2009

    I have tried to tweak the events triggering the slide down and up such as mouseover and mouseout but I can’t get it to work properly. The panel is blinking and rapidly slides up and down many times, it doesn’t work as smoothly as it does with click event.

    Do you know what I can do to fix it?

  29. stacey says:

    8 May, 2009

    How do i install this on a non WordPress website?

    • Jeremie Tisseau says:

      8 May, 2009

      Stacey, each CMS or blog platform are differents. You will have to look into the code and see how sliding panel can be implemented. It won’t work out of the box.

  30. Mandeep Patel says:

    8 May, 2009

    Thank you so much for this wonderful login script. I am not using it on wordpress… but phpbb3 theme that I made and it works great… I am using the raw one… :) Thanks a lot.

  31. stacey says:

    8 May, 2009

    @Jeremie Tisseau

    Thanks for the reply. I actually do not have any CMS currently running on my site. Just regular old php files, lol.

    I wanted to implement this to my website so i could get rid of the log in box on my pages. (move it to the drop down box instead)

    I tried to install it on my regular pages but im not able to get it to work. I tried everything (that i know) but was unable to correctly get it to display. Do you have any step by step instructions on how to get it to work on a regular website? If you need more info just e-mail me and i can give you more details.

    Thanks again!

  32. eddie says:

    25 May, 2009

    GREAT tutorial. Anyone deployed this on thematic yet? Didnt work for me. Jquery conflicts maybe?

    thanks!

  33. Pet Snakes says:

    27 May, 2009

    Thats certainly food for thought, where can I get more information on this?

  34. Kinki says:

    27 May, 2009

    Hi… I very like this useful and nice tool but I’m not using wordpress so can I use it?
    Anyway, I’m using Blogspot now so if can can u pls teach me how to use it with tutorial?

    Thx very much!

  35. birdy says:

    29 May, 2009

    Interesting post,i will perform.Thanx

  36. Pier says:

    31 May, 2009

    Hi…installing it on WPMU it always says that “registration is closed” even if user are allowed to be registered…do u know why? Tks

  37. DUHOVA says:

    31 May, 2009

    All is wonderful, many thanks, only to learn as in panel on Russian to write.
    And that I have got confused.

  38. Andrey says:

    3 Jun, 2009

    great work! thank you! One question: is it possible to change position of panel or it is strongly linked to top of screen?

  39. Silver Firefly says:

    3 Jun, 2009

    Hi,

    Thanks for this article. I intend to use it with some of my future WordPress themes but not for registering/login purposes.

  40. Michiel Ebberink says:

    5 Jun, 2009

    Thanx a lot!!! It helped me understrand jquery just a bit better..

  41. Elliott Goodwin says:

    13 Jun, 2009

    The panel works great in WordPress. Thanks!

  42. Crystal Unrau says:

    16 Jun, 2009

    I recently upgraded to wordpress 2.8 and have noticed problems with the WYSIWYG editor on two sites after added this to the theme. Is anyone else having this issue? All of the other add ins and plugins being used are also used on other wordpress 2.8 sites without any issues so I am assuming this is what causes the issue.

  43. David Kirwan says:

    17 Jun, 2009

    Hi,
    If you go to my site”killerfm.com” and login and try to logout it will redirect you to my first game and I want it to redirect to my homepage. Please help.

  44. JPM says:

    19 Jun, 2009

    Just wondering if anyone has managed to get it working with Chris Pearsons’ DIY Thesis Theme?

  45. strony internetowe wroclaw says:

    20 Jun, 2009

    Does anyone know how to solve issue with lava amp menu? I have realised that there is a problem also with jquery based validation (scriptaculous) ?

  46. wolf says:

    20 Jun, 2009

    Wow! Great tutorial! Took me about 30 minutes to implement as described.
    The only problem that my site has is a conflict with prototype.js – once disabled, the sliding panel works as described. I guess I have to switch over to some jquery library for the feature I was using. GREAT WORK! Thanks!

  47. Paul Pleavin says:

    20 Jun, 2009

    I Am currently redesigning my main site and putting it into wordpress and decided to give this a go.

    Works like a charm, just need to bridge wordpress and IPB now to get them sharing the same login and working with this script.

    Thanks for a fantastic login script….

  48. Andy says:

    21 Jun, 2009

    This is exactly what I was looking for! I use WordPress MU and have registration open. I have to do this under Site Admin > Options. Only users with a certain email domain can register. How can I get the Registration to open up in the pannel?

  49. Michael says:

    22 Jun, 2009

    How would you go about implementing this for joomla

  50. wolf says:

    23 Jun, 2009

    Thanks! This is a great solution.
    I have one problem though! Using prototype on the same page (I am using a commercial template out-of-the-box) the panel slider doesn’t work.

    Would it be hard to make this solution work with mootools instead? Can I use your older tutorial or what do I need to do to get this exact slider to work with motools? Help is much appreicated! Thanks!

  51. Jeremie Tisseau says:

    23 Jun, 2009

    No it won’t be hard, I have already created that panel. You can see it here. But you are going to run into the same problems. jQuery has a noconflict script.

  52. wolf says:

    23 Jun, 2009

    Thanks Jeremie Tisseau,
    I actually fixed the problem inside slide.js by simply replacing “$” with “jQuery”:

    before:
    $(document).ready(function() {

    // Expand Panel
    $(“#open”).click(function(){
    $(“div#panel”).slideDown(“slow”);

    });

    // Collapse Panel
    $(“#close”).click(function(){
    $(“div#panel”).slideUp(“slow”);
    });

    // Switch buttons from “Log In | Register” to “Close Panel” on click
    $(“#toggle a”).click(function () {
    $(“#toggle a”).toggle();
    });

    });

    after:
    jQuery(document).ready(function() {

    // Expand Panel
    jQuery(“#open”).click(function(){
    jQuery(“div#panel”).slideDown(“slow”);

    });

    // Collapse Panel
    jQuery(“#close”).click(function(){
    jQuery(“div#panel”).slideUp(“slow”);
    });

    // Switch buttons from “Log In | Register” to “Close Panel” on click
    jQuery(“#toggle a”).click(function () {
    jQuery(“#toggle a”).toggle();
    });

    });

    and BINGO … all good on my site. Hope this solution works for all that use your fantastic script and have conflicts with prototype! Thanks again for this great solution!

    • Ivan says:

      5 Nov, 2010

      Yes this was the right solution for me too, as my theme is using a lot of jQuery functions, some of them are introduced with the noConflict rule but others are not, so replacing “$” with “jQuery” and deleting the line in wp head which inserts “jquery-1.3.2.min.js” (there is no need to insert it again as wordpress uses google’s latest jQuery library online) solved a lot of headache for me. Thanks a lot Jeremie for these great tips, it looks awesome on my website. Salut :)

      • keryn says:

        8 Aug, 2012

        This also worked for me! Thanks!

  53. Evil says:

    26 Jun, 2009

    Great solution. Thanks!

    I’m implementing in wordpress 2.8 and have top menu which the panel when closed overlaps. Does anyone know how I can remedy this? I was thinking perhaps using a script that would change (lower) the z-index when the panel is closed and return it to a high value when open. Hope that’s not off base. In any event can anyone point me to a solution?

  54. Milin Paul says:

    27 Jun, 2009

    Hai, its a great stuff thanks for it
    I have got a problem… I properly added code and it seems to be working.. I dont have anyother problem with the slider besides, after i login in a user, it works fine.
    But after clicking the log out link the following problem occurs
    —————————————————————
    Access forbidden!
    You don’t have permission to access the requested directory. There is either no index document or the directory is read-protected.

    If you think this is a server error, please contact the webmaster.

    Error 403
    ————————————————————–

    But iam using a local system to develop my wordpress application. So please help me in this matter..

  55. eddie says:

    2 Jul, 2009

    how would i go about a second part of my website, a div down below, be another way to trigger the sliding panel?

    thanks!

  56. Jen says:

    2 Jul, 2009

    I’ve got this working successfully on a clients’ site. However, one thing he isn’t happy about is the fact that after you do the whole “register” process, it redirects to wp-login.php?action=register and all your beautiful work is gone. Is there any way to make it redirect elsewhere or stay on the page/in the dropdown? I’ve been searching for anything on registration redirects but can’t find a thing.

    Thanks for the great script/code!

  57. Jonathan says:

    5 Jul, 2009

    Got a question.
    Is there a possible way to make the sliding log in panel to only show up when an admin is logged in?
    Meaning, i only want it to be visible to the administrators and not users or subscribers on any page.
    If this is possible it would be a great implementation.

  58. Jen says:

    6 Jul, 2009

    @ Jonathan:
    Try replacing the following:

    if (is_user_logged_in())

    with:

    if (current_user_can( ‘level_10′ ) || is_user_logged_in())

    More here: http://wordpress.org/support/topic/217141?replies=10

  59. Chris Beaman says:

    8 Jul, 2009

    Awesome, thank you. The WordPress plugins offered individually are cool, but your instructions here and stylish design are far superior, IMO. I will definitely send some linklove your way. ;)

  60. Jeremie Tisseau says:

    8 Jul, 2009

    Thanks! :)

  61. Jonathan says:

    9 Jul, 2009

    @Jen
    Thanks for the help. I tried that but didn’t work.
    I tried a different method.

    after the,

    put,

    and after the closing div,

    add,

    and your all set.

    With that only the sliding panel will show up when an Admin is logged in.

    Hope this helps anyone. Feel free if you have any question.

  62. Jen says:

    9 Jul, 2009

    @Jonathan,

    Thanks for the tip. Could you try reposting it since the code didn’t show up? I may be interested in doing this in the future.

  63. Jonathan says:

    9 Jul, 2009

    @Jen
    Thanks for the help. I tried that but didn’t work.
    I tried a different method.

    after the, — The tab on top –

    put, if ( current_user_can(‘level_10′) ) :

    and after the closing div, /div

    close the code with, endif

    and your all set.Just remember to add the opening and closing php tags. Web-Kreations will not let me type theme in.

    With that, only the sliding panel will show up when an Admin is logged in.

    Hope this helps anyone. Feel free if you have any question.

  64. Oleg says:

    10 Jul, 2009

    Ok so i mad this work on my site. have 2 problems
    1. when the menue drops down it overlays over the site how do i make it move the site down like above?
    2. featured-content-gallery is not showing up how can i make it work?

    Thank you
    you can email me at ozharsky@gmail.com

  65. R1536 says:

    13 Jul, 2009

    Whether there is a possibility to force panel to settle down not from above, and sideways and to be put forward not in a bottom, and sideways?

  66. Jonathan says:

    15 Jul, 2009

    Look at your read me file.It explains everything.
    Alos look at Jeremie Tisseau post,7th post down from top.

  67. Jasa Web Desain says:

    26 Jul, 2009

    nice tutorial.. very usefully for all web designer.. thanks a lot.

  68. Rolle says:

    28 Jul, 2009

    Very nice, thank you, if you want a german translated version send me a mail :)

  69. maze says:

    29 Jul, 2009

    Nice. But what if the user has disabled java script? (some people do, i think some mobile phones don’t support javascript either but i am not sure about that one.) He won’t be able to login altogehter. How can I make sure that everyone can log in?

  70. Silver Firefly says:

    30 Jul, 2009

    This is why it’s important to make sure you use JS that degrades gracefully. One way in this case would be to have the link redirect to the normal login page. How that would be done I don’t know as I’m a JS newbie.

  71. maze says:

    30 Jul, 2009

    Thanks, Silver Firefly. Thing is, this script doesn’t degrade gracefully. I tried it with JS switched of – no way to log in.

  72. Jeremie Tisseau says:

    30 Jul, 2009

    It can be easily fixed by adding return false; to your js. For example:

    ?View Code JAVASCRIPT
    1
    2
    3
    4
    5
    
    // Expand Panel
    $("#open").click(function(){
     $("div#panel").slideDown("slow");
     return false; 
    });

    Then remove ‘#’ in your Login/register link and replace it by ‘http://yoursite.com/wp-login.php’:

    ?View Code HTML4STRICT
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    
    <!-- if user is not logged in -->
    <!-- The tab on top -->
    <div class="tab">
    	<ul class="login">
    		<li class="left"> </li>
    		<!-- Login / Register -->
    		<li id="toggle">
    			<!-- BEFORE : -->
    			<!--<a id="open" class="open" href="#" rel="nofollow">Log In | Register</a>-->
    			<!-- AFTER : -->
    			<a id="open" class="open" href="http://yoursite.com/wp-login.php" rel="nofollow">Log In | Register</a>
    			<a id="close" style="display: none;" class="close" href="#" rel="nofollow">Close Panel</a>
    		</li>
    		<li class="right"> </li>
    	</ul>
    </div> <!-- / top -->

    If javascript is enabled, it will slide the panel down but if JS is disabled then it will redirect to ‘http://yoursite.com/wp-login.php’.

    This code works great in Mootools. I never tried it in jQuery but it should work fine. Let me know.

  73. Silver Firefly says:

    30 Jul, 2009

    Thank you. Perhaps you could incorporate that into your tutorial for the rest of your readership?

  74. maze says:

    30 Jul, 2009

    Thanks, Jeremie. I’ll give this a try.

  75. Enk. says:

    30 Jul, 2009

    What if I want to use a Link list or something else instead of Login and Sign-up form, etc ?

    • Jeremie Tisseau says:

      31 Jul, 2009

      @Enk. You can put anything you like in this panel. It is up to you

  76. JFord says:

    19 Aug, 2009

    VERY VERY NICE, thank you.

  77. shawn says:

    22 Aug, 2009

    No idea why but it does not seem to work on my sites, even with the default theme.

    I am using wordpress-mu 2.8.4a if that makes any difference.
    I did hear that the new 2.8 series of wp is using an updated vs. of jquery, so it may be a conflict, not sure…

    anyhow no go on mu for me :(

  78. Jeremie Tisseau says:

    22 Aug, 2009

    Yes, maybe it conflicts. Try to remove the line below in step 1 and let us know if it fixes your problem:

    ?View Code HTML4STRICT
    1
    
    <script src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js" type="text/javascript"></script>
  79. Randy says:

    28 Aug, 2009

    Hi Jeremie Tisseau,

    Great script. I love the article but I just can’t seem to get the slider going correctly. First I tried to use the plugins but it didn’t work. I decided I would install the files through your steps and I seem to be stuck. I feel like everything has been done correctly but the slider does not seem to go down. I can log out with ease but that’s about it. Any tips or suggestions? Thanks for your time.

    Randy

    Update: the slider now moves down but it won’t close. Is there something that needs to be done to fix this? Thanks!

  80. Alex says:

    6 Sep, 2009

    Looks really good, got it installed today in my blog, I’m really pleased, many thanks

  81. Berke says:

    14 Sep, 2009

    Hello.I am sorry.I do not know much English.
    http://web2feel.com/creativepress-theme/
    Panel does not work with this theme.Add to panels when a theme does not work in a theme slide.

  82. Jeremie Tisseau says:

    15 Sep, 2009

    I am not sure where you try to put this panel in your theme. Could you explain again?

    I see you have jquery-1.2.6.min.js and I use jquery-1.3.2.min.js. Do you try to link the two versions. If so, it might conflict as you can have just one script at a time. If not, maybe my panel is not compatible with your jQuery version… not sure though. Let us know.

  83. Eric says:

    1 Nov, 2009

    hey mate.

    I got a small issue, nothing major but kinda annoying.

    if you go to http://erichamby.com youll see how i have placed your menu. Only issue is when viewed in Safari it slides the content down, in IE it slides over the content. I think i like the look of it sliding everythign down when it comes down but i cant seem to find that awesome lil code that seems to make ie work.

  84. layuu says:

    15 Nov, 2009

    Hello, i’ve tried to put the sliding panel, bue it doesn’t work…
    It stays as a list, and because i dont understand much of CSS/PHP i dont know how to fix it.
    -.-’

  85. Brandon says:

    7 Jan, 2010

    Thanks for this, it was EXACTLY what I was needing and I luckily stumbled across it to use. I absolutely love it.

    I am having an issue getting my theme that uses Superfish menus to play nicely with this though. After adding this the drop down menus just stopped working. I can’t figure out what to do to get them to play in sync. You can see the problem at http://www.thepokermob.com

    If anyone has any suggestions PLEASE let me know!

    Thanks!

  86. Tsalagi says:

    8 Jan, 2010

    This is a great little program. Set-up was simple and the styling goes easy on the brain. I’ll stop by with a live link when I go live from my local.

  87. Mia says:

    11 Jan, 2010

    Hi Jeremie Tisseau, first of all : Happy New Year & may it bring to fulfillment every hope & aspiration you harbor :) Secondly : Thank You for your super-awesome plugin , I was searching for something like this for my new site & I thank you kindly for devoting your time within its creation . Ok, I installed it ( basically the plugin version from WordPress ) – it is working & is visible ( I had to install the code you provide here in the header.php file ( because w/ the plugin version nothing was showing up ); so I guess this bit of code you provide ehem..did the trick :) However, not all of the content within the drop down is showing – its cut-off :(
    Can you please just take a quick look HERE if you have time and tell me what it is that I must do in order for all the content to be visible? please :( I know you have a lot of requests here , but I would truly appreciate your help in this. In the meantime : I will try to figure this out myself as well ( I’m persistent ! )-
    Thank you again in advance & wishing you much continued future success in all your endeavors .

    M.

  88. Mia says:

    11 Jan, 2010

    OK, I figured it out Jeremie Tisseau :) it was the font size which was the issue – ( since I have custom font implemented into my stylesheet) & it is set at over 26px for the headers , so yea , it was what was creating the problem . Thank you again , it looks awesome ! :) Im so happy – its like Christmas all over again ! :D

    M.

    • Jeremie Tisseau says:

      11 Jan, 2010

      I am glad you could figure it out. Happy new year to you too.

  89. Mia says:

    11 Jan, 2010

    Hey Jeremie Tisseau – ok, one more question : I know this is strictly the & the Login code – when I log out , it takes me to the archives page for some reason and of course , the login must also be conducted from the same page , unless of course I just click on the Home link . Being that Im very new to WP ( 1 week :D ) ; what should I change this to ? I believe this should be the easiest question youve received so far & probably the dumbest , but I dont know what I should alter it to :( ….. help a noob please ?

    Thank you again Jeremie Tisseau .

    M.

  90. Tsalagi says:

    12 Jan, 2010

    Jeremie Tisseau. Happy New year! Hey, I’m trying to open the panel from elsewhere on a page. I’ve used

    Log In | Register
    Close Panel
    but that only toggles the tab’s text. Is it possible to call the slide from elsewhere on a page and still give the user the option of using the tab?

    Thanks

  91. Tsalagi says:

    12 Jan, 2010

    Sorry ’bout that. I wrapped my code in pre tags forgot the language attribute.

    Log In | Register
    Close Panel

  92. Tsalagi says:

    12 Jan, 2010

    Hello again. Have you run this through the validation process? It doesn’t validate due to duplicate use of class in the registration form. I removed class=”input” on both lines and it seems to work fine. However the use of the id=toggle two times doesn’t validate. I tried changing this to class=toggle and changing #toggle in the slide.jss to .toggle but the toggle stopped working. Any pointers?

    Thanks

  93. Detoam says:

    15 Jan, 2010

    This thing is awesome.
    One question though. I am building a custom theme for my website and I decided to go with this rather than a plug in. I am wondering if it’s possible to make it widgetized?

  94. Tim says:

    30 Jan, 2010

    Hey!
    Great tool and it looks awesome. I have it working fine on my site… As long as I’m using IE or Chrome. As soon as I use Firefox, it messes up. There’s no panel and there are large random words all over the page. Someone give me a hand?

    Thanks!

  95. zac says:

    1 Feb, 2010

    excellent code. Thanks for sharing this, I think it will be super useful. I especially like how you incorporate the user roles into what is displayed. bravo!

  96. Tsalagi says:

    1 Feb, 2010

    Hey Tim. Can you give a website that we could look at to try to determine the issue?

  97. Lacey says:

    3 Feb, 2010

    hey there,

    Thank you for this. I am trying to get it to work on thesis theme 1.5.1 so I will report back on my progress.

    Lacey

  98. Jeff says:

    6 Feb, 2010

    I have been looking for this functionality for days. thank you so much. My website will not need the ability to login but I would like to put a contact form instead. Would you have time to guide me in the right direction?

    Thank you so much!!

    Jeff

  99. Jeremie Tisseau says:

    7 Feb, 2010

    You could add a dynamic sidebar to your sliding panel along with Contact Form 7 plugin.

    Once everything is in its place, go to Maintenance > Widgets, drag and drop a text widget to your panel and paste the code of your form (e.g. [contact-form 1 "Contact form 1"]) in to the text widget field. This will automatically display the form into your sliding panel (do not tick the checkbox “Automatically add paragraphs” or it will screw up your form).

    Please note it might close your panel on form validation. If so, you will have to tweak that plugin to keep it open when user hit the send button.

    Let us know. Good luck!

  100. laerador says:

    16 Feb, 2010

    Hey.

    First of, Thanks for your great .. lets call it plugin ;)

    I followed your instruction here to install the slider in the “Equilibirum” theme. But for some reasons the alignment and font-styles are missing, probably due to some style-interferance.

    But i can’t find the problem therefore would like to ask you, if you could have a fast look on my side at

    http://anathematic.de

    thanks for your help!
    Franz, a.k.a. laerador

  101. Garcya says:

    27 Feb, 2010

    Hi,

    I’ve added this to my wordpress blog but I encounter 2 problems:
    1. After the slider moves down the Login/Register won’t change with Close Panel. The same if you’re logged in.
    2. Login form doesn’t work.

    My blog is http://garcya.us
    Thanks

  102. Garcya says:

    28 Feb, 2010

    Login works now, but I can’t make the close button appear after the slide goes down and so the panel won’t close.
    I’m sure I’ve missed something but I can’t find the issue.

    • Jeremie Tisseau says:

      1 Mar, 2010

      It might be a conflict with another script on your page, maybe the Instant Slide Up bar at the bottom which also has a close button. Try to disable that bar and see if the login panel works. If so, rename $(“#close”) in slide.js to something else. Don’t forget to update your html after you changed the name.

      If nothing changed, try to disable another script until you can find which one cause the problem. Let me know

  103. Garcya says:

    1 Mar, 2010

    I’ve removed the script, the slide still isn’t showing the close button.
    I’m sure this isn’t the issue and maybe I’ve forgot something to add ?

  104. Jeremie Tisseau says:

    1 Mar, 2010

    I still think this is because of a conflict because the open button works just fine. Have you tried to rename #close for something else?

  105. LaVar says:

    4 Mar, 2010

    I’m having issues with the graphics on the slider. Adjusting from relative to absolute still has no change with some of the background showing through. Any suggestions?

  106. kevin says:

    12 Mar, 2010

    I have a problem with this in Internet Explorer 8 only. When I enable this plugin, a jpg button image on my page appears, then suddenly disappears. I’ve tried adjusting z-index, but no luck. Any ideas? Works great in firefox and chrome!

    Thanks,

    Kevin

  107. julian says:

    23 Mar, 2010

    nice, but i canot do this… i m new i will keep trying

  108. Alquiler says:

    1 Apr, 2010

    Buenisimo!! Voy a estudiar bien su implementación para introducirlo en mi sitio de pisos en alquiler..va ha quedar genial!! Thanks

  109. Thomas Craig Consulting says:

    8 Apr, 2010

    Great tutorial, thanks for sharing, going to give this a try on my next wordpress project to give it a twitter style login.

  110. arvid says:

    12 Apr, 2010

    This is a fantastic plugin.

    But I have some questions.

    I also use CYC to get away with the wordpress back-end. The problem is that I get more places to login.

    Is it possible to do exactly the same as with CYC in your script.

    I never wanted the user to see the back-end of wordpress. I want to get a front end for everything, including setting up profile, choice avatars etc.

    I tried Ajax login script also. But I dont really know how to use it.

    Any help please.

  111. Andywd7 says:

    14 Apr, 2010

    Great plugin!

    I am having the same problem as Brandon!? I can’t get my theme that uses Superfish menus to play nicely with this. After adding this the drop down menus just stopped working. I can’t figure out what to do to get them to work again.

    I think it’s a clash with some of the jquery but I can’t work out what it is or what I need to change!?

    If anyone has any ideas, PLEASE let me know! I (and I guess Brandon) would really appreciate it!?

    Thank you for any help and the great plugin!

  112. FPS Gamer says:

    15 Apr, 2010

    I was looking for something like this for my new blog. Very nice tutorial, easy to follow and implement. I’ve set it up without any hassle.

    Thanks!!!

  113. Danny says:

    21 Apr, 2010

    Andywd7: I’m having the same problem with Superfish, did you find a solution?

  114. Mike M says:

    27 Apr, 2010

    Hi, great plugin, but I’m using Woothemes Bloggingstream theme, and when I set up the sliding panel, it suddenly loses one of the sidebars on the home page and seems to rename the other one, so I lose content. There must be some sort of conflict but I can’t see what it would be, and I don’t want to lose the panel.

    Anyone experienced this? Any ideas? Thanks!
    themoviesclub.com

  115. nizam6281 says:

    1 May, 2010

    i used this at my themes but it seem there is no slide at all
    but it is expanding my templates to left and right.
    other than that it also make the header show the sliding panel that suppose to be hide
    i used mystique theme form digitalnature.ro

  116. abdullah says:

    22 May, 2010

    I want to ask how to implemented error messages on this slides….without refresh pages, please shared i dont have excelent on programing, and i was find tutorial on google, but i dont understand, please….

  117. AkoZ says:

    27 May, 2010

    Hep good this one !
    Bon enfin… well i just use opera, then there is the “bug” of one of the first post: “Panel won’t overlap flash contents” , but there is no flash content here, just some other div …
    in opera, i …lost about hours to find and modif around the css and php, then i think about other browsers !!! And yep ! as well all is ok on Flock(similar to firefox,) ad ie too !
    so the wrong comes from the “strict” code interpretor of opera it seems ! .
    in fact thanks for your good work !

  118. Arkaël says:

    30 May, 2010

    Exactly what i was looking for! In fact this is better than what I was thinking about. thank you very much!

  119. Brandon says:

    16 Jun, 2010

    Implementation of this tweak is flawless, however it seems to override my lightbox 2 plugin. meaning everything else works fine, but when I go to click a light box enabled image it doesnt open up right.

    Any thoughts or help?

    • Jeeremie says:

      16 Jun, 2010

      I am a bit surprised it conflicts with Lightbox 2. You can try to call your Lightbox 2 js script before or after my script. Sometimes that’s all you need to make it work. Otherwise try the jQuery.noConflict().

  120. Brandon says:

    16 Jun, 2010

    Not sure how to use that no conflict thing, and as for calling lightbox before your scripts im not sure seeing as its a plugin.

    Perhaps im doing something wrong here?

    • Jeeremie says:

      16 Jun, 2010

      @brandon, Any plugin scripts and css files are passed to <?php wp_head(); ?>. You can usually find it in the head of your document (in header.php) right before </head>. Try to call my script right after it or directly in the footer and see if it changes something.

      To use jQuery.noConflict(), read the page I sent you in my previous comment. They explain everything you need to know about it if you want to take the time to understand it.

  121. Brandon says:

    16 Jun, 2010

    Jeeremie I really appreciate the help. My problem is still unresolved but let me share my findings. Even with lightbox activated theres nothing in my header.php that calls a lightbox.js. Next I tried placeing the ‘s codes in various places in the header. Lightbox still wont activate. Then i tried putting it in the footer, and I got the same result. I read the noconflict page, and used this

    $.noConflict();
    // Code that uses other library’s $ can follow here.
    Now im not sure if im using this right or just js dumb (probably just js dumb)

    When placing that code directly above your code the slidedown menu works and lightbox is disabled like normal, when placed inbetween

    <script src="/js/jquery-1.3.2.min.js” type=”text/javascript”>

    and


    <script src="/js/slide.js” type=”text/javascript”>

    The slidedown menu does not work and the lightbox does. And then
    When placed under your code, it kills every rollover item in my page, the light box and your slide menu.

    I removed each bit of scripts line by line and have found that its the jsquery and slide .js that disable to lightbox.

    I know the simple solution would to be just dump lightbox but seeing as this is for a photography site im working around with and that its design flows more elegantly with the lightbox. I do want to use this menu though, its a beautiful piece of work.

  122. Dillon says:

    31 Jul, 2010

    Everything works great but the login wont work? Any suggestions?

    Thanks!

  123. Brício says:

    17 Aug, 2010

    Hello from Brazil .. Sensational Tutorial!! :)

    Thanks!

  124. Azad @ Internet Geeks says:

    17 Aug, 2010

    cool just downloaded the source going to test it today.
    Thanks!

  125. baterie słoneczne says:

    25 Aug, 2010

    Hi! This panel is great, but I have a problem with flash overlay – z order does not help. Could you check this ?

    • Jeeremie says:

      25 Aug, 2010

      Yes, this is a know issue with Flash, not just with my script.

  126. Mikki says:

    30 Aug, 2010

    This is awesome stuff… I Am working with a Theme in WordPress and this code needed complete restructuring however spent half the day and came up with this. http://smartfxs.com However this code does tend to conflict with plug-ins such as CMS member in Firefox :/ still cant figure out how to get the login form so as to type in user name and password in Firefox. Any suggestions anyone?

  127. Pablo says:

    30 Aug, 2010

    hey friend, can you share the PSD files of the images? I want to change the color to gray and red.

    thank you very much.

  128. Heng says:

    30 Oct, 2010

    Hey. I did everything u post in the tutorial. But i can’t upload my theme to my blog. the error pop out is
    Incompatible Archive. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

  129. Trivikram says:

    9 Nov, 2010

    Hi Jeeremie,
    I must Appreciate you for such a great tutorial. You made it so easy. Excellent Effort. I have a issue can you please help on it.

    It is like, When a User logs in, He will get links regarding his user level regarding Dashboard. In that Place I want Buddypress links according to the User. Is there any way to do that ?????

    Thanks & Regards,
    Trivikram.

  130. Myles Gray says:

    20 Nov, 2010

    Hi Jeremie,
    Great tutorial thanks man!
    After a bit of tweaking this is what I came up with:

    http://beta.mutant-tractor.com

    (Just click the login tab @ the top right)

    I’m having trouble with widths though, if a person has a screen 100% width as i have overflow:hidden defined.

    CSS here:
    http://beta.mutant-tractor.com/css/slide.css

    HTML:
    (You’ll have to right click and view source as it’s WordPress and PHP code based)

    Any help would be greatly appreciated,
    Thanks!
    Myles
    (You can test it by just dragging your browser window so its pretty small then scroll right)

  131. Christian says:

    26 Nov, 2010

    Hi Jérémie (devrais je dire bonjour !)

    I’m currently working on a new revision of the web site dedicated to my wife business (not yet online, may be the beta this week end ;) ).

    I implemented your jquery sliding panel in my dev. site. It worked nice except there is no ajax for some of the forms (but I knew this before I started ;) ).
    After few tests on various ajax plugins I installed login-with-ajax.
    This is nice because it works for login, register and forgot password forms. So it covers all my needs.

    I’m currently integrate both (sliding+ajax)and it should do the trick !!

    I think that inserting a small piece of code in the header is enough to have it to work.
    The code for the login/register panel :

    The rest of the magic things are the widget-in.php /widget-out.php in the login-with-ajax customisation.

    If this seems to have some interest for you , I could share my implementation with you.

    Regards.

    • Jeeremie says:

      30 Nov, 2010

      Sure, you could even leave a comment below.

      • Christian says:

        28 Feb, 2011

        Hi all,

        Did anyone try to use the new menu bar in wordpress 3.1 instead of the one Jeremie provided once logged id ?
        The idea : in my implementation I use the login-with-ajax plugin (to have real ajax implementation). And I’ll try to replace the “on” part with the new menu bar…

        Any idea or help ?

        Tha,ks.
        Chris

  132. Don says:

    2 Jan, 2011

    After following well written instructions I got it to work in Firefox.

    However IE9 and Chrome didn’t like it.

  133. imtiaz says:

    10 Jan, 2011

    hi is there any chance to use this one (http://web-kreation.com/tutorials/nice-login-and-signup-panel-using-mootools-12/) for wordpress instead? I prefer it but can’t get it to work for me :(

  134. Eric says:

    14 Jan, 2011

    I sent an email also regarding this question.
    How can I move the register/login box to the left side of the panel instead of it being on the right side???

    Thanks in advance for any help…

  135. Dave says:

    24 Feb, 2011

    Fantastic little login. Great job :)
    I am having a small issue with my site now that I have added your login. My slider on my home page is having errors. Do you have any suggestions?? My site is http://www.theobservermagazine.com
    Thanks

  136. Dave says:

    24 Feb, 2011

    sorry i also just realized that when you are not logged in, the login is over to the far left of the screen, and also my links at the top right of my page are no longer links??? Can you help??

  137. Simon says:

    27 May, 2011

    Is it possible to get this to work with the built in jquery that is now sent in the header of wordpress?

    Generally wordpress loads it like this…

    I tried using this script as is but it breaks my homepage slider if i ask for the jquery-.1.3.2.min.js separately, so can it use wordpress’ Jquery instead? Doesn’t seem to :/

    • Jeeremie says:

      31 May, 2011

      That’s correct. Now WordPress has the latest jQuery version so you don’t need to add it again.

      • ilseong says:

        2 Jun, 2011

        how can i use this elegant script instead of the crappy wordpress adminbar?

        • Jeeremie says:

          6 Jun, 2011

          Disable the wordpress admin bar in the settings and install this script. It should work just fine

          • Kalman says:

            7 Jul, 2011

            Jeeremie,

            First off, thanks so much for this code! Simply Amazing.

            I would like to merge your panel with the built in WP admin bar. Is there a way to do that?

            I would like to remove your HTML and simply call the admin bar. I know it will take some custom css within my functions.php, but if you could point me in the right direction, I should be able to get it working.

            I want to do this, so as WP updates/enhances the admin bar (more or different links), your panel updates (without me having to manually update the html).

            Thanks,

            Kalman

          • Faye says:

            28 Oct, 2011

            Please include steps where I can disable the WP admin bar. I cannot find it my self! Thank you in advance and thank you for this great work which you’ve provided at no coast to us.

  138. Prose says:

    2 Jun, 2011

    Can the sliding panel be used to login to a members only page (plain old login/pwd protected page hidden from public view) that has things like roster, calendar, forums? I.e. Not to login to view the wordpress admin/panel access but to login to a dedicated password protected page which does not show panel/admin user info?

    Thanks so much for your time.

  139. Member says:

    16 Jun, 2011

    Hi, Do you have anything like this but without a login form. I’m looking for a vertical slider panel but just want to put texts and widgets in them. No need to log in or out.
    Thanks and the graphics look nice!

  140. Isaiah says:

    16 Jun, 2011

    Hi, I was wondering there’s a way for your sliding panel to work with just text and widgets instead of login. I would like just add contact info, texts and widgets inside the panel. Thanks!

    • Jeeremie says:

      20 Jun, 2011

      Of course. This is only HTML. You can replace the content with anything you like

  141. Mike says:

    9 Jul, 2011

    Does this work with WordPress 3.2? I’m trying to implement it into a already custom theme. My knowledge isn’t the best so… Have you ever thought of making a plugin instead of raw code? Let me know!

    Thanks,

    • Jeeremie says:

      11 Jul, 2011

      If you read the full article you would see there are a list of plugins at the bottom of this post :)

  142. Maurice says:

    29 Aug, 2011

    Hi,

    After hours on search I found this slinding panel who works well !

    Thanks,

    Maurice

  143. Didac says:

    3 Oct, 2011

    Hey,

    I’m trying to implement this in a Mystique theme, but the images don’t show, I uploaded them in the /images/ folder of the theme but it’s not showing them. ¿?

  144. Didac says:

    3 Oct, 2011

    I’ve solved the image problem, but now the tabs of the theme are not working, like the Widget tabs or the coments/related entry’s. Do you know why this can be?

    Thank you!

  145. Blackfriday says:

    8 Nov, 2011

    Great! But anyway if the user has disabled java script? (some people do, i think some mobile phones don’t support java script either but i am not sure about that one.)

    How can I make sure that everyone can log in?

    • Jeeremie says:

      14 Nov, 2011

      then you need to create a fallback: when Javascript is disabled, the login link would open a new page instead of having a drop down.

  146. Tom says:

    14 Nov, 2011

    Hi,
    I would like to ask if it is possible to show different content of the page for each user?

    How to show different page after login in for each user?

    Thanks,
    Tom

  147. Farah says:

    21 Nov, 2011

    Hi Jeeremie,

    Thank you for this post. I was able to implement the panel on my site and it looks great…However, my jQuery slider on my site is now broken. I am a newbie to wordpress and not very adept at site building in general. I have tried jQuery no conflict code….but I am unsure where to put the code in which file…Help please.

  148. Teddy says:

    25 Dec, 2011

    Hi Jeeremie,

    The download link does not work for me and redirect to “Page not found” error page.

    Appreciate your help on it.

    Thanks!

    • Jeeremie says:

      28 Dec, 2011

      Yes, indeed. Thanks for reporting. I have updated some plugins last week and guess something went wrong. I will try to update this asap!

      • Jeeremie says:

        28 Dec, 2011

        It should work now!

        • Teddy says:

          29 Dec, 2011

          It works, thanks!

  149. Jessie J says:

    27 Dec, 2011

    I’ve implemented this on a few of my websites with, thankfully, only a few minor snags along the way. It’s very sleek, love it!

  150. SoF says:

    4 Jan, 2012

    Hi,
    i have some problems with new panel.
    I was using old one on my old theme and it works great, now i have new theme and i love the new panel but he doesnt show on some pages when user is logged out, panel dont show on main page but it shows on category pages dont know what to do.

    PS. sorry for my english i hope you understand me.

  151. Craig says:

    8 Jan, 2012

    I have this slide here http://unlatchdiary.com I was wondering if there is anyway instead of toggle to implement moo tools mouse enter and leave functions for it to open in close instead.

  152. vikas says:

    4 Feb, 2012

    its not working for me..i am getting following error….. Fatal error: Call to undefined function get_header() in /home/a6593745/public_html/index.php on line 7

    pls help
    thanks

  153. vikas says:

    4 Feb, 2012

    and yes…reply me on my email vikasdevde@gmail.com

  154. Giovanni says:

    4 Feb, 2012

    Hello. I tried downloading the file and others on your website but I get a No page error.

    Any help would be appreciated.

  155. Kayle Simon says:

    6 Feb, 2012

    Really nice. Breaks the existing slideshow on my site, so there must be come conflict there, but I’m going to try to figure out how to make it work. Working with infocus theme.

  156. Jeremy says:

    16 Feb, 2012

    Great form, I used it for a contact form. Is their a way to have a link on a single page to open the sliding panel on the top?

    Thanks

  157. Prateek says:

    19 Feb, 2012

    great!:)….awesome,it worked!:)….thanks!:)

  158. vidhi says:

    19 Feb, 2012

    Hey..
    I would like my sliding panel to remain static throughout the page..When scrolling down a page,the sliding panel should remain visible.
    Any suggestions?
    Thanx!

  159. elisabeth1209 says:

    2 Mar, 2012

    :( I love this panel, but not working for me, I found error when I put the script above into my theme…

    fatal error
    get_header() in public_html/index.php

  160. PLAZA says:

    11 Apr, 2012

    Bonjour j’ai bien suivit tout les étapes pour isntaller le plugin coulissant hos une fois qu’on arrive sur la page il apparait quand sa charge mais disparait une fois la page charger. J’utilise un thème wordpress oscar a 60 euros je suis un peux décut de ne pouvoir l’utiliser sachant que votre baradmin et vraiment top ! pourriez-vous m’aider svp ? merci

  161. PLAZA says:

    11 Apr, 2012

    Re Bonjour quand on veut telecharger le fichier : STEP 3: Add the Javascript files & Images to your theme sa marche pas sa nous marque erreur pages. Pourriez-vous me donner le lien du fichier images car sur notre site http://le-blog.cellule-ecoute-urgence-lgbt.org j’ai pas la barre Merci

  162. Aranjuez says:

    18 Apr, 2012

    Thanks for sharing this great tutorial. and make things easier, all the files I have found and has not given me any error

  163. juan holidays says:

    10 May, 2012

    the lenguahe jquery is very complicated for people who do not know to use it, but thanks to the video tutorial I could enter it on my site, thank you very much

  164. MasterBip says:

    25 May, 2012

    Simplemente INCREIBLE
    Just … AWESOME !!!

    http://www.implementostv.cl

  165. Maxi says:

    28 May, 2012

    I think your tutorial is great!!!!
    Thanks for sharing

  166. gurudas says:

    22 Jul, 2012

    Thank you so much for this wonderful login plugin / script and this awesome article. I have implemented on my Website http://www.e-queries.com and it worked like a charm.

  167. saeed yazdani says:

    23 Aug, 2012

    Problem While Drag On MasterPage With Ascx

Leave a Reply

Sorry, comments are closed