Overview

We will cover everything from exporting/importing a database in PhpMyAdmin to creating a new one, creating a new user, updating user privileges… And last but not least, I will show you how to update your old domain name URIs (e.g. http://old-domain.com) to your new domain name (e.g. http://new-domain.com) using SQL Queries in PhpMyAdmin.

SQL Query is a powerful tool that you can use within your MySQL database: you can create, drop or update one of your tables, select or delete a specific row… and much more. So as always, be sure to make a backup of your database before playing with this tool; if not, you could seriously screw it up. I always recommend to save your backups in at least two different places. That could be on your computer, external hard drive or in the cloud (Dropbox, Mozy Backup…).

For this tutorial, I will assume you have an Apache server and PhpMyAdmin installed. PhpMyAdmin is easier to use than it might seem at first glance so don’t let this scare you. This step by step tutorial should hopefully be simple enough even for a first time user.

If you are a more experienced user, you may want to skip some sections and go straight to “Step 6: SQL Queries“.

Let’s get started!

Step 1 – Download/Upload all your WordPress files Via FTP

First things first, you will need to download ALL your files from your old host and upload them to your new host.

• Connect via FTP or SFTP to your old host with your favorite FTP client. Mine is Filezilla but WinSCP is also a good alternative for Windows. To configure your FTP client, refer to your host documentation. If you can not find it, contact a technician. Hosting companies usually offer a 24/7 support and they should be able to provide an answer within a few hours or less.

  Note: SFTP stands for SSH File Transfer Protocol. Not all hosts allow you to transfer files via SFTP but if they do you should favor this protocol over FTP. That basically means that all your files will be encrypted during transfer (read “more secure”).

• Once connected, browse to your WordPress folder and download all your files locally onto your desktop or into a specific folder of your choice. This includes files from your themes folder and plugins folder. Make sure to save the .htaccess file at the root of your WordPress site. Neglecting to save your .htaccess file will result in broken permalinks. That is of course if you are using permalinks.
• Now that you have made a backup of your WordPress site, you will need to upload ALL your WordPress files to the new host. Configure your FTP client to connect to it.
• Browse to your new site directory and transfer all the files from your machine to the server.

Step 2 – Export your database

Connect to PhpMyAdmin on your old host. Most hosting companies have Cpanel or a similar control panel. On the main screen, you should see a bunch of icons. Scroll down to the Databases section and log into PhpMyAdmin.

• Once you have reached PhpMyAdmin, you will see all your databases on the right hand side of the panel. Select the database that correspond to your WordPress install. It will load all your tables on the next screen. Click the export tab on the top.
  
• On the next screen, select all the tables.
  
• Scroll to the bottom and check “Save as file”. Leave the default valued (_DB_) or give it a custom name. If you have a large database you might want to zip it. Click Go. It will ask you where you want to save the file. Select a folder and click save.
  

Step 3 – Create a new database

If you have Cpanel, you can directly create a new database right from the control panel (Cpanel -> Databases -> MySQL Databases -> Create Database) but since we are talking about PhpMyAdmin in this tutorial, I am going to show you how to do so in PhpMyAdmin.

• Connect to PhpMyAdmin on your new host. On the home page, you should see a field to create a new database. Enter the name of your database and click “Create”.

  

  If everything has worked correctly, you should see this message:

  

Step 4 – Create new user in PhpMyAdmin

Once you created a new database, the next step is to create a user to administrate this database.

• Click on the privileges tab on top.

  

• It will take you to this page:
  
• Click on “Add a new user”. On the next page, choose your username and then select “localhost” in the Host section. For password, you can either enter your own or generate one.
• Now Scroll down to Global privileges section. Leave it blank at the moment as shown in the screenshot below. Click on the “Go” button.
  
• If everything worked fine, you should see this dialogue:
  
• On the same page, scroll down to the “Database-specific privileges” section and select the database you previously created.
  
• It will take you to this screen. I usually check all the boxes and leave the admin section unchecked. Click “Go” when you are done.
  
• You should see another message:
  

Step 5 – Import your database

• Still in PhpMyAdmin, click the import tab (make sure your new database is selected on the right).
  
• On the next page, select the database you exported in step 2. Click “Go”.
  
• You should see this message if everything worked fine.
  

Step 6 – SQL Queries

Now that we have successfully imported the database onto the new server, we need to replace the old website URI (e.g. ‘http://www.old-domain.com’) with the new URI (e.g. ‘http://www.new-domain.com’).

(Note: This step is actually optional. In most cases, the domain name will remain the same. If so, you can just skip this section.)

In a default WordPress install, you only need to replace the URI in 3 tables: wp_posts, wp_postmeta and wp_options.

• To run a SQL Query, click on the SQL tab on top
  
• This will take you to this screen.
  
• Now enter the following queries one by one and click go for each. Don’t forget to change http://www.old-domain.com and http://www.new-domain.com by your old domain name and new one respectively. Also, if you changed the default table prefix (e.g. “wp_”) to something else, make sure to update it in the queries below.
  ^?View Code PHP

  1 2 3 4

  UPDATE wp_posts SET guid = replace(guid, 'http://www.old-domain.com','http://www.new-domain.com'); UPDATE wp_posts SET post_content = replace(post_content, 'http://www.old-domain.com', 'http://www.new-domain.com'); UPDATE wp_postmeta SET meta_value = replace(meta_value, 'http://www.old-domain.com', 'http://www.new-domain.com'); UPDATE wp_options SET option_value = replace(option_value, 'http://www.old-domain.com', 'http://www.new-domain.com') WHERE option_name = 'home' OR option_name = 'siteurl';

  You probably noticed that the last query is a little bit different from the others. What we do here is to replace the old domain name with the new one only for “home” and “siteurl” in the option_name column. Here’s how it looks in PhpMyAdmin when you browse the wp_options table:

  

• If your query was successfully executed you should see a dialog like the one below with the number of raw affected.
  

(Note: Some plugins need the site URI. You might need to update that as well. The easiest way to check if another table contain the old domain name is to do a search in PhpMyAdmin (your database -> Search tab -> Select all the tables). It will return all the tables that contain the old site URI and you can then change accordingly as explained above.)

Step 7 – Edit wp-config.php

• Open and edit wp-config.php in your favorite web/text editor (Dreamweaver, Aptana, Notepad…).

  Replace the old settings with your new database name, username and password you created in steps 3 and 4.

  ^?View Code PHP

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  <?php /** The name of the database for WordPress */ define('DB_NAME', 'new-site');   /** MySQL database username */ define('DB_USER', 'yourusernamehere');   /** MySQL database password */ define('DB_PASSWORD', 'yourpasswordhere');   /** MySQL hostname */ define('DB_HOST', 'localhost');   /** Database Charset to use in creating database tables. */ define('DB_CHARSET', 'utf8');   /** The Database Collate type. Don't change this if in doubt. */ define('DB_COLLATE', '');

• Save the document and upload it to your server via FTP.

Conclusion

That’s it! Load the site in your browser and if everything went well, you should see it as it was on the old host. I hope you enjoyed this tutorial. If you have any question, leave a comment below and I will do my best to answer you.

If you want to learn more about SQL query, read this excellent article from Onextrapixel.com: 13 Useful WordPress SQL Queries You Wish You Knew Earlier.

Do you know any other SQL query tricks? Share them with us!

If you are new to this blog, the Gorilla Project is an opensource project created by Chris and myself to overcome common issues encountered by a single WordPress theme designer. Our goal is to build a large community of WordPress designers and developers to collaborate together to build FREE Premium WordPress themes, maintain and upgrade the themes to the latest WordPress version, fix bugs, make the themes cross browser and cross OS platform compatible,offer support to users (forum), write tutorials, create a theme framework to speed up themes development, write an extensive documentation (Wiki) for WordPress developers willing to create a theme for the Gorilla Project.

“WPSynergy” in place of “The Gorilla Project”

First of all, after we discovered someone else was using a similar name for his Premium WordPress themes site, we renamed “The Gorilla Project” to “WPSynergy” – even though Matt Mullenweg told us not to on our Google groups. The new name was proposed by Jeffro from WordPress Tavern with the following definition:

Synergy: The enhanced result of two or more people, groups or
organizations working together. In other words, one and one equals
three! It comes from the Greek “synergia,” which means joint work and
cooperative action. The word is used quite often to mean that
combining forces produces a better product.

This was clearly in line with our project so we decided to go for it.

Logo

Logo design followed a long process and after many concepts and feedbacks on Conceptshare, a few votes from the WordPress community and a few other modifications, we finally got our final logo (below). I hope you like it.

Logo, as all of our free themes, is released under a GPL2 license. Illustrator source file can be downloaded here. As usual, feel free to download it, modify it and upload the new version if you don’t like the one you see here.

SVN, Trac, dev site, mailing list

To be more productive while developing our opensource wordpress themes, we created an infrastructure on Chris’ server:

• http://dev.wpsynergy.org/: P2 WordPress theme for any discussion related to development. If you want to Join our team start by creating an account there.
• http://bugs.wpsynergy.org/: Trac to keep track of our themes and report bugs
• http://svn.wpsynergy.org/: SVN for our themes repository
• http://groups.google.com/group/wpsynergy: our mailing list on Google Groups.
  (Register if you want to be part of this mailing list)

On my server – which will host the themes, demos and forum – we installed WordPress MU for the theme demos and BBpress as our support forum.

Our themes

We are actively working on PigNews. You can follow the progress here (please, note we didn’t fix IE6′s bugs yet). However, mostly because of a lack of time and a low involvement from the WordPress community, we are striving to finish the theme. We hope more designers and developers will join our effort after we released a few themes and complete the official site at http://wpsynergy.org.

Pignews color schemes:

If you want to help us develop Pignews, grab the files from the SVN trunk. (If you are new to SVN, start by downloading Tortoise.) (To make a SVN update or commit, you will have to request a password from Chris to access SVN. His email is chris[a-t]wpsynergy {d-o-t}org.)

Other themes to be part of WPSynergy

• OneRoom
• Synjob

How can you help us?

Once again, we are asking for help from the WordPress community. If you are a designer or developer, there’s many way to be involved in this project. As a designer, we need you to create stunning themes, design mascots, logos, icons… As a developer, we need you to enhance our themes with options page, add AJAX effects, configure servers, develop our Options theme Framework… and we need everyone to spread the word (on twitter, Facebook, on your blog…) to move this project forward and take it to the next level.

Thanks to everyone for supporting us and a special thanks to Matt Mullenweg for his support since the beginning of this project. We really appreciate.

While it is really great to have so many people contributing to it, there’s some limitations when it comes to free WordPress themes created by individuals:

• They have real difficulties to keep their themes up to date with the latest WordPress releases.
• Their themes are not always cross browsers and cross platforms.
• Their support is limited.
• They usually don’t have all the skills needed to make a Premium Theme.
• After a while, they might completely cease to maintain their themes because of lack of time or boredom.
• As themes are updated by authors, upgrading will usually mean losing any custom styles you’ve added.
• Many themes are offered as “one size fits all”, and can only be customized with knowledge of HTML/CSS.

Here comes the Gorilla Project WPSynergy Project, an opensource project created by Chris and I to overcome these common issues. Our goal is to build a large community of WordPress designers and developers to:

• Collaborate together to build FREE Premium WordPress themes. Some companies (Woothemes, ithemes…) offer excellent premium WordPress themes but you have to pay for it!
  (“A premium theme refers to themes that have more quality in terms of design, or maybe layouts (magazine, grid, showcase, etc) that differs them from the majority free themes. It’s also fair to label them as themes that allows you to do more customization, or even displays content in a different formats” – Hongkiat)
• Maintain and upgrade the themes to support the latest versions of WordPress.
• Fix bugs.
• Make the themes cross browser and cross OS platform.
• Offer support to users (forum).
• Write tutorials.
• Create a theme framework to speed up themes development.
• Write an extensive documentation (Wiki) for WordPress developers willing to create a theme for the Gorilla WPSynergy Project.

We need your help!

The gorilla project WPSynergy Project is going to be a huge and exciting project but we need your help to make it successful. Here’s how you can contribute:

• Designers, we need your talents to design stunning themes, icons, mascots in Photoshop, Fireworks or any other image editor. We have a number of theme designs planned, but it would be nice to have an extra hand in the future.
• Front end developers, we need you to code the theme in valid (X)HTML/CSS.
• Back end developers, right now, Chris is looking for PHP developers to help develop the “Gorilla Theme Options Framework” (GTOF) SYNTOF (WPSynergy Theme Options Framework) which we will be uses as the main framework for our themes. But we are also looking for contributers to other back end development projects – options pages, widgets, plugins…you name it!
• Blog Owners, a section at wpgorilla.org wpsynergy.org will be created for you to report bugs, suggest improvements and new ideas…
• Readers (yes, you too can help!), we need you to spread the word! Tweet it! Digg it! Stumble it! Talk about it on your blog. Help us grow this new community and make this project a reality and you will soon be able to download premium WordPress themes for free!

Ready to help?

If you are ready to help, you can contact us at joinus {a t} wpgorilla {d o t} o r g joinus {a t} wpsynergy {d o t} o r g or head to Launchpad our DEV site and pick a project. We are just starting out so you are not going to find much there at the moment but you can be the first one to propose a new project or you can help us develop the “Gorilla Theme Options Framework” (GTOF) SYNTOF till completion – anyone interested in finding out more can email chris {at} wpgorilla {dot} org chris {at} wpsynergy {dot} org for more information.

If you need help with Launchpad, read this »

Pignews theme – our first theme to be part of this project – is going to be on hold until we finish Gorilla Theme Options Framework (GTOF) SYNTOF but in the meantime you can review the concepts on Flickr and give us your feedback.

All the themes created by the Gorilla WPSynergy community will be hosted at www.wpgorilla.org www.wpsynergy.org. The site is under construction at the moment (see screenshot below). If you want to help me with the development of this site, contact me at jeremie {a-t} wpgorilla {d-o-t} org jeremie {a-t} wpsynergy {d-o-t} org. The fastest we build this site and the fastest we will be able to release free premium themes there.

Benefits of this project

If you run a WordPress blog, the benefits are quite obvious: you will be able to download free Premium WordPress themes and plugins developed and maintained by a large community of WordPress developers.

If you are a designer or developer (or both!), you will be able to work with various professionals, make contacts, learn new ways to build a WordPress theme and hopefully make WordPress a better CMS. We plan to create a page on WPGorilla.org WPSynergy.org to list our most active team members with a bio and a link to their site.

In the end, everyone will benefit from this project… so don’t forget to spread the word!

Links

Official Site: http://wpgorilla.org/

Projects:https://launchpad.net/~wpgorilla

Theme Concepts: http://www.flickr.com/groups/wpgorilla/

Google Group: http://groups.google.com/group/wpgorilla

UPDATE:

Official Site: http://wpsynergy.org/

SVN:SVN

TRAC: Bugs

Discussions: Dev Site

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:

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′):

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

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

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:

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:

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…

(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).

Preview/Download

This script is distributed under the GNU General Public License version 3.

The sliding panel works like a charm in IE6, IE7, Firefox, Safari, Opera and Chrome. I didn’t test it in IE8 yet. Let me know if it does.

Please note the Login and Register forms in this demo will not work “out of the box” without a user login system pre-installed on your site (e.g. PHP/MySQL user login system)!

What’s new in this version?

• Panel has been redesigned to be “slicker”.
• Panel overlaps content instead of “pushing” it.
• Images are transparent… and work in IE6! (Thanks to 24Ways for their IE PNG Fix.) This means, you can change the background color of the body as you wish or even set a background image.
• Login button that slides the panel down changes from “Log In | Register” to “Close Panel” on click and I have added some nice rollover images:

Login button when panel in closed state:

Close button when panel in opened state:

Toggle effect (.toggle() in the javascript code below) behaves differently in jQuery than in Mootools and makes it dead simple to switch the login and close buttons on click. Here’s how I proceded:

1
2
3

	<li id="toggle">
	<a id="open" class="open" href="#">Log In | Register</a>
	<a id="close" class="close" style="display: none;" href="#">Close Panel</a></li>

… and the javascript to expand/collapse panel and switch the buttons on click:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(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();
	});		
 
});

