Web-kreation » Tutorials

Migrating a WordPress Site – FTP, PhpMyAdmin and SQL queries

Jeeremie — Fri, 25 Jun 2010 02:31:04 +0000

In this tutorial we are going to explore how to migrate your WordPress site from one host to another, using FTP and PhpMyAdmin.

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

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


/** 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!

Create Code Snippets in Aptana to Improve Productivity

Jeeremie — Mon, 19 Oct 2009 11:07:53 +0000

If you have been writing the same bits of code over again to develop Web sites or applications, this article is for you. Today, I will show you how to add or use existing snippets in Aptana 1.5. As the Aptana Team says, “The code Snippets feature in aptana lets you quickly insert small pieces of code into your HTML, CSS, JavaScript, and XML files. Snippets can save you time and hassle of typing out bits of code that you frequently use by adding them into your files by simply double-clicking the name of the Snippet.”

Let’s get started

For this tutorial, I will assume you are familiar with Aptana and have installed it on your Computer. If not, you can download it for free here. As we speak, version is 1.5.

Launch Aptana Studio and open the Projects and Snippets Views (Window > Show View).

How to Use Code Snippets in your projects

You might not be aware of it but everytime you click on a button in your toolbar you are actually using a code snippet:

Alternatively, you can just expand a folder in the Snippets view and double click a snippet or right click and “Apply snippet” to quickly insert a piece of code into your HTML, CSS, JavaScript, PHP, XML… files.

Edit an existing Snippet

If you want to edit a Snipppet, expand a folder in the Snippets View (e.g. HTML, CSS…), right-click on the snippet you want to edit and select “Edit Snippet”.

Add a new snippet (step by step tutorial)

For this tutorial, we are going to create a new HTML snippet to Wrap text with and prompt users to type link url and title. Our snippet will generate this code: selected text here.

To add a new Snippet, you must create a new folder named snippets in any top-level folder of your Project View. You only need to do this the first time you create a snippet.
In your snippets folder, create a blank HTML file and give it a name (e.g. wrap-with-a-options.html).
In Snippets View, expand Snippet Templates and select “HTML Snippet Template”. It will open a dialog box and prompt you to enter the name of your Snippet (e.g. “Wrap with (Options)”):

Aptana will generate the following code for you on top of your HTML file:

?View Code HTM4STRICT
1 2 3 4 5
Next, add your code snippet:

^?View Code HTM4STRICT
1 2 3 4 5 6
Now, we need create some variables to prompt users to enter url and title for the link they want to generate. We will use prompt(var_name): promptText where var_name is the name of the variable and promptText is the text that you want the Snippet to prompt the user with. Here how it goes:

^?View Code HTM4STRICT
1 2 3 4 5 6 7 8
We will go one step further and wrap our code around ${selection}. This will let you select the text you want to link:

^?View Code HTM4STRICT
1 2 3 4 5 6 7 8
${selection}
Save your file. This snippet is ready to use and should now be filed in the Snippets View under HTML. To use it, place your cursor somewhere in a HTML file or select the text you want to link, and click twice on your snippet to insert it.

Add Snippet to toolbar (optional)

Following our previous example, we are now going to add our snippet to the toolbar:

^?View Code HTM4STRICT


${selection}

toolbar : if set to “true”, show snippet in toolbar
icon : relative path to icon toolbar item. (default path: com.aptana.ide.snippets/icons/)
language : MIME type of content to wich this item is related. Options: text/html, text/css, text/javascript…

Unfortunately, there seems to be no easy way to add your own set of icons. This has been reported in a ticket and we just have to hope someone will work on this. However, all is not lost. Icons are stored in a JAR archive: C:\Program Files\Aptana\Aptana Studio 1.5\plugins\com.aptana.ide.snippets_1.5.0.24896.jar\icons in Windows (please note path to this folder might be slightly different for you). Copy your icons to this folder and change the name of your icon in the code above and it will appear in toolbar (you will have to restart Aptana first).

The End Result

In the screenshot below, you can see the new icon in the toolbar on the right. Select the text you want to link, click on the button and you will be prompted to enter the url and title for this link:

Last word

I hope you enjoyed this tutorial. Do not hesitate to share your snippets with us in the comments.

Smashing Magazine put together a great list of code snippets repositories. Check their article: 45+ Excellent Code Snippet Resources and Repositories

And you? What software or application do you use to store your snippets?

Sponsor list with CSS Sprites and Mootools 1.2

Jeeremie — Mon, 28 Sep 2009 11:44:59 +0000

Today, we are going to see how to create a sponsor list with CSS Sprites and Mootools 1.2 as seen on JamieWhinCup:

Preview / Download

view demoNote: There is a file embedded within this post, please visit this post to download the file.

This menu is released under a Creative Commons Attribution-Share Alike 2.0 License. Feel free to do whatever you’d like with this menu or template, just please give credit where credit is do.

Step 1: The HTML

HTML code is pretty simple:

^?View Code HTML4STRICT

<div id="sponsors">
    <span>Our Sponsors:</span>
 
    <a class="mootools" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="drupal" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="technorati" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="jquery" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="miro" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="mozilla" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="nbc" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="twitter" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="wordpress" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a></div>

The same result could be done with an unordered list but I didn’t see the necessity to add extra tags to my document.

Step 2: CSS Sprites

A sprite is basically multiple graphics combined into one single file. To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed.

Google makes good use of CSS sprites on their search page:

The main advantages of using sprites are:

Fewer images for the browser to download, which means less http requests.
Total images size is generally smaller.
Rollover image appears instanlty on mouseover.

For this example, we are going to create a color version and a grayscale version and merge them into one file as you can see below:

Include the CSS code below in the head of your html document or in an external style sheet:

^?View Code CSS

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

Test your page in a browser and you will be all set.

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

Jeeremie — Tue, 07 Apr 2009 12:08:51 +0000

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

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

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

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:

^?View Code PHP


<div id="toppanel">
 
	global $user_identity, $user_ID;	
	// If user is logged in or registered, show dashboard links in panel
	if (is_user_logged_in()) { 
?>
 

 
 
	// Else if user is not logged in, show login and register forms
	} else {	
?>
 

 
 } ?>	
div>

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:

^?View Code PHP

1
2
3

 if ( current_user_can('level_10') ) : ?>
		
 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:

^?View Code PHP

1
2
3

 wp_head(); ?>
head>
<body>

Replace it by this:

^?View Code PHP

 wp_head(); ?>
 
  	
  	
	
 
    
	<script src="/js/jquery-1.3.2.min.js" type="text/javascript">script>
	
	<script src="/js/slide.js" type="text/javascript">script>
 
head>
<body>

<div id="toppanel"> 
 
	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  echo $user_identity ?>h1>
				<h2>Headlineh2>				
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.p>
				<h2>Dashboardh2>
				<ul>					
					<li><a href="/wp-admin/index.php">Go to Dashboarda>li>
				ul>
			div>
			<div class="left narrow">			
				<h2>My Accounth2>				
				<ul>					
					<li><a href="/wp-admin/index.php">Global Dashboarda>li>
					<li><a href="/wp-admin/profile.php">Edit My Profilea>li>
					 if ( current_user_can('level_1') ) : ?>
						<li><a href="/wp-admin/edit-comments.php">Commentsa>li>
					 endif ?>
	        		<li><a href="" rel="nofollow" title="">php _e('Log out'); ?>a>li>
				ul>	
				 if ( current_user_can('level_10') ) : ?>		
				<h2>Appearanceh2>				
				<ul>						
					<li><a href="/wp-admin/themes.php">Themesa>li>
					<li><a href="/wp-admin/widgets.php">Widgetsa>li>
					<li><a href="/wp-admin/theme-editor.php">Theme Editora>li>
				ul>
				 endif ?>
			div>
			 if ( current_user_can('level_2') ) : ?>
			<div class="left narrow">			
				<h2>Postsh2>				
				<ul>					
					<li><a href="/wp-admin/post-new.php">New Posta>li>
					<li><a href="/wp-admin/edit.php">Edit Postsa>li>
				 if ( current_user_can('level_3') ) : ?>
					<li><a href="/wp-admin/edit-tags.php">Tagsa>li>
					<li><a href="/wp-admin/categories.php">Categoriesa>li>
				 endif ?>
				ul>
				 if ( current_user_can('level_10') ) : ?>		
				<h2>Pluginsh2>				
				<ul>						
					<li><a href="/wp-admin/plugins.php">Pluginsa>li>
					<li><a href="/wp-admin/plugin-install.php">Install a Plugina>li>
					<li><a href="/wp-admin/plugin-editor.php">Plugin Editora>li>
				ul>
				 endif ?>
			div>
			 endif ?>
			 if ( current_user_can('level_2') ) : ?>
			<div class="left narrow">
				 if ( current_user_can('level_3') ) : ?>	
				<h2>Pagesh2>				
				<ul>		
					<li><a href="/wp-admin/post-new.php">New Pagea>li>
					<li><a href="/wp-admin/edit-pages.php">Edit Pagesa>li>
				ul>
				 endif ?>			
				<h2>Libraryh2>				
				<ul>					
					<li><a href="/wp-admin/upload.php">Librarya>li>
					<li><a href="/wp-admin/media-new.php">Add Newa>li>
				ul>
				 if ( current_user_can('level_3') ) : ?>		
				<h2>Usersh2>				
				<ul>						
					<li><a href="/wp-admin/users.php">Author &amp; Usersa>li>
					<li><a href="/wp-admin/user-new.php">Add Newa>li>
				ul>
				 endif ?>
			div>
			 endif ?>
			 if ( current_user_can('level_10') ) : ?>
			<div class="left narrow">			
				<h2>Settingsh2>				
				<ul>						
					<li><a href="/wp-admin/options-general.php">Generala>li>
					<li><a href="/wp-admin/options-writing.php">Writinga>li>
					<li><a href="/wp-admin/options-reading.php">Readinga>li>
					<li><a href="/wp-admin/options-discussion.php">Discussiona>li>
					<li><a href="/wp-admin/options-media.php">Mediaa>li>
					<li><a href="/wp-admin/options-privacy.php">Privacya>li>
					<li><a href="/wp-admin/options-permalink.php">Permalinksa>li>
					<li><a href="/wp-admin/options-misc.php">Miscellaneousa>li>
				ul>
			div>
			 endif ?>
		div>
	div> 	
 
    	
	<div class="tab">
		<ul class="login">
	    	<li class="left">&nbsp;li>
	    	
	        <li><a href="" rel="nofollow" title="">php _e('Log out'); ?>a>li>
			<li class="sep">|li>
			<li id="toggle">
				<a id="open" class="open" href="#">Show Dashboarda>
				<a id="close" style="display: none;" class="close" href="#">Close Panela>	
			li>
	    	<li class="right">&nbsp;li>
		ul> 
	div> 
 
	// 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-Kreationh1>
				<h2>Sliding login panel Demo with jQueryh2>		
				<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>Downloadh2>
				<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">
				
				<form class="clearfix" action="/wp-login.php" method="post">
					<h1>Member Loginh1>
					<label class="grey" for="log">Username:label>
					<input class="field" type="text" name="log" id="log" value="$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 melabel>
        			<div class="clear">div>
					<input type="submit" name="submit" value="Login" class="bt_login" />
					<input type="hidden" name="redirect_to" value="$_SERVER['REQUEST_URI']; ?>"/>
					<a class="lost-pwd" href="/wp-login.php?action=lostpassword">Lost your password?a>
				form>
			div>
			<div class="left right">
			 if (get_option('users_can_register')) : ?>	
				
				<form name="registerform" id="registerform" action="" 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="$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="$user_email)); ?>" size="25" tabindex="20" />
					 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="" class="bt_register" />
				form>
			 else : ?>
				<h1>Registration is closedh1>
				<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} comb>.p>
 
				
				<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>Settingsb> > <b>Generalb> and click "Anyone can register".em>p>
			 endif ?>			
			div>
		div>
	div> 	
 
    	
	<div class="tab">
		<ul class="login">
	    	<li class="left">&nbsp;li>
	    	
			<li id="toggle">
				<a id="open" class="open" href="#">Log In | Registera>
				<a id="close" style="display: none;" class="close" href="#">Close Panela>			
			li>
	    	<li class="right">&nbsp;li>
		ul> 
	div> 			
 } ?>	
div>

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

^?View Code CSS

/* 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:

Note: There is a file embedded within this post, please visit this post to download the file.

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

Conclusion

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

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

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

Sliding Panel: WordPress Plugin by Justin Tadlock.
SuperSlider-Login by Twincascos.
Making A Cool Login System With PHP, MySQL & jQuery by Tutorialzine.com.
SlipJaq – A Drupal module for a sliding login panel by Daniel Norton
Aevis / Sliding-Login-Panel a Joomla plugin by Aevis

Enjoy!

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

Nice & Clean Sliding Login Panel built with jQuery

Jeeremie — Thu, 26 Mar 2009 06:27:48 +0000

Remember my Sliding Login Panel with Mootools 1.2? Well, I thought it could have been improved both for design and functionnalities and so I did! but with jQuery this time.

Preview/Download

View DemoNote: There is a file embedded within this post, please visit this post to download the file.

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:

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:

^?View Code HTML4STRICT

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:

^?View Code JAVASCRIPT

$(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

View DemoNote: There is a file embedded within this post, please visit this post to download the file.

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:

^?View Code CSS

/* 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…

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

Sliding Panel: WordPress Plugin by Justin Tadlock.
SuperSlider-Login by Twincascos.
Making A Cool Login System With PHP, MySQL & jQuery by Tutorialzine.com.
SlipJaq – A Drupal module for a sliding login panel by Daniel Norton
Aevis / Sliding-Login-Panel a Joomla plugin by Aevis

Enjoy!

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

Morph Effect on mouseenter/mouseleave with Mootools 1.2

Jeeremie — Tue, 16 Dec 2008 08:15:38 +0000

In this tutorial, we will see how to add some amazing effects to an unordered list on mouseover with the Element Method: morph and to make the whole list item region clickable with Mootools 1.2. The goal is to take a boring unordered list and to turn it into something fun to click.

Preview / Download

DemoNote: There is a file embedded within this post, please visit this post to download the file.

What you will need

Before we start, you should get a little bit familiar with Element Method: morph and the custom mouseenter and mouseleave events on which this tutorial is based.

Also, you will need to download Mootools 1.2. Note that Mootools 1.2.1 is included in the source files above.

The HTML and CSS code – Creating an unordered list

We are going to create an unordered list (“ul li”) with ID=”posts” in our html document. Each list item (“li”) will contain a post image, title, description and a link to our article.

^?View Code HTML4STRICT

<ul id="posts">
    <li>
        <img src="images/img.jpg" alt="" />
        <h1>First Post</h1>
        <p>Our Description... </p>
        <a href="#" title="Read more">Read More »</a>
    </li>
    <li>
        <img src="images/img.jpg" alt="" />
        <h1>Second Post</h1>
        <p>Our Description... </p>
        <a href="#" title="Read more">Read More »</a>
    </li>
    <li>
        <img src="images/img.jpg" alt="" />
        <h1>Third Post</h1>
        <p>Our Description... </p>
        <a href="#" title="Read more">Read More »</a>
    </li>
</ul>

Our unordered list is created. Let’s now give it its appearance within the CSS code:

^?View Code CSS

#posts {
    padding: 0;
    margin: 0;
    }
#posts li {
    width: 600px;
    border: 1px solid #eee;
    background-color: #F9F9F9;
    background-image: none;
    float: left;
    clear: both;
    list-style: none;
    margin: 0 0 5px 0;
    padding: 5px;
    }
#posts a {
    text-decoration: none;
    color: #999;
    font-size: 0.85em;
    }
#posts img {
    display: block;
    float: left;
    border: 1px #ccc solid;
    background: white;
    padding: 3px;
    margin: 0 10px 0 0;
    }
#posts h1 {
    padding: 5px 0 0 0;
    margin: 0;
    color: #CC0033;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    }
#posts p {
    margin: 0;
    padding: 0 0 10px 0;
    }

Here’s how it looks so far:

Mootools – The Basics

Before going any further, let me remind you some of the basic functions in Mootools:

$()
This is the base selector of mootools. It selects a single Element.

^?View Code JAVASCRIPT

1 2	//select the element with id 'content' $('content');

$$()
Same function as $() but it selects multiple elements. That’s what we are going to use in our code below.

^?View Code JAVASCRIPT

1 2	//Select all li elements in #posts $$('#posts li');

.setStyle()
Set styles properties

^?View Code JAVASCRIPT

1 2	//Set width to 300px. $('myElement').setStyle('width', '300px');

.addEvent()
Attaches an event listener to a DOM element.

^?View Code JAVASCRIPT

1
2
3

$('myElement').addEvent('click', function(){
    alert('clicked!');
});

.addEvents()
The same as .addEvent, but accepts an object to add multiple events at once.

^?View Code JAVASCRIPT

$('myElement').addEvents({
    'mouseover': function(){
        alert('You mouseovered it!');
    },
    'click': function(){
        alert('You clicked it!');
    }
});

.morph
Allows for the animation of multiple CSS properties at once.

^?View Code JAVASCRIPT

1 2	//Change the background color to red $('myElement').morph({'background-color': 'red'});

The Javascript

We will create a new file clickMe.js including all the javascript code that will change the background color on mouseenter and mouseleave. First, add the code below within the section of your html document:

^?View Code HTML4STRICT

1 2	<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script> <script src="js/clickMe.js" type="text/javascript"></script>

Now, create the clickMe.js file and paste the code below into it:

^?View Code JAVASCRIPT

window.addEvent('domready', function(){
	var el = $$('#posts li'),
        color = el.getStyle('backgroundColor');
 
    $$('#posts li').addEvents({
        mouseenter: function(){
            // We set the cursor to pointer so users know they can click this region
            this.setStyle('cursor','pointer');
 
            // Change background color on mouseover
            this.morph({
    	        'background-color': '#FFF2E6',
                'background-image': 'url(images/arrow.jpg)', //Background image
                'background-repeat': 'no-repeat',
                'background-position': [0, 520], //image will move from left to right - Values are in pixels.
                'border': '1px solid #FFD5DF'
            });
		},
        mouseleave: function(){
            // Morphes back to the original style
            this.morph({
                'border': '1px solid #eee',
                'background-image': 'none',
                backgroundColor: color
            });
        }
    });
});

At this point, the effects are pretty neat but you will notice that only the “Read more” text is clickable and not the whole LI region. We will add a few lines of code at the bottom of our JS file to fix this:

^?View Code JAVASCRIPT

window.addEvent('domready', function(){
	var el = $$('#posts li'),
        color = el.getStyle('backgroundColor');
 
    $$('#posts li').addEvents({
        mouseenter: function(){
            // We set the cursor to pointer so users know they can click this region
            this.setStyle('cursor','pointer');
 
            // Change background color on mouseover
            this.morph({
    	        'background-color': '#FFF2E6',
                'background-image': 'url(images/arrow.jpg)', //Background image
                'background-repeat': 'no-repeat',
                'background-position': [0, 520], //image will move from left to right - Values are in pixels.
                'border': '1px solid #FFD5DF'
            });
		},
        mouseleave: function(){
            // Morphes back to the original style
            this.morph({
                'border': '1px solid #eee',
                'background-image': 'none',
                backgroundColor: color
            });
        }
    });
 
 
    //We retrieve the link location (href) and assign it to LI to make the whole region clickable
    var link = $$('#posts li a');
    link.each(function(element) {
        element.getParent().addEvent('click', function(){
            window.location = element.get('href');
            // on click, background color and border will turn to a different color
            this.morph({
                'border': '1px solid #eee',
                'background-image': 'none',
                'background-color': '#fff'
            });
        });
    });
});

So now, not only it looks good but you can click anywhere inside a list item to read the full article.

Note: There is a file embedded within this post, please visit this post to download the file.

WordPress 2.6+ – How to Display Home Page in the Navigation Bar?

Jeeremie — Mon, 17 Nov 2008 11:06:16 +0000

Today, Glen Wilson left a comment on my site:

“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.

WordPress 2.7 introduces keyboard shorcuts for comments

Jeeremie — Wed, 05 Nov 2008 13:09:39 +0000

With WordPress version 2.7, we have seen a bunch of new features that make WordPress the CMS of choice . One of them is the ability to browse and moderate comments via keyboard shortcuts.

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.

WordPress – Exclude pages from search results

Jeeremie — Sat, 01 Nov 2008 08:46:39 +0000

One way to exclude pages from search results is to install the Simply-Exclude plugin. Another solution I found to work pretty well is to add a filter in functions.php to only include posts categories instead of excluding pages from search results:

^?View Code PHP

// 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.

4 Ways to Exclude WordPress Category from RSS Feeds

Jeeremie — Mon, 20 Oct 2008 04:00:27 +0000

Lately, I wanted to exclude a few categories from WordPress Feeds. A search on WordPress didn’t return any valuable information. So, I searched the Google database. Here’s what I found:

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:

^?View Code PHP

1	<a href="">Entries (RSS)a>

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

^?View Code PHP

1	<a href="/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:

^?View Code PHP

1	<a href="/feed=rss2&cat=-3,-12">Entries (RSS)a>

If you are using RSS2, your code will be:

^?View Code PHP

1	<a href="/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:

^?View Code PHP

1	<a href="/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:

^?View Code PHP

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:

^?View Code HTML4STRICT

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>

Sliding login/Signup panel using MooSlide (Mootools 1.2)

Jeeremie — Thu, 18 Sep 2008 17:51:04 +0000

In my latest articles Show/hide a nice Login Panel using Mootools 1.2 and Add a show/hide login panel to your WordPress theme using Mootools, I explained how to add a nice sliding login form to your site (using Mootools 1.2).

Colin complained that the login panel was pushing the content down and asked if it would be possible to display it above all page elements. I replied that it would be possible to do so with MooSlide which uses Mootools 1.2. (Thanks to Frank from ArtViper for this excellent script).

This will be the topic of our tutorial today.

The end result:

Clicking a link will slide-in a login/register form in the middle of the page with a nice bouncing effect. Clicking the “close” button will make the panel disappear with a fade-out effect. I kept the code and styling simple for the sake of this tutorial. You can see a more fancy login form at the bottom.

Preview / Download

Grab a copy of this tutorial. It includes Mootools framework, MooSlideBox and all the images needed for this tutorial:

PreviewNote: There is a file embedded within this post, please visit this post to download the file.

Note: For this tutorial, I have slightly modified the original javascript file (mooSlide2-moo12.js) so the login and signup panel can slide in the middle of the page. I have also removed some code to make it lighter. If you want to download the original version of MooSlide with all the functionalities, go here.

Step 1: Creating the HTML structure

Create a new HTML document and add the following code into it: (Click [+] to expand the code)

^?Download download.txt


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Show/hide Login and Signup Panel using MooSlide (Mootools 1.2)</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
 
<body>
 
 
 <div id="loginPanel" class="mooSlide">
   <form class="left" action="#" method="post">
     <h1 class="padlock">Member Login</h1>
     <label for="log"><b>Username: </b></label>
     <input type="text" name="log" id="log" value="" size="23" />
     <label for="pwd"><b>Password:</b></label>
     <input type="password" name="pwd" id="pwd" size="23" />
     <label><input class="rememberme" name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" />  Remember me</label>
     <input type="submit" name="submit" value="" class="button_login" />
     <label><a href="#">Lost your password?</a></label>
   </form>
 
   <div class="sep"></div>
 
   <form class="right" action="#" method="post">
     <h1>Not a Member? Sign Up!</h1>
     <label for="signup"><b>Username: </b></label>
     <input type="text" name="signup" id="signup" value="" size="23" />
     <label for="email"><b>Email:</b></label>
     <input type="text" name="email" id="email" size="23" />
     <input type="submit" name="submit" value="" class="button_register" />
   </form>
   <div class="clearfix"></div>
 
   
   <div class="loginClose"><a href="#" id="close"> </a></div>
 </div> 
 
 <div id="container">
  <div id="content">
   <a href="http://web-kreation.com" title="Web-Kreation"><img src="http://web-kreation.com/wp-content/themes/web-kreation_v2/images/logo.jpg" alt="Web-Kreation - Home" /></a>
   
   <noscript><p style="color: red;">You must enable Javascript in you browser in order to try this demo.</p></noscript>
 
   <h1>Try the demo - Click "login" below:</h1>
   
   <p><a href="#" id="login"><b>Login</b></a></p>
  </div>
  <div class="clearfix"></div>
 </div>
 
</body>
</html>

...

is our login panel. You can place it anywhere on the page, preferably after the tag.

Step2: Styling our login form

Create a new CSS document and save it as mooslide.css. Add the following code into it to style our login panel: (Click [+] to expand the code):

^?Download download.txt

/*MooSlide stylesheet*/
 
