In the .htaccess file of the root of your web folder, paste the following code:

Deny from all
Order deny,allow
AuthType Basic
AuthName “Restricted”
AuthUserFile /path_to_password/.htpasswd
Require valid-user
Allow from 192.168.1.10
Allow from 192.168.1.10
Satisfy Any

First we simply specify the deny allow rule and also reference our authentication method. The we user Allow from with the IP. There is maybe a better way of doing this with IP range. Finally we simply tell apache to satify any Allow Deny rules. That’s it.

They won’t be protected by default, this means if a request is made directly to the file it can be accessed without any password. There is potentially the solution where you protect the files in a directory with htaccess password, but do you really want to manage new set of username and password outside or Wordpress? Not really.

Here is the solution, use htaccess to check if a user is logged in the Wordpress site when accessing the files area, if not then redirect to the Wordpress login page. Here is the new .htaccess:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^.*uploads/.*
RewriteCond %{HTTP_COOKIE} !^.*wordpress_logged_in.*$ [NC]
RewriteRule . /wp-login.php?redirect_to=%{REQUEST_URI} [R,L]
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

We simply have protected the whole uploads area and redirect to login if the user is not logged. You can protect a different directory.

Thanks to this support forum thread for the heads up:

http://wordpress.org/support/topic/password-protect-a-whole-directory

Update:

I strongly suggest the use of this plugin:

http://wordpress.org/extend/plugins/custom-upload-dir/

It let’s you set the name of the upload directory, so we can protect not the whole uploads. Because protecting the whole uploads will also

For some reason IE 8 does not handle the onChange attribute of a select box.

<select name="bowsers" id="browsers" onChange="alert('test');">

<option>FF4</option>

<option>IE</option>

<option>Chrome</option>

</select>

Here is a fix than can be used to make this working

<select name="bowsers" id="browsers">

<option>FF4</option>

<option>IE8</option>

<option>Chrome</option>

</select>

<script type="text/javascript">
var selectmenu = document.getElementById("browsers");

selectmenu.onchange = function()
{
 alert('test');
}

</script>

We could have done the call using AJAX at first but we decided to go with standard PHP post method with the API. So we had to find a way to let the user know something is working back-end while waiting when it is loading. It is like when you are on the phone with a large corporation while waiting for the tech support to answer, if there is no music or message telling us to wait we will simply hang up.

Solutions: put an animated gif next to the form submit button to show an animation while user is waiting.

Problem: Well, animated gif can suck in some browser when a post request is submitted and waiting for the server response, the animated gif just stuck on one frame and it is no more an animated gif. This looks even worst as it appears to be broken. Animated gif are very good with Ajax call but for doing a pseudo ajax on post/get call, no go.

New Solutions: using flash loading animation to replace the animated gif.

So I just pick this package from Active Den: Loading Animation. Then I select the right one to show beside my submit button:

So just below the search button I added the following code:

<div id="loading-search" style="display:none;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="70" height="20">
<param name="allowFullScreen" value="false" />
<param name="movie" value="loading-search.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="loading-search.swf" quality="high" wmode="transparent" width="70" height="20" name="loading-search" align="middle" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
</div>

Make sure to set the wmode to transparent so it doesn’t have a solid background. Now we just need to have to display it when the form is submitted. In this case there is a javascript validation so we just put this after the validation with jquery function:

$("#loading-search").show();

Maybe in your case you can use this line in the .submit() from jquery.

Now we have a nice pseudo Ajax animation, looks like ajax but it’s not.

Here is a screen shot of what we want to achieve:

Here are the spec:

• Rounded corners
• Dark gradient (can be any color but dark for this example)
• Reflection effect like the good old Web 2.0

Lets first build our xhtml. Pretty simple for this example:

<div class="gradient">
   <div class="reflect"></div>
</div>

Ok there is no content in it yet but we just define 2 div one that will do our gradient and the other one our reflection effect. Now let’s do our CSS with a 3.0 touch.

Gradient