Check the jQuery documentation for usage.

Known Bugs

• Rollover effect for the login button doesn’t work in IE6 because of 24Ways’ script. Knowing alpha transparency works perfectly in this browser I think we can disregard that minor bug.

Preview/Download

How to have the panel “push” the content down?

Many people ask me how to have the panel “push” the content down instead of overlapping it so I thought I would answer it here instead of answering each comment individually. This is actually extremely easy to do so. All you have to do is open slide.css (Appearance>Editor) and find:

1
2
3
4
5
6
7
8
9
10

/* sliding panel */
#toppanel {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

Change position:absolute; for position:relative;. That’s it!

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

(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).

I will try to code the site and complete the work this week if I have time. In the meantime, you can preview it on Deviantart and give me your feedbacks there or on this page. At this stage, I will not make any big modification in the theme.

What’s next?

As many people requested it, next step will be to upgrade my WP themes (Yoghourt & NightTransition) for WordPress 2.7+. I will do them one at a time, starting with Yoghourt.

Many people also asked me to upgrade LightForm. I am sorry to inform you that will not be possible unless someone wants to contribute to this project or want to make a donation. I went into full time freelancing just recently and if I want to make a living by the end of the year I will have to work really hard. That means less time for me to work on open source projects. I hope you understand.

If you accept to contribute or donate, I will be very happy to put your name and url somewhere on my freebies page for example.

