show/hide panel in Wordpress using mootools 1.2

August 12, 2008

AJAX / Javascript, All, Forms, Freebies, HTML / CSS, Mootools, Tutorials, Wordpress

Implement a sliding login panel in to WordPress with Mootools

Article written by Jeeremie
FAQ: Panel doens't slide into view. What's wrong?
Mootools generally conflicts with other AJAX frameworks (jQuery, Prototype...) and the sliding panel will not work! Most probably this is due to one of the plugin you installed that make use of jQuery or another AJAX framework. Disable your plugins one by one to identify which plugin conflicts with this sliding panel.

This is the second part of my tutorial “Sliding Login Panel With Mootools 1.2″. In this tutorial, we will now see how to add the show/hide login panel into your WordPress theme, pretty much like what I did on top of this page (click “login” on the upper-right corner to open the login panel). Before reading any further, read my previous post and come back here when you are done.

The end result:

Here’s what we are going to achieve today:
Show/hide login panel in WordPress using Mootools 1.2

Step 1: The scripts and images

If you haven’t done it yet, download the source code on my previous tutorial:

Download(32.8 KiB, 68,337 hits)

Copy the “js” folder (all of it!) and paste it in your theme folder (for the sake of this tutorial, we will use the “defaut” WordPress theme). The path to your “js” folder should be something like http://yoursite.com/wp-content/themes/default/js/.

Copy all the images and save them in the wp-content/themes/default/images/.

Step 2: The Javascript

Open header.php and add the code below in the <head> section:

?View Code HTML4STRICT
1
2
3
4
5
6
7
8
<head>
...
<!-- Mootools CORE -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools-1.2-core-yc.js" charset="utf-8"></script>
<!-- Mootools MORE -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools-1.2-more.js" charset="utf-8"></script>
<?php wp_head(); ?>
</head>

Step 3: The HTML/PHP

Now add this code right after the <body> tag (click on [+] to expand the code):

?View Code HTML4STRICT
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
<body>
<!-- Login -->
<div id="login">
	<div class="loginContent">
		<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
			<label for="log"><b>Username: </b></label>
			<input class="field" type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="23" />
			<label for="pwd"><b>Password:</b></label>
			<input class="field" type="password" name="pwd" id="pwd" size="23" />
			<input type="submit" name="submit" value="" class="button_login" />
			<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
		</form>
		<div class="left">
        <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
		<div class="right">Not a member? <a href="<?php bloginfo('url') ?>/wp-register.php">Register</a> | <a href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Lost your password?</a></div>
	</div>
	<div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
</div> <!-- /login -->
 
<!-- Start top Navigation -->
<div id="top">
<?php global $user_ID, $user_identity, $user_level ?>
<?php if ( $user_ID ) {  ?>
<!-- If users logged in, display the dashboard navigation: -->
<!-- Admin navigation -->
	<ul class="login">
		<li class="left">&nbsp;</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/">Dashboard</a></li>
 
	<?php if /* if is admin, display menu below */ ( $user_level >= 1 ) : ?>
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">Write article</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/edit.php">Manage Posts</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-pages.php">Manage Pages</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/plugins.php">Plugins</a></li>
	<?php endif // $user_level >= 1 ?>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">My Profile</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Log Out</a></li>
	</ul> <!-- / Admin Navigation -->
 
<?php } elseif (get_option('users_can_register')) { ?>
<!--Toggle effect (show/hide Login form) -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fx.slide.js"></script>
 
	<!-- ... else, display user navigation below: -->
	<!-- login -->
	<ul class="login">
		<li class="left">&nbsp;</li>
		<li>Hello Guest!</li>
		<li>|</li>
		<li><a id="toggleLogin" href="#">Log In</a></li>
	</ul> <!-- / login -->
<?php } ?>
</div> <!-- / top -->

I should explain a little bit the code before we go on:

  • If you are logged in as admin, you will see the full navigation. (This is done with the code <?php if ( $user_level >= 1 ) : ?> ... <?php endif ?>. Anything you put within this code will only be seen by the admins).
  • If you registered to the site as a subscriber, you will only see the links “Dashboard”, “My Profile” and “log Out”.
  • If you are not logged in (which will definitely happen if you are a first time visitor), you will only see “Hello Guest!” and “Log In”. (Register to this site on top of this page if you want to see how it works).

If you wish to add more links to the top navigation, log in WordPress and over a link with your mouse (for example: Settings). Look at the url in the status bar (e.g. http://yoursite.com/wp-admin/options-general.php). Copy only /wp-admin/options-general.php and paste it in the code, like this:

?View Code HTML4STRICT
1
2
3
4
5
<?php if /* if is admin, display menu below */ ( $user_level >= 1 ) : ?>
<li>|</li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-general.php">Settings</a></li>
...
<?php endif // $user_level >= 1 ?>

You can add as many links as you want. The only limit is the width of your site or your screen resolution.

Step 4: The CSS

Open style.css in a text editor and paste at the bottom the code below (click on [+] to expand the code):

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
/* Login Panel */
#top {
  	background: url(images/login_top.jpg) repeat-x 0 0;
	height: 38px;
	position: relative;
}
 
#top ul.login {
	display: block;
	position: relative;
  	float: right;
  	clear: right;
  	height: 38px;
	width: auto;
  	font-weight: bold;
	line-height: 38px;
	margin: 0;
	right: 150px;
  	color: white;
	text-align: center;
  	background: url(images/login_r.jpg) no-repeat right 0;
	padding-right: 45px;
}
 
#top ul.login li.left {
  	background: url(images/login_l.jpg) no-repeat left 0;
  	height: 38px;
	width: 45px;
	padding: 0;
	margin: 0;
  	display: block;
	float: left;
}
 
#top ul.login li {
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 38px;
  	background: url(images/login_m.jpg) repeat-x 0 0;
}
 
#top ul.login li a {
	color: #33CCCC;
}
 