.gradient{
   position:relative;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   border:1px solid #000;
   background:#222222;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#222222'); /* for IE */
   background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#222222)); /* for webkit browsers */
   background: -moz-linear-gradient(top,  #666666,  #222222); /* for firefox 3.6+ */
   height:50px;
}

Here we have used the css3 technique for the gradient to support all major browsers. The start color is the color at the bottom of the box and the end color is the one at the top of the box. So we want a gradient that goes from dark to light.

Reflection

.reflect{
   background:#ffffff;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   opacity:0.1;
   filter: alpha(opacity = 10);
   height:50%;
   width:100%;
}

For the reflection, wow this is simple, with background with an opacity of 10%. We need to use the filter alpha for IE to support the transparency.

And we are done, this was fast. Here is the demo:

Gradient-Reflect Demo

Next time we will do a slick menu with this technique. Stay tuned!

So I wanted to redirect the category called customers to a specific page. Here is how you can do this.

1. Create a php file in the template folder called category-customers.php. Using this name Wordpress will pickup this file automatically when the category archive customers is accessed

2. In the file paste the following code:

<?php wp_redirect( get_permalink(get_option(‘rc4_page_customers’)), 301 ); exit; ?>

You can actually drop this part:

get_permalink(get_option(‘page_customers’))

and replace it with a static url. I used this part to determine the url of a page I set in the admin settings for the theme. get_option will find the option called page_customers. This is useful in case the url of the page is changed by the user. So I recommend doing it.

The 301 parameter in the wp_redirect function just tell the search engine and bot the page has been moved permanently.

That’s it, pretty easy. For more info on wp_redirect, visit this link: http://codex.wordpress.org/Function_Reference/wp_redirect

http://wordpress.org/extend/plugins/backwpup/

Or install directly with Wordpress plugin manager. What is fantastic with this backup tool is the fact it integrates with the major file sharing services like Dropbox, Rackspace Cloud or Amazon S3. Also you can schedule the backup of the database and files so you don’t have to worry anymore about doing this manually.

Give it a shot!

At this point before doing anything, make sure you have a viable backup of you Wordpress database if anything goers wrong. MySQL command are permanent, like the dark pen you took to make nice drawings in the living room when you were 6 years old. Here is an article to read if you never backup Wordpress DB before: http://codex.wordpress.org/Backing_Up_Your_Database

Login to PHPMyAdmin and click on the Wordpress database. Go to the SQL tab. Grab the following commands and change with the urls needed:

Search and Replace MySQL

UPDATE wp_comments SET comment_author_url = REPLACE(comment_author_url, ‘www.olddomain.com’, ‘www.newdomain.com’);
UPDATE wp_options SET option_value = REPLACE(option_value, ‘www.olddomain.com’, ‘www.newdomain.com’);
UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, ‘www.olddomain.com’, ‘www.newdomain.com’);
UPDATE wp_posts SET post_content = REPLACE(post_content, ‘www.olddomain.com’, ‘www.newdomain.com’);
UPDATE wp_posts SET post_excerpt = REPLACE(post_excerpt, ‘www.olddomain.com’, ‘www.newdomain.com’);
UPDATE wp_posts SET guid = REPLACE(guid, ‘www.olddomain.com’, ‘www.newdomain.com’);
UPDATE wp_usermeta SET meta_value = REPLACE(meta_value, ‘www.olddomain.com’, ‘www.newdomain.com’);
UPDATE wp_users SET user_email = REPLACE(user_email, ‘www.olddomain.com’, ‘www.newdomain.com’);
UPDATE wp_users SET user_url = REPLACE(user_url, ‘www.olddomain.com’, ‘www.newdomain.com’);

In less then 3 minutes you are done with the task.

Little Bonus

This maybe useless to you but if you want to change all your post status to draft because of some obscur reason, here is the command:

UPDATE wp_posts SET post_status = ‘draft’ WHERE (post_status = ‘publish’ AND post_type = ‘post’);

UPDATE 31/05/2010

I just build a small script to generate the code automatically: http://www.idowebdesign.ca/mysql-replace/

Thus, In this example we will simple build a list that order the user by the number of articles published and then by the user name.

First of all, you need to create a new template file which you will use in the admin to create the Wordpress page that will show the list.

Now in this template after the loop, let’s do our custom SQL query to get the list of users:

$query = "SELECT u.ID, u.display_name, count(*) as cnt FROM $wpdb->posts p, $wpdb->users u WHERE p.post_parent = 0 AND  p.post_status = 'publish' AND p.post_author = u.ID GROUP BY u.user_login ORDER BY cnt DESC, u.display_name ASC";

Basically this Query is doing what we need, it gets the ID, display name of the users and order them by the number of post (count(*)) they have published. Here we are using count(*) to calculate the number of occurrence the user is appearing for a publishes post and we are grouping the result by user login name. We use an aliases (cnt) because some server can be tricky and not like count(*) term when you do the Order. Let’s run the query:

$UsersID = $wpdb->get_results( $query );

Now we are ready to enter our loop to display the results:

$counter = 0;
$siteurl = get_bloginfo('template_url');
foreach ( $UsersID as $iUserID ) :

   $user = get_userdata( $iUserID->ID );
   $numpost = get_usernumposts($iUserID->ID);

   if ($user->user_level < 3){

      $counter++;
      $membersince = date('M dS Y',strtotime($user->user_registered));

      if ($counter == 2){
         $counter =0;
         echo '<div class="user-block last">';
      }else{
         echo '<div class="user-block">';
      }

      echo '<a href="'.get_author_posts_url($iUserID->ID).'">'.get_avatar( $user->user_email, '60', $default=$siteurl.'/images/gravatar.jpg' ).'</a>';

      echo '<h2><a href="'.get_author_posts_url($iUserID->ID).'">'. $user->display_name .'</a></h2>

      <p>Articles published: <strong>'.$numpost.'</strong></p>
      <p>Member since: <strong>'.$membersince.'</strong></p>

      </div>';
   }

endforeach;

With this loop we are displaying the user avatar, name, number of post and membership history. The name and avatar are linking to the author archive page with all the articles form this user. We are using a counter to add a class to our user block in order to remove the margin on the right side (2 column design).

Obviously, this could be optimize:

• The query could have been part of a function, so we don’t have the sql query showing up in the template page.
• We could have got the user meta directly from the query instead of calling get_userdata in the FOR loop.

And could be improve with ideas to make this code evolved:

• Paging the result, if you have more than 50 users, it will be great to page the results.
• Install a post rating plugin and get the top contributor order by rating.

Please don’t hesitate to leave a comment if you have other suggestion to optimize the code.

http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/

Most important thing is to chmod the script folder subfiles and folder to 777 in order to have it work correctly. Here is an example on how to use it in Wordpress:

<a title="<?php the_title();?>" href="<?php the_permalink(); ?>">

  <img alt="<?php the_title();?>" src="<?php echo get_bloginfo('template_url') .'/scripts/timthumb.php?zc=1&w=306&h=217&src='.get_thumb_url($post->ID);?>" />

</a>

This example is part of the Wordpress Loop. You can change the w and h value in the script URL to modify the image width and height. Best way to do it will be to have these setting part of the Wordpress The Options panel. The get_thumb_url() is a custom function we have built to retrieve the value of the post thumbnail which is available since Wordpress 2.9. We will cover this function in an article later on.