We’ve seen a lot of smartphones emerging during the last couple of months. Of course, the iPhone was the first one on the market, but then the t-mobile G1 and the Pre Palm arrived and demonstrated they could be a serious competitor to the iPhone.

According to analysts, almost everyone will possess a smartphone by 2020 and we can easily imagine free Wi-Fi will be everywhere (and not only in Starbucks!). This means that many people will view our sites on a smartphone and this is something to keep in mind when we will design our next website if we don’t want to be left behind.

But let me introduce you WPtouch

Luckily, some people at BraveNewCode.com already thought about it and created WPtouch, a WordPress plugin to turn your blog into an iPhone application-like within a few minutes.

“WPtouch automatically transforms your WordPress blog into an iPhone application-like experience when viewed from an iPhone or iPod touch. It comes complete with ajax & effects, and all the standard WordPress blog features: search, login, categories, tags, archives, photos & more. WPtouch also allows for near-complete customization through your WordPress admin.”

What a great idea and time-saving for designers! The guys at BraveNewCode really did a great job. Chapeau messieurs!

iBBDemo – Blackbaud iPhone Browser Simulator

If you are going to design for the iPhone, most probably you will need to test your site during the development phase. But what, if you don’t have an iPhone or iPod Touch to do so? Don’t worry! Again, some people thought about it and created iBBDemo, an iPhone Browser simulator to preview your site from your computer. You will have to previously download Safari 3.2+ in order to run iBBDemo.