#top ul.login li a:hover {
	color: white;
}
 
/*Login*/
/* toggle effect - show/hide login*/
#login {
	width: 100%;
	color: white;
	background: #1E1E1E;
	overflow: hidden;
	position: relative;
	z-index: 3;
	height: 0;
	font-style: 1em;
}
 
#login a {
	text-decoration: none;
	color: #33CCCC;
}
 
#login a:hover {
	color: white;
}
 
#login .loginContent {
	width: 550px;
	height: 80px;
	margin: 0 auto;
	padding-top: 25px;
	text-align: left;
}
 
#login .loginContent .left {
	width: 120px;
	float: left;
	padding-left: 65px;
	font-size: 0.95em;
}
 
#login .loginContent .right {
	width: 290px;
	float: right;
	text-align: right;
	padding-right: 65px;
	font-size: 0.95em;
}
 
#login .loginContent form {
	margin: 0 0 10px 0;
	height: 26px;
}
 
#login .loginContent input.field {
	border: 1px #1A1A1A solid;
	background: #464646;
	margin-right: 5px;
	margin-top: 4px;
	color: white;
	height: 16px;
}
 
#login .loginContent input:focus.field {
	background: #545454;
}
 
#login .loginContent input.rememberme {
	border: none;
	background: transparent;
	margin: 0;
	padding: 0;
}
 
#login .loginContent input.button_login {
	width: 47px;
	height: 20px;
	cursor: pointer;
	border: none;
	background: transparent url(images/button_login.jpg) no-repeat 0 0;
}
 
#login .loginClose {
	display: block;
	position: absolute;
	right: 15px;
	top: 10px;
	width: 70px;
	font-size: 0.9em;
	text-align: left;
}
 
#login .loginClose a {
	display: block;
	width: 100%;
	height: 20px;
	background: url(images/button_close.jpg) no-repeat right 0;
	padding-right: 10px;
	border: none;
	color: white;
}
 
#login .loginClose a:hover {
	background: url(images/button_close.jpg) no-repeat right -20px;
}

Step 5: WordPress Settings

You will need to follow one more step before you are done. Log in to WordPress, select “settings”, then scroll down to “membership” and select “Anyone can register”. Click save and you should be done. Open your site in your browser and you should see the top navigation. Click on “login” to slide the panel into view.

Done!

Troubleshooting

Not working yet? There could be a couple of things that would stop the script from executing. Here’s a few questions that might help you debug it:

  • Have you enabled Javascript in your browser?
  • Do you use another Ajax framework on your site (Jquery for example)?
  • Is Mootools compatible with your plugins?
  • Is the path to the javascript correct? (E.g. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools-1.2-core-yc.js" charset="utf-8"></script>)
  • Do you use a modern browser such as Firefox 3, Opera or Safari? If not, maybe it is time to upgrade! This script works fine in Firefox 2+, IE6+, Safari, Opera, Netscape. However, I didn’t test it on a Mac or Linux.

Update

In answer to Thomas’ comment, I explain below how to add avatar next to “My Profile” in the navigation after user logged in. Here’s how to do:

Replace the code below in our script…

?View Code HTML4STRICT
1
2
<li>|</li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">My Profile</a></li>

… by:

?View Code HTML4STRICT
1
2
3
4
5
6
7
8
9
10
<li>|</li>
<li><a style="padding-left: 40px;" href="<?php bloginfo('url') ?>/wp-admin/profile.php">
  <?php global $user_email, $userdata;
    get_currentuserinfo();
    if(function_exists('get_avatar')) {
      echo '<span class="NavAvatar">' . get_avatar($user_email, '16').'</span>'; //display user's Avatar
      echo($userdata->user_login); //Display user's name
    }
  ?>
</a></li>

Add this code into style.css:

1
2
3
4
5
6
7
span.NavAvatar {
	position: absolute;
	top: 3px;
	left: 10px;
	padding: 1px;
	border: 1px #000 solid; /*Change border color*/
}

Last, add “position:relative;” to “#top ul.login li”:

1
2
3
4
5
6
7
8
9
#top ul.login li {
 	position: relative;
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 38px;
  	background: url(images/login_m.jpg) repeat-x 0 0;
}

Here’s a screenshot of an avatar display on this site after you logged in:

Thanks Thomas for the Avatar’s idea. That was a good one!

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?