.mooSlide {
	background-color: #000000;
	padding: 25px 10px 10px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.2em;
	color: #FFFFFF;
	border: 1px solid #33CCCC;
	margin: 0 auto;
	text-align: left;
	font-size: 0.85em;
	width: 525px; /* width of our login panel */
}
 
.mooSlide h1 {
	font-size: 1.6em;
	height: 20px;
	padding-top: 22px;
	color: white;
}
 
/* padlock icon from IconsPedia */
/* http://www.iconspedia.com/icon/padlocks-1464.html */
.mooSlide h1.padlock {
	background: url(images/padlock.jpg) no-repeat 0 0;
	padding-left: 35px;
}
 
a {
	text-decoration: none;
	color: #33CCCC;
}
 
a:hover {
	color: white;
}
 
.mooSlide form {
	margin: 0 0 10px 0;
	height: 26px;
}
 
.mooSlide label {
	float: left;
	padding-top: 8px;
	clear: both;
	width: 180px;
	display: block;
}
 
.mooSlide .left {
	width: 200px;
	float: left;
	padding-left: 25px;
}
 
.mooSlide .right {
	width: 270px;
	float: left;
	padding-left: 25px;
}
 
.mooSlide .sep {
	width: 1px;
	height: 180px;
	margin-top: 25px;
	float: left;
	border-right: 1px solid #333;
}
 