iBBDemo can be downloaded here and you can watch a screencast here.

Well, I hope you find this information useful. Please, feel free to share your thoughts about the iPhone and smartphones in general or leave a comment if you know another interesting iPhone application.

I am very pleased to release my new WordPress theme, “OneRoom“, a three columns theme with fixed width and widget-ready.

I wanted to design a new theme months ago but actually never had time to work on it. And then, I was moving to Thailand and another couple of weeks past. But now I have settled in Thailand and had no reasons to postpone that job any longer.

I hope you will like this theme as much as I do.

Preview /Download

This theme has been tested in all the major Web browsers (Firefox, IE6+, Opera, Google Chrome, Safari). However, if you notice a bug, report it by leaving a comment below. Thanks!

Features

• Widgetized Sidebars
• Built-In Author Section in Sidebar
• Built-in Gravatar Support for Comments
• Custom 404 error page
• Built-In Banner Ad Blocks
• Left Sidebar for PostMetadatas
• And more.

Requirements

- WordPress 2.7+

Usage

If you need help with editing this theme or logo, consult the Usage page.

License

Read about it here »

I would like to hear from you

So, what do you think about this theme? Do you like it? Do you hate it? Is there something you would like to be changed or improved?

Changelog

See it here »

I picked up some very interesting tutorials for you to watch:

The WordPress.com dashboard – introduction

The WordPress.com dashboard is easy to set-up, customize and use the way you want to. This video walks you through it’s features.

Writing and publishing a post

The thing you’ll probably be doing most with WordPress – writing and publishing posts – is covered in this short flyby tutorial.

Setting up the Gravatar plugin for WordPress 2.7

In the third of three videos on Gravatars, Derrick Siu of the Net Experiment explains how to add the Gravatar plugin to your self-installed WordPress blog. While Gravatar is now included in-core, the plugin offers some extra functionality.

Previewing and activating themes

If you’re not sure about a theme and want to try it on for size before wrapping your live blog in it, that’s easy enough to do. Here’s how.

Moderating recent comments from the dashboard

If you want to get a quick glance at your latest comments, or moderate them right from the dashboard, this video will walk you through the feature.

How to create a static frontpage for your blog

If you’d rather have your landing page display something other than your latest blog posts, WordPress makes that easy. This video walks you through the process of setting up separate blog and front pages.

Using the WordPress.com Video Player – A DemoGirl Tour

The awesome DemoGirl (AKA Molly McDonald) takes us on a tour of the WordPress.com video player, available for WordPress.com users via the optional Space upgrade.

… and many more tutorials on WordPress.TV.

“Hey, using your website [Night Transition - Free WordPress Theme] – Love it! Your a genius… so forgive me for my lack of genius, but I can’t find out how to make a home button in the nav panel work properly…?”