108 Comments

  1. Wifsimster says:

    12 Aug, 2008

    Merci pour cet article, ça permet d’étoffer la barre de login un peu plus ;)

  2. Thomas Clausen says:

    12 Aug, 2008

    It works like a charm, and it looks damn cool. The only problem is the user levels. You have to be user level 8 to use plugins and user level 5 to manage pages: http://codex.wordpress.org/User_Levels

    Maybe, to make it even cooler, you could put a gravatar in there, if a user is logged in, and has a gravatar of cause…

  3. shakaran says:

    13 Aug, 2008

    A plugin for WordPress about it would be pretty good.

  4. sandlog says:

    14 Aug, 2008

    great piece of code.
    i wanted to know how i could add a piece that would check if the user is logged in or not and if they are it would display a link, if not it wouldn’t show up.

    let me know if you could show me how.

    this is my code
    <a href=””>rss feed</a> | | <a href=”/wp-admin/options-general.php”>Dashboard</a>

    But i only want to show the dashboard link if the user is logged in.

    thanks!

  5. Jeremie Tisseau says:

    15 Aug, 2008

    It is what the code does. Look, the code below will display links when user is not logged in:

    ?View Code HTML4STRICT
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    <?php } elseif (get_option('users_can_register')) { ?>
    <!--Toggle effect (show/hide Login form) -->
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fx.slide.js"></script>
     
    	<!-- ... else, display user navigation below: -->
    	<!-- login -->
    	<ul class="login">
    		<li class="left">&nbsp;</li>
    		<li>Hello Guest!</li>
    		<li>|</li>
    		<li><a id="toggleLogin" href="#" rel="nofollow">Log In</a></li>
    	</ul> <!-- / login -->
    <?php } ?>

    … And the following code will display links when user is logged in:

    ?View Code HTML4STRICT
    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
    
    <?php global $user_ID, $user_identity, $user_level ?>
    <?php if ( $user_ID ) {  ?>
    <!-- If users logged in, display the dashboard navigation: -->
    <!-- Admin navigation -->
    	<ul class="login">
    		<li class="left">&nbsp;</li>
    		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/">Dashboard</a></li>
     
    	<?php if /* if is admin, display menu below */ ( $user_level >= 1 ) : ?>
    		<li>|</li>
    		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/post-new.php">Write article</a></li>
     
    		<li>|</li>
    		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/edit.php">Manage Posts</a></li>
     
    		<li>|</li>
    		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/edit-pages.php">Manage Pages</a></li>
     
    		<li>|</li>
    		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/plugins.php">Plugins</a></li>
    	<?php endif // $user_level >= 1 ?>
     
    		<li>|</li>
    		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/profile.php">My Profile</a></li>
     
    		<li>|</li>
    		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Log Out</a></li>
    	</ul> <!-- / Admin Navigation -->

    If you only want to show the links “RSS feed” and “Dashboard”, then replace the code above by this one:

    ?View Code HTML4STRICT
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    <?php global $user_ID, $user_identity, $user_level ?>
    <?php if ( $user_ID ) {  ?>
    <!-- If users logged in, display the dashboard navigation: -->
    <!-- Admin navigation -->
    	<ul class="login">
    		<li class="left">&nbsp;</li>
    		<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/">Dashboard</a></li>
     
    		<li>|</li>
    		<li><a href="<?php bloginfo('url') ? rel="nofollow">/index.php/feed">RSS Feed</a></li>
    	</ul> <!-- / Admin Navigation -->

    Do you understand now?

    If you still don’t get it, read this article from Small Potatoe.

  6. sandlog says:

    15 Aug, 2008

    ok that makes sense.
    i can use that part of the code.

    as much as i like this ajax functionality, i’m using jQuery and not mootools for the rest of the site.

    so it creates a conflict.

    thanks for your help.

  7. Thomas Clausen says:

    17 Aug, 2008

    I figured out how to solve the user rights in comment 2 with this code (which should replace step 3):

    ?View Code HTML4STRICT
    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
    
    <body>
    <!-- Login -->
    <div id="login">
        <div class="loginContent">
            <form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
                <label for="log"><b>Username: </b></label>
                <input class="field" type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="23" />
                <label for="pwd"><b>Password:</b></label>
                <input class="field" type="password" name="pwd" id="pwd" size="23" />
                <input type="submit" name="submit" value="" class="button_login" />
                <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
            </form>
            <div class="left">
            <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
            <div class="right">Not a member? <a href="<?php bloginfo('url') ? rel="nofollow">/wp-register.php">Register</a> | <a href="<?php bloginfo('url') ? rel="nofollow">/wp-login.php?action=lostpassword">Lost your password?</a></div>
        </div>
        <div class="loginClose"><a href="#" id="closeLogin" rel="nofollow">Close Panel</a></div>
    </div> <!-- /login -->
     
    <!-- Start top Navigation -->
    <div id="top">
    <?php global $user_ID, $user_identity, $user_level ?>
    <?php if ( $user_ID ) {  ?>
    <!-- If users logged in, display the dashboard navigation: -->
    <!-- Admin navigation -->
        <ul class="login">
            <li class="left">&nbsp;</li>
            <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/">Dashboard</a></li>
     
        <?php if /* if is admin, display menu below */ ( $user_level >= 1 ) : ?>
            <li>|</li>
            <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/post-new.php">Write article</a></li>
     
            <li>|</li>
            <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/edit.php">Manage Posts</a></li>
        <?php endif // $user_level >= 1 ?>
        <?php if /* if is admin, display menu below */ ( $user_level >= 5 ) : ?>
            <li>|</li>
            <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/edit-pages.php">Manage Pages</a></li>
        <?php endif // $user_level >= 5 ?> 
        <?php if /* if is admin, display menu below */ ( $user_level >= 8 ) : ?>
            <li>|</li>
            <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/plugins.php">Plugins</a></li>
         <?php endif // $user_level >= 8 ?>
            <li>|</li>
            <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/profile.php">My Profile</a></li>
     
            <li>|</li>
            <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Log Out</a></li>
        </ul> <!-- / Admin Navigation -->
     
    <?php } elseif (get_option('users_can_register')) { ?>
    <!--Toggle effect (show/hide Login form) -->
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fx.slide.js"></script>
     
        <!-- ... else, display user navigation below: -->
        <!-- login -->
        <ul class="login">
            <li class="left">&nbsp;</li>
            <li>Hello Guest!</li>
            <li>|</li>
            <li><a id="toggleLogin" href="#" rel="nofollow">Log In</a></li>
        </ul> <!-- / login -->
    <?php } ?>
    </div> <!-- / top -->

    But I would still love to see the Gravatar bit I mentioned in comment 2 ;-)

  8. Jeremie Tisseau says:

    17 Aug, 2008

    I found how to add avatar to this navigation:

    ?View Code HTML4STRICT
    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    <li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-admin/profile.php">
    My Profile
    <?php global $user_email;
     get_currentuserinfo();
     if(function_exists('get_avatar')) {
       echo get_avatar($user_email, '16');
     }
    ?>
    </a></li>
  9. Thomas Clausen says:

    17 Aug, 2008

    Great stuff Jeremie Tisseau

    I kind of got it working, the code you submitted was missing something. I removed the rel="nofollow" and then it worked.

    The only problem is, that the gravatar is using the style from my existing stylesheet. This makes the gravatar float in the next line, kind of in the middle of everything.

  10. Thomas Clausen says:

    20 Aug, 2008

    Thanks a bunch for the update on making the gravatar look great.

    I’ve implemented it now, and I like :-) had to make some small alterations to the css to fit my theme. But I’m happy with the result. Looking forward to more great how-toos

    Thanks again.
    Thomas

  11. Jb says:

    3 Sep, 2008

    I have tested your tutorial but I don’t succeed. I use the great wp_yoghourt theme. Finally i have this result : http://img157.imageshack.us/my.php?image=bderk1.jpg

  12. Jb says:

    3 Sep, 2008

    Faudrait que j’apprenne à lire, je n’avais point vu que tu étais Français, au temps pour moi.
    Donc j’ai suivi ton tutoriel avec le thème yoghourt que je suis en train de massacrer en local (tu ne m’en voudras pas), et cela ne marche pas. J’ai du faire une erreur quelque part, mais je ne vois pas où. Si tu pouvais m’aiguiller, cela me serait très utile.
    Merci d’avance ;)

  13. Jeremie Tisseau says:

    3 Sep, 2008

    JB,

    Difficile de trouver le problème sans voir le code. Essaies de mettre ton site sur un serveur pour que je puisse jeter un coup d’oeil au source code. (PS. J’ai travaille sur beaucoup de projet ces derniers temps. Je ne peux pas te promettre que je pourrais y jeter un coup d’oeil.)

  14. shubelal says:

    5 Sep, 2008

    great work thank you

  15. shubelal says:

    5 Sep, 2008

    realy it is good work.may be it more helpful. but i have little problem in implement. may it will be solved.

    thanks

  16. Gorenje says:

    7 Sep, 2008

    Awesome show and hide menu very elegant and smooth. But I have a problem. It seems that when you upgrade to WordPress 2.6.1 the show/hide login panel won’t work anymore. It means that when you’re logged in you can see the panel, but when you are logged out you can’t see the panel and there is no button for login – Is this problem possible to solve?

    Thanks in advance and thanks very much for the tutorial.

  17. Gorenje says:

    7 Sep, 2008

    Attention: My previous post

    I noticed that I have forgotten to mark “Anyone can register” in my sittings. I am very sorry for making confusion about my question.

    Thanks for understanding and thanks for an awesome work.

  18. Jeremie Tisseau says:

    7 Sep, 2008

    You are welcome. I guessed you forgot to set “Anyone can Register” in your settings.

  19. Gorenje says:

    8 Sep, 2008

    Yeah I did, my bad sorry about that. And thank you for your help :)

  20. Nick says:

    9 Sep, 2008

    Nice little bit of code!

    Might come in handy for my current side project http://www.flamingdesks.com.

    Many thanks, great post!

    Nick

  21. Ahmad says:

    12 Sep, 2008

    hallo, thanks fot this Tool.
    but i have not a Blog, how i can add the Tool after login to my site?
    best regards

  22. Jeremie Tisseau says:

    12 Sep, 2008

    @Ahmad: Is your site run by a CMS. Do you have a login form already on your site?

  23. Ahmad says:

    12 Sep, 2008

    Hallo Jeremie Tisseau,
    My site is not run by a Cms, but i have already login panel.
    thanks

  24. Jeremie Tisseau says:

    12 Sep, 2008

    Then, you have to replace my form (<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">...</form>) by yours, style it as you wish and it should work.

  25. Ahmad says:

    12 Sep, 2008

    ok Thanks

  26. CMS Critic says:

    14 Sep, 2008

    Nice post. Thank you.

  27. toshas says:

    25 Sep, 2008

    hi there cumps form portugal! first of all tks for this great script. i’m having some troubles make it work on wordpress… i have follow all steps (checked and re-checked) inclusive i’m applying this on the default theme just for test, and i can see the admin menu when logged in, and the “welcome guest” logged out, but the slide dont work to me! can u help? i use firebug and its giving an error when debbuging on mootools-1.2-more.js something like “this.addEvent is not a function”… i already try downloading a new .js of the mootools site but gives me the same error… i dont know if is of any importance! any idea?
    tks in advance :)

  28. Dan says:

    4 Oct, 2008

    Hello there,

    I was wondering, what should I do if i have another ajax framework on my site? id quite like to stick to it as a lot of my site elements require it. is there any way to modify your code to use a different framework?

    Many thanks

  29. Jeremie Tisseau says:

    4 Oct, 2008

    The toggle effect is common to most of the AJAX frameworks but the code is sligthly different for all of them. You will have to rewrite the javascript code entirely.

  30. Daniel Doyle says:

    4 Oct, 2008

    I’ve got help from a friend and re-written it using the jquery framework:

    $(document).ready(function(){
    $(”#login”).css({ “height”:”auto” }).hide();
    $(”#toggleLogin”).click(function(){
    $(”#login”).slideToggle(”slow”);
    });
    });

    yet it still doesnt work :( does anyone have any ideas?

    thanks

    • daniel says:

      29 Aug, 2011

      Hi the jquery code is fine, but you have to change the quotation marks to make it work. i dont know why, but i coded the same into jquery and it worked so when i compared yours with mine it was the same, so i copied yours and it didn’t worked until i realised the quotation marks are different. use: ” instead of: ” . Hope that helps.
      I had to use jquery (what i also prefer) because the mootools core and more are crashing my layout for some reason…
      anyway, thanks for this Jeremie, its a great thing!!!

  31. Firefly says:

    17 Oct, 2008

    Sorry I got to write second time, but this is simply unreal. I know most WP blogs/plugins/tutorials, and this is first time on web-kreation.com.

    Just wow, thank you so much.

    Firefly :-)

  32. sumit says:

    21 Oct, 2008

    i am not getting proper result please help ! width is small and password input is shift to down in arranging help me
    i will be thankful to you very much

  33. jc min says:

    7 Nov, 2008

    Is there anyway we can do this with mootools 1.1 not mootools 1.2?

    currently i am using smoothgallery 1.1 and your login script on wordpress (got it working using both mootools 1.1 and mootools 1.2 somehow)..

    the problem is smoothgallery breaks when i log in but works fine when i don’t log in.

    i narrowed it down to mootools 1.1 problem..

    is there anyway to convert this code to use 1.1 mootools?:P

  34. Jeremie Tisseau says:

    7 Nov, 2008

    You will need to rewrite the code and get fx.slide.js for mootools 1.1.

  35. jc min says:

    8 Nov, 2008

    well i knew that much hehe, not really good with coding ><

    thx anywayz!

  36. Eric says:

    2 Dec, 2008

    First off i would like to start by saying well done. Not only is this a great coding but your tutorial is top notch.

    Im having one lil problem though. I put this code on my site at http://vasthtml.com and when you go to the support page there is a login form also for the support forums. I have noticed in Firefox, Chrome, and Safari when someone tries to use the forum login form it will not work becouse it keeps trying to just up to the top login form on this script. any ideas on how to stop this.

  37. Jeremie Tisseau says:

    2 Dec, 2008

    My guess is because you use twice the same login form on the same page. Since this form is already on top, maybe you could just add a link to invite your users to login. This link would toggle the login form on top. Have a look at the code below and you will understand what I mean:

    index.html:

    ?View Code HTML4STRICT
    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
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     
    <head>
      	<title>Show/hide Login and Signup Panel using Mootools 1.2</title>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
     
    	<!-- The main style sheet -->
      	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
     
    	<!-- START Fx.Slide -->
    	<!-- The CSS -->
      	<link rel="stylesheet" href="fx.slide.css" type="text/css" media="screen" />
        <!-- Mootools - the core -->
    	<script type="text/javascript" src="js/mootools-1.2-core-yc.js"></script>
        <!--Toggle effect (show/hide login form) -->
    	<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
    	<script type="text/javascript" src="js/fx.slide.js"></script>
    	<!-- END Fx.Slide -->
     
    </head>
     
    <body>
    	<!-- Login -->
    	<div id="login">
    		<div class="loginContent">
    			<form action="#" method="post">
    				<label for="log"><b>Username: </b></label>
    				<input class="field" type="text" name="log" id="log" value="" size="23" />
    				<label for="pwd"><b>Password:</b></label>
    				<input class="field" type="password" name="pwd" id="pwd" size="23" />
    				<input type="submit" name="submit" value="" class="button_login" />
    				<input type="hidden" name="redirect_to" value=""/>
    			</form>
    			<div class="left">
                	<label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
    			<div class="right">Not a member? <a href="#" rel="nofollow">Register</a> | <a href="#" rel="nofollow">Lost your password?</a></div>
    		</div>
    		<div class="loginClose"><a href="#" id="closeLogin" rel="nofollow">Close Panel</a></div>
    	</div> <!-- /login -->
     
        <div id="container">
    		<div id="top">
    		<!-- login -->
    			<ul class="login">
    		    	<li class="left">&nbsp;</li>
    		        <li>Hello Guest!</li>
    				<li>|</li>
    				<li><a id="toggleLogin" href="#" rel="nofollow">Log In</a></li>
    			</ul> <!-- / login -->
    		</div> <!-- / top -->
     
            <div class="clearfix"></div>
     
     
    		<div id="content">
                <a id="toggle" href="#login" rel="nofollow">Log In</a> | <a href='http://vasthtml.com/wp-register.php?redirect_to=' rel="nofollow">register</a>
    		</div><!-- / content -->
     
     
            <div class="clearfix"></div>
    	</div><!-- / container -->
     
    </body>
     
    </html>

    fx.slide.js:

    ?View Code JAVASCRIPT
    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
    
    /* FX.Slide */
    /* toggle window for the login section */
    /* Works with mootools-release-1.2 */
    /* more info at http://demos.mootools.net/Fx.Slide */
     
    window.addEvent('domready', function(){
     
    	$('login').setStyle('display','block');   
    	var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state
     
        $('toggleLogin').addEvent('click', function(e){
    		e = new Event(e);
    		mySlide.toggle();
    		e.stop();
    	});
     
        $('toggle').addEvent('click', function(e){
    		e = new Event(e);
    		mySlide.toggle();
    		e.stop();
    	});
     
        $('closeLogin').addEvent('click', function(e){
    		e = new Event(e);
    		mySlide.slideOut();
    		e.stop();
    	});
     
    });

    I hope that works for you.

  38. Eric says:

    2 Dec, 2008

    Ok here is the section for the login on the forum. I got everything replaced ok while ago but still couldnt get it to slide the menu down.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    function login_form(){
                           global $user_ID;
                           $user = get_userdata($user_ID);
     
                           if(!is_user_logged_in()){
                                   return "<form action='".get_bloginfo('url')."/wp-login.php' method='post'>
                                           <p>
                                           <label for='log'><input type='text' name='log' id='log' value='".wp_specialchars(stripslashes($user_login), 1)."' size='12' /> ".__("Username", "wpforum")."</label><br />
                                           <label for='pwd'><input type='password' name='pwd' id='pwd' size='12' /> ".__("Password", "wpforum")."</label><br />
                                           <input type='submit' name='submit' value='Send' class='button' />
                                           <label for='rememberme'><input name='rememberme' id='rememberme' type='checkbox' checked='checked' value='forever' /> ".__("Remember me", "wpforum")."</label><br />
                                           </p>
                                           <input type='hidden' name='redirect_to' value='".$_SERVER['REQUEST_URI']."'/>
                                   </form>";
                           }
                           else
                                   return "<p>You are logged in as $user->user_login</p>";
                   }
  39. Jeremie Tisseau says:

    2 Dec, 2008

    Have you tried this:

    1
    2
    3
    4
    5
    6
    7
    8
    
    function login_form(){
     global $user_ID;
     $user = get_userdata($user_ID);
     
     if(!is_user_logged_in()){
      return '<a id="toggle" href="#login" rel="nofollow">Log In</a> | <a href="http://vasthtml.com/wp-register.php?redirect_to=" rel="nofollow">register</a>';
      } else return "<p>You are logged in as $user->user_login</p>";
    }

    and add the code below in fx.slide.js as shown in my previous comment:

    ?View Code JAVASCRIPT
    1
    2
    3
    4
    5
    
    $('toggle').addEvent('click', function(e){
     e = new Event(e);
     mySlide.toggle();
     e.stop();
    });
  40. Eric says:

    2 Dec, 2008

    Yea i just put everything up like you said and its still not working, i left everything installed if you want to go look at it.

  41. Jeremie Tisseau says:

    2 Dec, 2008

    Why did you write “#login” ?

    ?View Code HTML4STRICT
    1
    
    <a id="toggle" href="#login" rel="nofollow">Log In</a>

    “#” is enough. However, it should not be a problem.

    The problem is actually located in fx.slide.js. Here’s how it should be:

    ?View Code JAVASCRIPT
    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
    
    /* FX.Slide */
    /* toggle window for the login section */
    /* Works with mootools-release-1.2 */
    /* more info at http://demos.mootools.net/Fx.Slide */
     
    window.addEvent('domready', function(){
     
    	$('login').setStyle('display','block');   
    	var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state
     
        $('toggleLogin').addEvent('click', function(e){
    		e = new Event(e);
    		mySlide.toggle();
    		e.stop();
    	});
     
        $('toggle').addEvent('click', function(e){
    		e = new Event(e);
    		mySlide.toggle();
    		e.stop();
    	});
     
        $('closeLogin').addEvent('click', function(e){
    		e = new Event(e);
    		mySlide.slideOut();
    		e.stop();
    	});
     
    });

    … and you wrote:

    ?View Code JAVASCRIPT
    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
    
    /* FX.Slide */
    /* toggle window for the login section */
    /* Works with mootools-release-1.2 */
    /* more info at http://demos.mootools.net/Fx.Slide */
     
    window.addEvent('domready', function(){
     
    	$('login').setStyle('height','auto');
    	var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state  
     
        $('toggleLogin').addEvent('click', function(e){
    		e = new Event(e);
    		mySlide.toggle();
    		e.stop();
    	});
     
        $('closeLogin').addEvent('click', function(e){
    		e = new Event(e);
    		mySlide.slideOut();
    		e.stop();
    	});
     
    });
     
    $('toggle').addEvent('click', function(e){
     e = new Event(e);
     mySlide.toggle();
     e.stop();
    });

    Do you see your mistake now?

    Update fx.slide.js and it should work now.

  42. Eric says:

    2 Dec, 2008

    Yes that did get it to work. However i did have to change the ‘display’,’block’ tags back to ‘height’,’auto’ to get it to work. Im not sure if this will cause a problem or not by changing it but it is working now. Also getting script errors by doing this but i dont think there much concern. Thanks a ton for the help.

  43. Jeremie Tisseau says:

    3 Dec, 2008

    :)

  44. charlie says:

    4 Dec, 2008

    Hi there… wow, nice stuff man. I want to do something like this but not in wordpress or any cms, only on a web site, and, if posible, encrypted, but not necessary.
    Could you help me? I’m not very good with all this stuff for now, I mean, PHP and Ajax.
    Anyway, GREAT man!

  45. Jeremie Tisseau says:

    8 Dec, 2008

    Without a CMS there will be no login form so I don’t really see how you are going to use this toggle panel. If you need to implement a login system into your site, maybe you should read PHP components: login system to get started.

  46. MGTGamer says:

    12 Dec, 2008

    hey thanks for the code Jeremie Tisseau!
    i got it working before but the text was too big, so I was looking through the CSS file, but didn’t edit anything – but now when I refresh the page the whole thing is missing :(

    if you could please help me out, i’ve “re-done” the tutorial 3 times now, but the bar at top doesn’t appear anymore.

    I put all the images, I put the JS folder (there’s only 3 files in this folder, is that right? because theres a “fx.slide.css” outside the JS folder – but I didn’t touch that) but still no luck

  47. Chronix says:

    12 Dec, 2008

    thanks Jeremie Tisseau! congrats on a great ‘hack’
    just wondering if we can we make this overlap the website (blog) header?

    thanks much appreciate

  48. Jeremie Tisseau says:

    12 Dec, 2008

    You can’t use jQuery and Mootools on the same page (view source code). I have said it a few times already on this site. You can only use one AJAX library at a time.

  49. MGTGamer says:

    12 Dec, 2008

    Hey
    I didn’t use any jQuery, haven’t even heard about it, till you mentioned :(

    I followed your tut as above this page now I got the images to show up playing around with but now when I press “log-in” the slide doesn’t occur :S

    any help?
    thansk

  50. Jeremie Tisseau says:

    12 Dec, 2008

    If you check your source code in your browser you will see there’s jQuery (in the HEAD section) which is another AJAX library. Maybe you didn’t install it directly but it can be a plugin you installed which needs jQuery to run. Uninstall all your plugins and try my code. If it is still not working then it might be another problem.

  51. Jeremie Tisseau says:

    12 Dec, 2008

    @Chonix: Yes, read this »

  52. MGTGamer says:

    12 Dec, 2008

    Ohhh I see, looking through the source code and researching a bit <- it’s included in the WP-Include, and I doubt that’s a plugin but more a feature of the new WordpPress 2.7 :)

    I’ve read the comments, could I “convert” this wonderful, godsent script to Jquery instead?

    Thank Jeremie Tisseau,

  53. MGTGamer says:

    13 Dec, 2008

    Jeremie Tisseau, I’ve disabled all my plugins, but still won’t work.
    any updates on this?

  54. Jeremie Tisseau says:

    13 Dec, 2008

    @MGTGamer: you should have a look at this video »

    Your server seems to be down. I can’t have a look at your site.

  55. Richard says:

    17 Dec, 2008

    mooTools and jQuery can be used together easily. jQuery can run in noconflict mode. In noconflict mode, all insances of ‘$’ are replace with ‘jQuery’. It only takes one line to turn on noconflict.

    jQuery.noConflict();

    Then make jQuery calls knowing that mooTools won’t get in the way.

    jQuery.(this).attr(“src”);

  56. Jeremie Tisseau says:

    17 Dec, 2008

    Thanks Richard. That is something I read a while ago but actually never tried it. Here’s the jQuery documentation page: Using jQuery with Other Libraries.

  57. JSB Web Design says:

    1 Jan, 2009

    Wow, really cool. Now if this could be in jQuery, especially considering the tie in with WordPress, that would be very cool.

  58. mike says:

    4 Jan, 2009

    Hello,

    First let me say thanks for sharing such a cool wordpress hack. This is the perfect solution to community and multiple user sites. I cant wait to start to customize this around my website.

    Before I can do that I have to get this working. I followed the tutorial to a tee so I think all of the code is correct. There are two known issues right now.

    1. When logged into the admin and I click logout it says “You are attempting to log out of Aquaculture Talk” with a link below that. The issue is it wont let you log out

    2. When not logged in and when you click on log in the dropdown doesnt happen.

    I removed all plugins so that is probably not the issue. Any help here would be greatly appreciated.

    Thanks.

  59. mike says:

    4 Jan, 2009

    I noticed it also destyled my page. The orange should be rounded corners.

  60. mike says:

    4 Jan, 2009

    One more thing. The destyling appears to only be with mozilla.

    Hope you can help me to get this running.

  61. mike says:

    4 Jan, 2009

    I thought that running the multi level navigation on the site was causing the problems. I deactivated the plugin and even removed all of the java files from my server.

    Somehow the navigations still works but the dropdown login is still not good.

    This is a link to the navigation plugin http://pixopoint.com/multi-level-navigation/

    is this causing my issues?

  62. Mandeep says:

    19 Jan, 2009

    Ok have a problem here…

    Did everything as you said… all the steps I know I am doing right… when I open the site.. .everything seems to load fine… but then… the thing wont slide down…

    I have the any user can register turned on as well… but still it wont slide down… double checked all the links and all of them are right… I am copy/pasting the code.. so I have low risk of running in any errors in code perspective… since u already have a working one here… any ideas what is going on?

    All help will be appreciated thanx.

  63. vrs says:

    20 Jan, 2009

    hi thr..
    i m using mimbo pro theme for my wordpress site..
    i already hv a js folder under theme…
    also i tried to do as u said bt no success ..pls help me out..

  64. Nerdious! says:

    25 Jan, 2009

    In step three in order to make the logout feature work with WordPress 2.7 you need to replace the following code in step 3:

    1
    
     (((<li><a href="<?php bloginfo('url') ? rel="nofollow">/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Log Out</a></li></ul> <!-- / Admin Navigation -->)))

    by

    1
    
    (((((<?php echo wp_logout_url(); ?><?php echo '&redirect_to='.$_SERVER['REQUEST_URI']; ?>)))))

    Press Ctrl + F in your browser to bring up the search feature. Enter the previous code to highlight what needs to be replaced, and replace the previous code with the following:

  65. betty says:

    25 Jan, 2009

    great work thank you!

  66. YoU says:

    21 Feb, 2009

    Cool tutorial but I found the user level doesn’t really work for 2.7. I log in as Admin but am only able to see the dashboard and profile link. What should I do with the user level of “>=1″?

  67. YoU says:

    21 Feb, 2009

    Here’s another problem with 2.7. You won’t be able to find the “Log In” on the top-right corner if you are not log in. And if you log in (via the wp-login.php) you will only be able to see dashboard and profile link (user level problem?).

  68. Jeremie Tisseau says:

    21 Feb, 2009

    PHP tags are a bit different for WordPress 2.7. I will have to check it.

  69. Jimmy says:

    2 Mar, 2009

    Mind if you update this tut. so it will be compatible with wordpress 2.7.1.

  70. Jimmy says:

    4 Mar, 2009

    Btw, I use other jquery. My image slider and my sidebar chat. I was wondering is their a way to fix the problem it has with this.

  71. Jeremie Tisseau says:

    4 Mar, 2009

    Please, read the comments above. We already talked about that topic before. Actually, it seems everyone ask me this question over and over. I think I have said it something like 10 times already :(

  72. zdeno says:

    7 Mar, 2009

    Thanks for nice tutorial..Everything working nice and smooth ..
    How can i change size of avatar for that menu?
    Thanks in advance

    • Jeremie Tisseau says:

      9 Mar, 2009

      See this code: “get_avatar($user_email, ’16’)” ?
      ’16’ is the size of your avatar in pixels. Change it for ’32’, ’48’ or any size you want.

  73. Jonny says:

    17 Mar, 2009

    Hi Jeremie Tisseau,

    Great script, but after upgrading to 2.7.1 I’m having the same problem as YoU, with regards to the login link not showing up when the user is not logged in. Any idea how to fix this?

  74. alex says:

    20 Mar, 2009

    or….can i take only the above? on? cuz i allready have the one from ‘up’ sign in thing.
    so can u take the one where are the dashboard,log out,manage…..etc? and ad it to adobe cs 4? dreamwaver? plz sorry for the bad righting language….:))

  75. alex says:

    22 Mar, 2009

    Any chance for  someone to make this work with jquery?

  76. dewey says:

    25 Mar, 2009

    Very nice WordPress login solution! The only thing I don’t like is that the ‘Register’ and ‘Forgot Password’ links take you to the default WordPress pages, whereas it would be great to have those functions also on the panel. Any plans to add this?

    • Jeremie Tisseau says:

      25 Mar, 2009

      I am currently working on this. In the new version, there will be two forms in this panel: the login and register form. When, user is logged in panel will show the admin navigation with most the links (New Post, New Page, Settings, Appearance, Plugins and so on).

      Other improvement: tab images will be transparent so you can set a different background color and not exclusively white.

  77. dewey says:

    25 Mar, 2009

    Great news! Can hardly wait! (You should put up a Paypal donate button ;))

  78. Jon says:

    26 Mar, 2009

    I followed all the steps and i get the bar only with links. The problem is that the links dont work and neither does the drop down. i cant get it to work. help pls i have added my site.

    Thanks in advanced.

    • Jeremie Tisseau says:

      26 Mar, 2009

      jQuery and Mootools conflict together. That’s why it doesn’t work. As I said in the comments above, I am building a new version but with jQuery and it will have many improvements both for design and functionnalities. I still need to test it in IE6+ and write a tutorial to how to implement it into WordPress. Come back to visit soon or subscribe to my RSS.

  79. Jon says:

    26 Mar, 2009

    Thanks for the help. Ill be here checking back.
    sorry about the jQuery i didnt see that the theme had them implemented. Forgot about it.

  80. RaiulBaztepo says:

    29 Mar, 2009

    Hello!
    Very Interesting post! Thank you for such interesting resource!
    PS: Sorry for my bad english, I’v just started to learn this language ;)
    See you!
    Your, Raiul Baztepo

  81. Eric says:

    30 Mar, 2009

    Started a new site last night. Using this on a few of my sites and wouldn’t have a site without it. However after getting the site up and going i notice that when im logged in has admin it wont show the page links i have set for the admin to see. I thought this may be a WP 2.7 issue but it seems to work on my test site and my other sites fine. Is there any other reason this would not be working?

  82. Jeremie Tisseau says:

    2 Apr, 2009

    You can try this code to display links to admins only:

    1
    
    <?php if ( current_user_can('level_10') ) : ?>your links here<?php endif ?>

    If you write level_0 instead of level_10, it will show the links to all levels (from subscriber to admins). Check user roles in the codex.

  83. Eric says:

    2 Apr, 2009

    i was using [code]= 10) : ?>[/code]
    must have been the pre-2.7 way to do this.

  84. Bamboo says:

    3 May, 2009

    HI!
    Waiting for a tutorial non word press……..
    is it possible?
    thank you.

  85. charles law says:

    5 May, 2009

    hi i implemented this hack and tinkered around with it a bit, now when everytime the page loads you can see the top bar for a second before it hides itself again

    http://www.lateralprocess.com/blog/

    any help would be appreciated on how to fix this.

    thanks

  86. Sean says:

    6 May, 2009

    PLEASE help! I created the login successfully however there seems to be something wrong with the CSS. Go to my site, please tell me what I have to edit to get rid of the long black line at the bottom of the login panel and the white box around “Hello Guest”. Does anyone else have this problem after installing??

    Thanks

  87. Jeremie Tisseau says:

    6 May, 2009

    @Sean, images are not transparent. That’s why there’s a white background around the images. Please, check my latest jquery script: Nice & Clean Sliding Login Panel built with jQuery.

    You have twice <div id=”top”> on your page. Rename the second one containing your logo.

  88. Sean says:

    6 May, 2009

    Thanks for the reply Jeremie Tisseau. I had the J Query version at first. Apparently I needed to use the Mootools one in order to run other plugins <div id=”top” twice. Any idea which file its in?

  89. Sean says:

    6 May, 2009

    Nevermind I found it, thanks. What would I need to edit in the CSS to get the panel to go all the way to the top of the screen? There is a small gap showing.

  90. Jeremie Tisseau says:

    6 May, 2009

    That’s because you have 3 dots (‘…’) right after the BODY tag. Delete them.

  91. Natalie says:

    24 May, 2009

    hi. i’m from Russia. i have one problem: don’t display russian language in login panel.

  92. V.C says:

    11 Jun, 2009

    I was wondering If you could create a plugin :)

  93. Liliana says:

    27 Jul, 2009

    Hey thx can you tell me how to implement this with mysql for makin a connection

  94. sapis says:

    27 Jul, 2009

    i want to know 2 how to make a mysql connection with this login

  95. Tamsin says:

    27 Oct, 2009

    Hi, I’ll post the link to my site when i go live. Just wanted to say THANK YOU. What an awesome piece of scripting/coding/inventing. My site looks slicker because of same. Tam

  96. diziizle says:

    29 Apr, 2010

    thank you very nice 10/10 :)

  97. Tamsin says:

    4 May, 2010

    Here’s a link to my site using the mootools sliding login panel. http://millenniumscriptsupervisors.com/ only one question, if the user uses the sliding panel to register it still defaults to wordpress registration, or in the case of my blog, because of this feature I’ve added a plugin called CYC which changes the wordpress backend to look like your blog. I would prefer my users to only log in using the mootools panel. Any advice? For instance some of the downloads on my blog require registration first using wordpress download monitor plugin, however the user when attempting to download is referred to the backend login. It would be really neat if the sliding panel would open instead.

    Thanks in advance.

    Tamsin

  98. Alex says:

    25 Jul, 2010

    Hello,

    How do I make it not movable? Every time I resize window of the browser it moves to the left side.

    Best Regards,
    Alex

  99. john says:

    13 Jan, 2011

    I’ve follow the steps to install this script, but the sliding of login won’t work :(

  100. john says:

    13 Jan, 2011

    woops i got it working. now only problem is why when i log out, it is asking me in another page that i want to really log out? and it should redirect me to my previous page. instead i’m redirected to the wp-login page. :(

  101. Dana says:

    29 Apr, 2011

    HI
    can u upload ur files with another website??
    the files don’t available to me plz

  102. Mike says:

    19 Oct, 2011

    Do you have an unobtrusive version for designers?

  103. Adrian Brito says:

    13 Mar, 2012

    Hey I needed Your help!! Please was wondering if u could help me!!

  104. Nicholas Griffin says:

    1 Apr, 2012

    Hey,

    I installed the bar on my website, which is great by the way, i was just wondering if there was any way i could make it hover over my logo?

Leave a Reply

Sorry, comments are closed