.mooSlide input {
	border: 1px #1A1A1A solid;
	background: #464646;
	margin-right: 5px;
	margin-top: 4px;
	color: white;
	height: 16px;
	float: left;
	clear: both;
	display: block;
}
 
.mooSlide input:focus {
	background: #545454;
}
 
.mooSlide input.rememberme {
	border: none;
	background: transparent;
	margin: 0;
	padding: 0;
}
 
.mooSlide input.button_login {
	width: 82px;
	height: 20px;
	cursor: pointer;
	border: none;
	margin-top: 10px;
	background: transparent url(images/button_login.jpg) no-repeat 0 0;
}
 
.mooSlide input.button_register {
	width: 82px;
	height: 20px;
	cursor: pointer;
	border: none;
	margin-top: 10px;
	background: transparent url(images/button_register.jpg) no-repeat 0 0;
}
 
.mooSlide .loginClose {
	display: block;
	position: absolute;
	right: 20px;
	top: 10px;
	width: 26px;
}
 
.mooSlide .loginClose a {
	display: block;
	width: 100%;
	height: 26px;
	background: url(images/button_close.jpg) no-repeat right 0;
	padding-right: 10px;
	border: none;
	font-size: 0.9em;
	color: white;
}
 
.mooSlide .loginClose a:hover {
	background: url(images/button_close.jpg) no-repeat right -26px;
}