Well, Don’t worry Glen. I am not a genius either. It took me a while to figure it out and almost none of the people using my free WordPress themes knows how to display a link to the home page in the navigation bar.

So let me explain you. For the sake of this tutorial, we will consider that your front page is your posts page which is the default configuration in WordPress.

1- Write: Create a New Page

First, you must log into WordPress and create a new page. Fill “Blog” in title and leave the content blank. If you want your page to appear first in your navigation bar, scroll down to “Page Order” and change the default value to a smaller number (-9 for example).

2- Settings: Front Page Displays

Now, go to Settings and select Reading. Scroll down to “Front Page Displays” and check “A Static Page”. In the “Posts Page” drop down list, select your blog page. (Don’t select anything as the “front page” unless your front page is not your posts page).

Your blog page should now appear in your navigation bar. Leave a comment if you have any question.

According to the wordpress codex, here’s the keyboard shortcuts you can use in WordPress 2.7:

The Meaning of Selected

The keyboard shortcuts are used for navigation and for actions. For any action to affect a comment, that comment must be first selected. The comment that is considered selected is indicated with a light-blue background. By default, no comment is selected, so, you will need to press either the letter j key, or letter k key, to start navigating.

Using Keyboard Shortcuts to Navigate

Navigating comments is accomplished with the j and k keys. When you first visit the Comments page, no comments is selected, so, first press the letter j, or the letter k, to select the first comment. After that, just press the letter j to move the select to the next comment.

• Pressing j moves the current selection (light-blue background) down.
• Pressing k moves the current selection (light-blue background) up.

Note that if you come to the bottom of a page of comments and press j again, you will be taken to the next page and the first comment of that next page will be selected. Likewise, pressing k at the top of a comment page will zoom you to the previous page, selecting the comment at the bottom of that previous page. This makes it very easy to navigate through a long list of comments to perform the necessary actions.

Using Keyboard Shortcuts to Perform Actions

For one of these actions to affect a comment, make sure the comment is first selected (see above).

• Pressing a approves the currently selected comment.
• Pressing s marks the current comment as spam.
• Pressing d deletes the current comment.