Step 3: Linking the files together

Link to the stylesheet and to the Javascript files into the section of your HTML document:

^?View Code HTML4STRICT

<head>
...
<link rel="stylesheet" href="mooslide.css" type="text/css" media="screen" />
 

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

<script type="text/javascript" src="js/mooSlide2-moo12.js"></script>
</head>

Step 4: Adding the Javascript effects

Now that we created our HTML and CSS, we will add into the section of our HTML document the Javascript wich will toggle the login panel with some fancy effects (slide-in, fade-in and Bouncing effect):

^?View Code HTML4STRICT

<head>
...
<script language="javascript" type="text/ecmascript">
 window.addEvent('domready',function(){
  var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500,  toggler:'login', content: 'loginPanel', height:250, close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
  //optional: AutoStart the slider on page load:
  //MyLogin.run();
  $('close').addEvent('click', function(e){
    e = new Event(e);
    myLogin.clearit();
    e.stop();
  });
});
 
</script>
 
</head>

The first part (line 5 to 5) will create our panel. If you change “close:false” to “close:true”, the login panel will close every time you click on it. We don’t want that! Otherwise you would not be able to fill the form!

The options:

The slider DIV (content: ‘loginPanel’ – ...).
The slide in speed (slideSpeed)
The fade out speed (fadeSpeed)
Close on click true / False (close: false)
The height of the slider container (height:250)
The width of the slider container (width:550)
The type of effect used (see the mootools transitions effects here »)
The toggler element (toggler:’login’ – Login)
Slide from (from:’top’ – I have removed the option from:’bottom’ in the MooSlide script to keep the code simple)
MyLogin.run(); will autostart the slider on page load. I have disabled this option as we don’t want it to slide in on page load.

The second part of the code ($('close').addEvent('click', function(e){ ... }); – line 8 to 12) close the login panel when someone click the “close” button. The HTML code is .

Final Note

That’s all. Upload the files to your server and try it!

If you want, you can style MooSlide to get a more fancy login form like in the example shown below.

PreviewNote: There is a file embedded within this post, please visit this post to download the file.

This nice slide-in login form will work on any kind of site where you have a login/register form (blogs, forums, CMS…). If you would like to use this script with your WordPress theme, read this article to get started. The code is different but you will get the idea.

Links of Interest

MooSlideBox – The script used in this tutorial.
Build An Incredible Login Form With jQuery – from Nettuts.com.
Build a Toggling Announcement Slider Using MooTools 1.2 – David Walsh blog
Sexy Alert Box – Coders.me

Implement a sliding login panel in to WordPress with Mootools

Jeeremie — Tue, 12 Aug 2008 11:13:35 +0000

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:

Step 1: The scripts and images

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

Note: There is a file embedded within this post, please visit this post to download the file.

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

^?View Code HTML4STRICT

<head>
...

<script type="text/javascript" src="/js/mootools-1.2-core-yc.js" charset="utf-8"></script>

<script type="text/javascript" src="/js/mootools-1.2-more.js" charset="utf-8"></script>
(); ?>
</head>