Note that those first three actions (and most common actions) use the three left-most keys of the home row of a QWERTY keyboard. It is recommended that you shift your hand to the left so that your index finger is on d instead of on f, as is normal.

• Pressing u unapproves the currently selected comment, placing it back into moderation.
• Pressing r initiates an inline reply to the current comment (you can press Esc to cancel the reply).
• Pressing q activates “Quick Edit” which allows for rapid inline editing of the current comment.

1
2
3
4
5
6
7
8
9
10

// Remove pages from search
function mySearchPostsFilter($query)
{
if ($query->is_search)
{
$query->set('cat','12,14,16,17,18'); // your category IDs
}
return $query;
}
add_filter('pre_get_posts','mySearchPostsFilter');

That’s it! Replace the posts category IDs (’12,14,16,17,18′) by your owns and it should work.

1- Change the feed URL

The most common and maybe easier way to do so is to change your feed structure. In the default WordPress theme, the RSS link (in footer.php) is:

1

<a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>

You can exclude any category by appending a query string to the feed URL, like this:

1

<a href="<?php bloginfo('url'); ?>/feed?cat=-3&cat=-12">Entries (RSS)</a>

‘12‘ in this example is your category ID. In older version of WordPress, the category IDs were displayed in Manage -> Categories, next to category name. However, in WordPress 2.5+, the WordPress Gurus removed this feature (only god knows why). To identify the category ID, mouseover the category name to see its ID in the status bar of your browser. Otherwise, you can install Reveal IDs for WP Admin 2.5 plugin to reveal the post, page and category IDs.

A more common PHP structure might work as well:

1

<a href="<?php bloginfo('url'); ?>/feed=rss2&cat=-3,-12">Entries (RSS)</a>

If you are using RSS2, your code will be:

1

<a href="<?php bloginfo('url'); ?>/feed=rss2&cat=-3&cat=-12">Entries (RSS 2)</a>

Depending on your permalink structure, you might need to add index.php to your feed url:

1

<a href="<?php bloginfo('url'); ?>/index.php?feed=rss2&cat=-5">Entries (RSS 2)</a>

2- Exclude categories in your template’s functions.php file

Jangro explains how to exclude a category from feed by adding a few lines of code to the template’s functions.php file:

1
2
3
4
5
6
7
8

function myFeedExcluder($query) {
 if ($query->is_feed) {
   $query->set('cat','-12');
 }
return $query;
}
 
add_filter('pre_get_posts','myFeedExcluder');

This code will keep the category ID=”12″ out of the feed. If you want to exclude more than one category, put them in separated by commas ‘-12,-25,-33′.

3- Add a plugin to WordPress

If you are not into coding, you can install the Ultimate Category Excluder plugin. It allows to exclude any categories from your front page, archives, and feeds. Once you installed it, go to the Category Exclusion page in your admin panel to exclude a category by selecting one. That is that easy.

You can also install the Stealth Publish plugin to exclude a specific post from being published in feeds.

4- Exclude category from RSS feeds in FeedBurner

If like me you are using FeedBurner, go to dashboard and click “Edit Feed Details”. In the field “Original Feed”, enter the feed URL with the categories you want to exclude as explained in first step above.

Conclusion

The methods described above would be interesting to implement if you write about two (or more) different topics on your site. Let’s say you write about Linux (which would be ID=”1″ in our example below) and Windows (ID=”2″). Some of your readers might want to read your Linux articles but not the Windows ones, and vice-versa. Thus, you could create two feed links, the first one excluding Windows feeds for your Linux reader and the second one the Linux feeds:

1
2

<a href="http://yourdomain.com/feed?cat=-2">Subscribe to Linux Feed</a>
<a href="http://yourdomain.com/feed?cat=-1">Subscribe to Windows Feed</a>

Preview / Download

License

Since I want to submit this theme to WordPress theme directory, I had to change the Common Creative License 2.5 for a GPL license.

The end result:

Here’s what we are going to achieve today:

Step 1: The scripts and images

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

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:

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):

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:

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…

1
2

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

… by:

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!