Step 3: The HTML/PHP

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

^?View Code HTML4STRICT

<body>

<div id="login">
	<div class="loginContent">
		<form action="/wp-login.php" 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="/wp-register.php">Register</a> | <a href="/wp-login.php?action=lostpassword">Lost your password?</a></div>
	</div>
	<div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
</div> 
 

<div id="top">

( $user_ID ) {  ?>


	<ul class="login">
		<li class="left"> </li>
		<li><a href="/wp-admin/">Dashboard</a></li>
 
	/* if is admin, display menu below */ ( $user_level >= 1 ) : ?>
		<li>|</li>
		<li><a href="/wp-admin/post-new.php">Write article</a></li>
 
		<li>|</li>
		<li><a href="/wp-admin/edit.php">Manage Posts</a></li>
 
		<li>|</li>
		<li><a href="/wp-admin/edit-pages.php">Manage Pages</a></li>
 
		<li>|</li>
		<li><a href="/wp-admin/plugins.php">Plugins</a></li>
	// $user_level >= 1 ?>
 
		<li>|</li>
		<li><a href="/wp-admin/profile.php">My Profile</a></li>
 
		<li>|</li>
		<li><a href="/wp-login.php?action=logout&redirect_to=($_SERVER['REQUEST_URI']) ?>">Log Out</a></li>
	</ul> 
 
} elseif (get_option('users_can_register')) { ?>

<script type="text/javascript" src="/js/fx.slide.js"></script>
 
	
	
	<ul class="login">
		<li class="left"> </li>
		<li>Hello Guest!</li>
		<li>|</li>
		<li><a id="toggleLogin" href="#">Log In</a></li>
	</ul> 
} ?>
</div>

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 = 1 ) : ?> ... . 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

/* if is admin, display menu below */ ( $user_level >= 1 ) : ?>
<li>|</li>
<li><a href="/wp-admin/options-general.php">Settings</a></li>
...
// $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):

^?View Code CSS

/* 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. )
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="/wp-admin/profile.php">My Profile</a></li>

… by:

^?View Code HTML4STRICT

<li>|</li>
<li><a style="padding-left: 40px;" href="/wp-admin/profile.php">
  
    get_currentuserinfo();
    if(function_exists('get_avatar')) {
      echo '' . 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:

^?View Code CSS

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

^?View Code CSS

#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!

Sliding Login Panel with Mootools 1.2

Jeeremie — Sun, 03 Aug 2008 17:50:46 +0000

Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest WordPress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2. And next week, we will see how to use this script in WordPress 2.5+ to display the login form on the front page.

Preview / Download

First, check out the

demoNote: There is a file embedded within this post, please visit this post to download the file.

Step 1: The structure

Before we get to the code, I would like to illustrate the HTML structure used in this script:

The panel (

) is hidden by default. When someone click “Login”, the login panel slide into view. If you click once more on “login” or on the button “Close Panel”, the panel will “toggle” or slide out.

Step 2: HTML Code

Create a new HTML page and save it as index.html in your root folder. Copy the code below and paste it into this page:

^?Download download.txt


    "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" />
 
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="fx.slide.css" type="text/css" media="screen" />
</head>
<body>
 <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="#">Register</a> | <a href="#">Lost your password?</a></div>
  </div>
  <div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
 </div>
 
 <div id="container">
  <div id="top">
   <ul class="login">
     <li class="left"> </li>
    <li>Hello Guest!</li>
    <li>|</li>
    <li><a id="toggleLogin" href="#">Log In</a></li>
   </ul>
  </div>
 
  <div class="clearfix"></div>
 
  <div id="content">
   <p>The content of your page!</p>
  </div>
  <div class="clearfix"></div>
 </div>
</body>
</html>

Step3: The CSS

Create a new cascading style sheet in your web editor. Save it as fx.slide.css in your root folder. Copy the code below and paste it into your css page (Click on [+] to expand the code):

^?Download download.txt

/* 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;
 font-size: 80%;
 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;
}
 
#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;
 font-size: 0.85em;
}
 
#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.8em;
 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;
 font-size: 0.9em;
 color: white;
}
 
#login .loginClose a:hover {
 background: url(images/button_close.jpg) no-repeat right -20px;
}

Step 4: The Javascript

First, you will need to download Mootools core. So go visit this page and download Mootools 1.2 with YUI Compression. Create a new folder in your root directory and name it “js“. Save “mootools-1.2-core-yc.js” into it.

Now go to the “More Builder” page and select Fx.Slide. Scroll down to the bottom of the page and select “YUI Compressor” which is the default compression. Click “Download” and save the file (which name should be “mootools-1.2-more.js”) into your js/ folder.

Now, create a new Javascript document. Save it as fx.slide.js (should I tell you to save it into your js/ folder?). Here’s the code:

^?Download download.txt

window.addEvent('domready', function(){
	$('login').setStyle('height','auto');
	var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state
 
    //Show-Hide login panel when you click the link "Login" on top of the page
    $('toggleLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
	});
 
    //Hide login panel when you click the button close on the upper-right corner of the login panel
    $('closeLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.slideOut(); //Hide login panel
		e.stop();
	});
});

Did you notice “toggleLogin” and “closeLogin”? They define the IDs used in our HTML code (Log In and Close Panel). The first one add a “toggle” effect to our “login” link in the top tab. The second one add a “slide out” effect to our button “Close Panel”.

The line var mySlide = new Fx.Slide('login').hide(); will start the panel in a closed sate (.hide();).

You can read the Mootools documentation to get the most out of the Class:Fx.Slide.

You can also use the Class:Fx.Transition to add some nice transitions to your login panel such as a bouncing effect (Bounce.easeInOut) when the panel slide in and out:

^?View Code JAVASCRIPT

1	var mySlide = new Fx.Slide('login', { duration:800, transition: Fx.Transitions.Bounce.easeInOut}).hide();

Check the documentation here.

Step 5: Insert Scripts into the section

Add the following lines in the section of your page and you should be done:

^?View Code HTML4STRICT

<head>
[...]
 
 <script src="js/mootools-1.2-core-yc.js" type="text/javascript"></script>
 
 <script src="js/mootools-1.2-more.js" type="text/javascript"></script>
 <script src="js/fx.slide.js" type="text/javascript"></script>
 
</head>

Upload all your files and folder to your web server and open index.html in your browser. Everything should work fine. Don’t forget to enable Javascript in your browser.

demoNote: There is a file embedded within this post, please visit this post to download the file.

Conclusion

This tutorial explained you how to add some Mootools effects to your web pages to show/hide a login panel. Next week, we will see a real world application as I will explain you how to use this script to show/hide your WordPress login form on your front page (click “login” on the upper-right corner of this page to see an example).

~~So come back soon or subscribe to RSS to get notified when I publish the next post.~~

Update: read Add a show/hide login panel to your WordPress theme using Mootools »

How to change default avatar in WordPress 2.5+

Jeeremie — Wed, 16 Jul 2008 11:47:10 +0000

An avatar or Gravatar (Globaly Recognised Avatar) is a small image that appears next to your comment on any posts. It’s your profile picture. It will appears any time you leave a comment on a blog or forum. Here’s a screenshot of some comments taken on my site:

How to use Gravatar on your site

The avatar feature is by default supported in WordPress 2.5+. Log into WordPress and click Settings then Discussion. Scroll down to the bottom of the page to Avatar Display and select Show avatars. Click Save changes. This will turn on avatars on your site.

If you don’t have a Gravatar yet, you will need to create one here ». When you sign up to Gravatar, enter the email address you usually use to leave comments on sites and forum.

Change default avatar

If you open the default WordPress theme and open comment.php (/wp-content/themes/default/) in a text editor you can see this line:

^?View Code PHP

1	echo get_avatar( $comment, 32 ); ?>

This code displays the gravatar of the commenter on your posts. ’32′ is the size of your image in pixels.

If commenter didn’t sign up to Gravatar, the default avatar will be displayed. Here’s an example:

Now let’s see how to change the default avatar by your own image. In my case, I chose to use my logo as my default avatar (good for branding). First, create an image 32×32 and save it into your image folder (e.g. /wp-content/themes/default/images/). Now change the default code line above by this one:

^?View Code PHP


    $urlHome = get_option('home');
    echo get_avatar( $comment, $size='32', $default = $urlHome . '/wp-content/themes/default/images/avatar.jpg' );
?>

The first line will get the domain name url of your site (e.g. http://yoursite.com). The second one ($default) will retrieve the avatar image from your folder image. Change the url path to your image in the line above (/wp-content/themes/default/images/avatar.jpg).

And now a full example:

^?View Code PHP

<li  echo $oddcomment; ?>id="comment-">
   
       $urlHome = get_option('home');
       echo get_avatar( $comment, $size='32', $default = $urlHome . '/wp-content/themes/default/images/avatar.jpg' );
   ?>
   <cite>php comment_author_link() ?>cite> Says:
    if ($comment->comment_approved == '0') : ?>
   <em>Your comment is awaiting moderation.em>
    endif; ?>
 
   <small class="commentmetadata"><a href="#comment-" title="">
    comment_date('F jS, Y') ?> at  comment_time() ?>a> 
    edit_comment_link('edit','  ',''); ?>small>
    comment_text() ?>
li>

Style your avatar

Next step will be to style your avatar to make it look more like a photograph. Open style.css in your text editor or navigate to the dashboard and click Design then Theme Editor. Scroll down to the bottom of the page and select Stylesheet (style.css) in your right sidebar. This will open style.css in the theme editor. Find “.commentlist li .avatar” in your stylesheet. If it doesn’t exist, add the code below after “.commentlist li”:

^?View Code CSS

.commentlist li .avatar {
	float: left;
	border: 1px solid #EEEEEE;
	padding: 2px;
	background: #FFFFFF;
	margin-right: 7px;
}

This will display the avatar on the left of the commenter name and add a border to it.

The end result:

Done!

Avatars should be enabled on your site now. But if you run into a problem, you can check the WordPress Gravatar documentation or leave me a comment and I will try to do my best to help you.

[tags]wordpress, gravatar, avatar, tutorial[/tags]

WordPress Plugin: Comment Info Tip Plugin

Jeeremie — Fri, 20 Jun 2008 16:47:55 +0000

Golgotha has created a really nice plugin to display in the comment section of your blog some information about a commenter when you mouseover a name. The screenshot below show the plugin in action:

The tip will display 1 of 4 results:

If the commenter has only posted once then it will say so in the tip (see number 1 in the legend below).
If the commenter has posted more than once we will look up the last three posts they have commented in and display links to those posts. This allows you to see which type of posts this user is interested in and easily navigate to those posts (see number 2 in the legend below).
If the commenter has posted more than once we will attempt to search their RSS feed and show an excerpt from their last post (see number 3 in the legend below).
If it’s a pingback or trackback the tip will indicate so (see number 4 in the legend below).

Download

You can download the plugin here »