Dec 13, 2008 - AJAX, PHP, Wordpress    24 Comments

Flash swf and Lightbox overlapping problem solution

Recently I was working in an American project where my client wanted to convert this static site to dynamic. Everything was fine except the gallery. The existing gallery was done using Lightbox effect and there was a flash audio file. The audio file was avoiding the Lightbox effect and coming overlapping any effect. And this is where the problem started.

OK. See below for an idea how it looked:

Not funny or interesting. Ugly, Huh? So, my client requested to fix it.

But what is the reason for this problem? Hm? Actually this was happening because Flash file is always above any other elements in your page. It comes at the topmost priority position in your page and that is why it can ignore the Lightbox effect. Our job is to make sure taht the Flash swf file stands behind the door when a Lighbox effect is in action. Clear?

In few blogs, I found possible solutions and they did not work. One possible solution that I thought would work was using z-index property in CSS. One coder advised to keep the embedding code in a lower z-index (such as 0) and keeping the container gallery in higher z-index (such as 1). Although he said, it worked for her, but did not work for me. But you can give a try if you want. May be this trick can work for you depending you code.

So, how did you fix it so that it looks like as follows?

So, what is the trick?  If you make sure that you added the following lines bold red in your HTML code, the problem is solved.

That is all and…

Thank you for reading.

Nov 28, 2008 - PHP, Wordpress    3 Comments

WordPress: Creating a Static Front/Home Page without Plugin

Hello WordPress Developer!

When I was new to wordpress blog devevelopment, I got few projects where the clients wanted a static homepage and a Blog link in the menu. In some other projects, the clients wanted to make the homepage to be semi dynamic; that means in the homepage we will show some wordpress data like three latest posts and other things will be static.

You know when we install WordPress the homepage is by default going to show the latest 10 blog entries. But now the homepage will be static, semi dynamic or anything. We will create a page and link it to default WordPress homepage.

OK. Take a look below of what I mean.

I tried it several ways. But I was not satisfied the available solutions. But luckily I figured out a stable solution. My solution does not need any plugin and it is simple too.

Step One: Create your custom homepage

First of all create your homepage as static, dynamic or whatever you want name it as home.php and remember that when visitors come to your site, they will see this file running as front page or website homepage. Upload it in the theme directory.

Step Two: Create your blog homepage templae

Create your blog homepage template and name it blog.php or anything. For clarity and relevance, let us name it blog.php and upload it in the theme directory.

Here is the code:

Step Three: Create your blog homepage

Now create your blog homepage index and name it as index.php and then upload it in the theme folder.

Here is a sample of blog index.php file code:

Step Four: Create a page as Blog from admin panel

Now log in to the admin panel and create a page named as Blog. See the image below what I mean:

Do not save or publish this page right now. Follow the Step Five below before you save or publish this page.

Step Five: Set the blog page template

Now go to the Advanced Options section at the bottom. Under Page Template, select Blog template for this page.

Take a look of what I mean:

Now publish your page!

Now you may ask how this Blog template is coming? It is coming because of Step Two and of the first 5 (five) lines as below:

Step Six: Check your site

Now go to your site and check everything! We are done!

I must say a big thanks to my American friend Joshua Knowles for his contribution to find out this smooth technique. Although Joshua is not a regular developer, he is a brilliant guy indeed!

Thank you for reading.

Nov 23, 2008 - PHP, Wordpress    6 Comments

Flickr Gallery in WordPress: Integration with FAlbum plugin

Hello!

Recently I added a gallery in wordpress blog that displays photos from a wordpress plugin FAlbum. This plugin is very nice one and works very smoothly with wordpress. Installing and configuring it with wordpress is somewhat tricky and time consuming. Once you set it up, it will be your great tool.

OK. Now let me share my experience in setting up, configuring and integrating the FAlbum Flickr plugin with wordpress blog.

Integrating a small gallery in wordpress

Before we start, please take a look at what we are going to do. Check the following link.

Click here to see a small gallery with 6 photos at the bottom of the page.

Step One: Download and install the FAlbum plugin

First of all, download the FAlubum plugin from the following link:
http://www.randombyte.net/blog/projects/falbum/

Now unzip the file and make sure that you unzip the file in a folder named as falbum. A common error is unzipping the files in a folder named as FAlbum-0.7.1 and uploading it in the plugins folder of wordpress. Make sure that your files are located as follows:

instllation_directory/wp-content/plugins/falbum/falbum.php
instllation_directory/wp-content/plugins/falbum/FAlbum.class.php
instllation_directory/wp-content/plugins/falbum/wordpress-falbum-plugin.php etc

Step Two: Activate the FAlbum plugin

Log in as admin in your wordpress system and activate FAlbum under the Plugins tab.

Step Three: Configure and setup the FAlbum

Now from the Settings tab, go to FAlbum tab as like Settings –> FAlbum.

Here you will find two steps, complete both of them.

Step Four: Set the options and the (dot)htaccess file

Next, you come to FAlbum Options. Now set there everything as per your preference. Remember one important thing. It is about your (dot)htaccess file. If it is not writable, make it writable. Otherwise, you will get a message that your (dot)htaccess file is not writable and the plugin will request you to copy and past some code. Do either way you like.

Just for your information, I am using the the default settings without change any of them.

Step Five: include and add album code in your theme file

I am showing 6 (six) Flickr photo files at the bottom. So I have add the following code in my footer.php file.

In my footer.php file code, I placed in a DIV element. So, it looks somewhat like this:

Step Six: creating falbum.php file from index.php file

Now we will go to our theme directory. Here you see several files like index.php, header.php, footer.php etc. Now copy the index.php file and paste it as falbum.php. Open the falbum.php file and add FAlbum code and a sample is as follows.

Upload this new falbum.php file to your theme directory in the server.

Please remember that there are two different falbum.php files in two different locations. So, pleaes do not confuse with one another.

instllation_directory/wp-content/plugins/falbum/falbum.php
instllation_directory/wp-content/themes/theme_name/falbum.php

We have created the second one from our theme’s index.php file.

Step Seven: Check the output

Go to your website, refresh it twice and click on the thumbnail of any flirkr image.

So, you are done. Huh?

Integrating a complete gallery in wordpress

Well. You may want to keep a single page as your album home and in that page you may want to keep some Flirkr photos in thumbnail so that it looks gallery homepage. Fine!

Now let us see how we can do this.

Step One: Read the above part “Integrating a small gallery in wordpress”

Check the above part thoroughly since you will need the knowledge from the above part titled as Integrating a small gallery in wordpress. Since many things are common, I have avoid the repeated description.

Step Two: create a file and link it to wordpress

First of all, create a file and link it with wordpress. You can follow my another article to do this. The another article is here:

http://www.tanzilo.com/2008/11/02/wordpress-how-to-add-and-link-static-or-custom-pages/

Step Three: add the album code to your page

You can add photos in several ways. For example, if you want to add latest or recent 8 photos, add the following code.

If you want to show 8 random Flickr photos, add code like this:

You will find more details on how to customize your page in the following link:
http://www.randombyte.net/wiki/falbum/functions_and_variables

Step Four: Customize CSS coding for custom look

Remember that each thumbnail photo will be placed in a list element. So, if this is the PHP code where we place the album:

Here is the CSS to make them looking like a thumbnail gallery:

Next, the bigger photo and all other things like next, previous buttons and tags etc will be displayed in a DIV element named as content.

Step Five: Check your site

Now you are done! Go to your site, refresh the site twice and check you album.

So, we are done!

These following two links will be helpful and you can visit them for more information:
http://www.randombyte.net/wiki/falbum/functions_and_variables
http://www.randombyte.net/wiki/falbum/incorporating_falbum_into_your_own_theme

Thank you for reading.

Nov 14, 2008 - MySQL, PHP    2 Comments

SQL Injection Prevention & Protection in PHP & MySQL with Example

What is SQL Injection?

SQL Injection is the process when someone executes one or more SQL statements in your database without your knowledge to harm the data in your database. In this technique, someone exploits a security vulnerability in database application layer. This happens often when you ask for input(s) from the user and they add extra SQL statement(s) with the valid input. We can illustrate this situation with two cases (1) user inputs are incorrectly filtered or (2) user submitted data is not strongly typed and one ore more of the inputs is executed unexpectedly.

This is possible because the user can submit any input and you may have no or weak user submitted input filtering coding, you can execute one more statements in your database at a time.
For example,
Case 1:

Executing one statement at a time is OK.

Case 2:

Executing more than one statement at a time is also OK.

Now an intruder can combine Case 1 and Case 2, run all the queries at a time and then delete the users table and harmfully update the customers table.

As a result, a successful SQL Injection occurs and harms the database information.

Reasons behind SQL Injection

In the following situations, SQL Injection happens.

  • Incorrectly filtered escape characters
  • Incorrect type handling
  • Vulnerabilities inside the database server
  • Conditional Errors

Case 1: Incorrectly filtered escape characters

You have a module that asks for user’s email address to send a temporary password to her email address when she forgets her password. So, the usual SQL query will be like this in this case:

But an intruder can extent this statement if they set the value for the $email variable in this way and delete the user table:

[email protected]’; DROP TABLE users; SELECT * FROM customers WHERE name LIKE ‘%

As a result, the final statement is something like:

So, you see the intruder is deleting the users table easily. And as a result, you lose your users table and your system crashes since no user will be able to log in from now on. If you do not have a database backup, you loose everything.

Case 2: Incorrect type handling

Sometimes you definitely know the type of data. For example, the age of a customer is a numeric value, gender of a user as male or female, total amount of bill as double value.

Now what if someone submits the $ageValue value as 20; DROP TABLE users

The resulting sql is:

You know for sure that the value of will be always an integer. If you do not check if the value is really an integer, the intruder can add one or more statements with the value of $ageValue variable and harm your database.

Case 3: Vulnerabilities inside the database server

Although some people think that they can avoid SQL Injection just by using mysql_real_escape_string() function in PHP, they are wrong unfortunately. Built-in functions supplied with language package to work on database is sometimes vulnerable to database and thus are not successful to avoid the attack all the times.

Case 4: Conditional Responses

Using SQL Injection the user can easily bypass the sign in or log in process in your system. Let us give an example:

Now you know satisfying only one condition is enough to enter the system. The condition OR 1=1 is always true. Thus, the intruder can fool the log in system.

SQL Injection Prevention and/or Protection

These are the techniques for preventing SQL Injection:

  1. Use Parameterized Query
  2. Use Stored Procedure whenever applicable
  3. Apply Regular expression to discard invalid inputs
  4. Write and use Quote blocking  function
  5. Hide detailed error messages from the user
  6. Create a database user with less privileged role
  7. Set the limitation for maximum value in your HTML form

1. Use Parameterized Query

Rather than directly supplying the values in the SQL statement, let us supply the values in parameterized way as follows:

“i” stands for integer type
“d” stands for double type
“s” stands for string type
“b” stands for a blob and will be send in packets

2. Use Stored Procedure whenever applicable

Using stored procedures can help your to reduce the attack risk too.

3. Apply Regular expression to discard invalid inputs

Regular expression is very powerful process to find out the validity of the inputs. We can check whether the input is given in proper format. For example, here we validate data for a valid numeric value for customer age and reject any chance for SQL Injection.

You can also user the built in PHP is_array(), is_bool(), is_double(), is_float(), is_int(), is_integer(), is_integer() etc functions to check if the user provided information is in proper format.

4. Write and use Quote blocking  function

If you are using PHP, mysql_real_escape_string function for each and every user given inputs. For example,

This is a very powerful built-in PHP function and will stop SQL Injection in most of the cases. I have used it for long time and found it performing great. You can try to inject SQL after you use the mysql_real_escape_string function and test if you can succeed any way. This powerful function rejects the possibility of many clever techniques used by the intruders.

5. Hide detailed error messages from the user

First of all avoid using the built-in MySQL mysql_error() function. The clever intruder can guess many things from the error message and sometimes the error message may show the connection parameters. Using mysql_error() function is good at development stage. But avoid or clean it when you run it in the real server for users or visitors.

The second thing is stop error reporting in PHP. This is simple and one line code.

The third thing is better you give a customized error message. See an example:

As a result, the user will not know what the error is and how it is. He will also not get any accidentally disclosed crucial information such as database name, table name, username etc.

6. Create a database user with less privileged role

In most cases, you will notice that the visitors do not need to delete or update any information. Think of a music selling site. The user can request for data (which is SELECT query) and make their orders (which are INSERT query). Even sometimes the SELECT operation is just OK in many sites.

So, create different users with different privileges. For admin grant all the permissions. But for a general visitor, grant only limited permission. For example, I am creating, two connection string for two users.

And now we can user the $visitorDbLink link for regulating information connecting with the visitors and will use the $visitorDbLink link only for the administrator.

7. Set the limitation for maximum value in your HTML form

We can set that the username cannot be more than 10 chars. Try to use the “maxlength” property for HTML form. An example is like this:

As a result, possibility of attack by intruder somewhat goes down since he cannot input enough harmful SQL statement input. But it is not very helpful though and the user can bypass this creating his own form and submitting the custom form.

8. Using a PHP Framework

If you are using a PHP framework like CodeIgniter or CakePHP, the framework will protect you at maximum level from SQL injection. Complain of SQL Injection after using a PHP framework is rare and I did not hear even one still now.

This kind of frameworks are Open Source, very matured and strong nowadays and they do each and everything possible such as from input filtering to URL rewrite. Learning them is easy although it take some time. You can get books and other online materials about this PHP frameworks.

If you are an advanced PHP coder or developer, my suggestion is you better code using a PHP framework you like.

These are all I know about SQL Injection.

Thanks for reading.

Nov 9, 2008 - PHP    4 Comments

PHP: pass all POST and GET variables in array in function parameter

Hello!

My subject of this post is about the total number of parameters we send as input from a form or any other way and optimizing the parameter passing. If we have many forms and many input fields in each form, it is often painful to set or order value of GET, POST or other variables one by one.

Passing all POST variables as function parameter in one array

Let us see the following HTML form that has ten fields.

Now if we want to call a function passing all the input fields, it will look like this:

But does it look good or anything comfortable? I know most coder will be bored doing this. When I was a newcomer to PHP programming, I used to do this kind of programming. But there is no reason to do coding like this as we have extremely simple solution.

Fortunately we can pass a whole array as function parameter value. This is how:

Function calling:

Or the Object Oriented Programming style:

Easy and comfortable. Huh?

Getting the values inside the function definition:

Simple. Right?

You can also print all the input values inside your function you want for debugging or any other purpose as like this:

Passing all GET variables as function parameter in one array

Suppose that here is your link:
http://www.example.com/products.php?type=cap&max_price=1000&min_price=100&material=leather

You can pass all the GET variables to a function such as ‘filterKeys’ in this case simply this way:

Or the Object Oriented Programming style:

And here is how you get them:

This is just like the way used for the POST method.

You can print the input values inside your function anytime you want for debugging or any other purpose like this:

Although REQUEST method will work similarly, I suggest you not using this for avoiding any future confusion and also for the sake of keeping your coding more readable for other developers.

Special Case: File

Actually when you send a file, it contains several data and $_FILES is an array itself. So, the following values come directly to your script without any extra attention:

So, you can use them directly in your script.

Taking another Special Case in Consideration: Setting default input values

Sometimes you may need to set a default value to one or more parameters. For example:

You can define array and scalar inputs altogether as like this:

Next you can pass array and scalar inputs altogether as like this:

So, why should you code like this? Because this will increase efficiency, save some time and make your code clean looking.

Thanks for reading.

Nov 8, 2008 - CSS, DHTML    11 Comments

Round image corner in HTML & CSS using Table or DIV

Many times in many sites, you have of course seen round or circular corners. Developers often use round corners to give the site more attractive and professional look. When I was new to web development and trying to figure out how to make the tables’ corners round or circular or oval, I thought it must be a very tough task. Because I was searching solution in Google.com and all the solutions I found was either tough or I could not like. Ha ha. Later I found my own way. But I am sure many developers are using this already.

Here I share my easy and simple way:

Round Corner in DIV:

Step One: Creating a colorful table in Adobe Photoshop, Illustrator or any other tool

I have used Adobe Illustrator’s Rounded Rectangle Tool to create a round corner image. Then I saved it as ‘Save for web’, JPG format and in maximum image resolution. Here is the orange color round corner image:

Step Two: Separating the top and bottom

Now I cut 20 pixels from the top of the rounded image and I name it as ’round-top.jpg’. Here it is:

It is 260 pixels in width and 20 pixels in height.

Next I cut 20 pixels from the bottom of the rounded image and I name it as ’round-bottom.jpg’. Here it is:

It is 260 pixels in width and 20 pixels in height.

Step Three: Setting the top

Here is the CSS code:

And here is the HTML code:

Step Four: Setting the mid section

In the mid section we are going to place another DIV and we will put our text, image or any other content inside it. Here is the CSS code:

Notice that although the width of other DIVs is 260 pixels, this DIV has only 240 pixels. That means 20 pixels smaller than other DIVs. This is because we are giving 10 pixels padding in left and 10 pixels padding in right. This total 20 pixels padding will be added with our 240 pixels and make the DIV size looking like a 260 pixel DIV.

And here is the HTML code:

Step Five: Setting the bottom

Here is the CSS code:

And here is the HTML code:

Step Six: Code altogether

If we put all code together, it will look like this:

Here is the CSS code:

And here is the HTML code:

And that’s it!

You can see the demo here: Demo of rounded corner in DIV
I suggest you visiting this link, opening the source code and taking a look.

Round Corner in Table:

Step One: Creating a colorful table in Adobe Photoshop, Illustrator or any other tool

Just follow the same as Step One of the Round Corner in DIV section above.

Step Two: Separating the head and bottom

Just follow the same as Step Two of the Round Corner in DIV section above.

Step Three: Setting the table tag

Here is the CSS code:

Notice that we have set the table widht to 260 pixels that is equal to our top and bottom images’ width. We do not need to mention the table width to any other place.

And here is the HTML code:

Step Four: Setting the top

We simply set the TD background to ’round-top.jpg’ and set its height equals to the ’round-top.jpg’ image which is 20 pixels.

Here is the CSS code:

And here is the HTML code:

Step Five: Setting the middle section for the content

We simply keep 10 pixels padding in both left and right side and set the background.

Here is the CSS code:

And here is the HTML code:

Step Six: Setting the bottom

We simply set the TD background to ’round-bottom.jpg’ and set its height equals to the ’round-bottom.jpg’ image which is 20 pixels.

Here is the CSS code:

And here is the HTML code:

Step Seven: Code altogether

Here is the CSS code:

And here is the HTML code:

And that’s it!

You can see the demo here: Demo of rounded corner in TABLE
I suggest you visiting this link, opening the source code and taking a look.

By the way, nowadays I am no more using tables. Rather I have shifted to table-less CSS based DIV style design. And I feel very comfortable using this technique in my DIV structured design.

You can download sample code from here:
Source Code for Round image corner in HTML & CSS using Table or DIV

Thanks for reading.

Nov 2, 2008 - PHP, Wordpress    14 Comments

WordPress: How to add and link static or custom pages

When I was new to wordpress theme development, I faced a common problem that many others might have faced. That is adding or linking or integrating a static or custom page in your wordpress site. It is very possible that you may prefer to keep one of your page or file linked as the following:

http://www.yoursitename.com/products.php

Sometimes this kind of requirement arrive that you have no other option but to do it.

But you know this kind of link will not directly appear in your wordpress blog or site because of the unique linking structure of wordpress. Most probably you will get a 404 error i.e. file not found error. So, if you want to link directly, you need to follow a simple trick. This trick is simple, small and intereting.

If you want to add and link your custom or static pages, follow these steps and you will get smooth result:

Step One: Changing the header of the php file

In this article, we will add a php file products.php in our wordpress blog. So, please create your products.php file.  Now open you products.php file and add the following two lines at the top of the file and save your file.

Remember, these lines will be the topmost lines in your products.php file. OK? See below how I added.

Why are we adding these two lines? Because we are telling wordpress that this file will not use wordpress themes and we are going to link it in a different way. So, wordpress do not force to link in its usual way.

Step Two: Saving in the public_html or root folder

Now upload it in the wordpress installation directory so that it looks like:

http://www.yoursitename.com/products.php

Done? Great!

Step Three: Linking the products.php file in a usual way

Now in the code of any wordpress file where you want to link your products.php file, keep the html linking as usual or what we say relative linking. For example, in the contact us page, I am creating such a link in the body section:

And yes! We are done!
Test now if it works for you.

Thus, you can add any number of pages in your wordperss site. I do not know exactly when you may need to link this way. I had to do it time to time depending on the client’s project requirement.

Thus, you can also protect your pages from permalink (dot)htaccess in wordpress.

Thanks for reading.

Nov 1, 2008 - PHP, Wordpress    48 Comments

WordPress: get page content by page id. Static pages to Dynamic

Hello!

Recently I am working in a wordpress project where I am converting a total static site to wordpress site. What I do is: (1) from the static pages, I am taking the static text and creating a new wordpress page for each static page. (2) fetching the page content/text by page id and (3) showing them wherever I want.

I have written a function and now I can fetch the content of any page or one more pages just by the page id.

I am using this function to fetch several page data and show them in one page. In the static site, there are several section with different designs. The client want edit each section using wordpress. So, if there are three different sections, I am creating three individual pages for this single page. Next, I am just fetching the content of the three pages by calling my method three times with different parameters and showing the output in one page.

For exampe,

Thus, I am just shifting all text and/or content of the static site to wordpress so that the client can edit the site himself. I think this is a simple way or technique if you want to convert your static page to dynamic wordpress site.

You can also customize this one as per your need. For example, you may only need to fetch the page title.

You can not only get the page content, but also the post content if you set the value of the “$pageId” equals any post id. You know you can see the page or post id from the admin panel.

By the way,
I have put my functions in the functions.php file so that I can access it from anywhere. I suggest you following the same way i.e. writing all your custom functions in the functions.php file.

Thank you for reading.

Oct 24, 2008 - CSS, Web Design    10 Comments

Tableless Web Design in CSS: 2 & 3 columns with Header & Footer

Hello Folks,

You know the web design has already transferred from the table based design to tableless design. This does not you will never use tables. What it means that using table in building website structure is getting rare. But why do people go for tableless design? Although there are many reasons, the most important reason is you save a lots of bandwidth by coding cleaner and fewer lines. Tableless web design is fun too!

But I must admit that it is a very easy tutorial for anyone. My target audience is those who are new to website design and wish to start designing in tableless format.

If you do not understand the whole article at the first time, my suggestion is you read it again.

OK. Let us start. Here we go:

2 Column tableless page design

Step One: A 2 column complete page coding

First take a look at the page code below. You can see the output here: 2 Column Page Output

I suggest you go to this output page, open the source code and take a look for a better indent view.

In the following steps, I am going to clarify what I have done and how.

Step One: The CONTAINER div is holding the whole page content

First of all, please note that we have kept all our content elements inside a container DIV element:

And here is the CSS for this section:

Notice that this is a fixed width design of 775 pixels and the part margin:0 auto; sets the content area in the page center alignment.

Now we have three main areas inside our container div and there they are:

In the header div section, we only put a two line text and in the footer div section, we put just the copyright information.

Here is the CSS for header div:

Note that we are clearly specifying the width and height of the header section. Sometimes you may find that this section is not appearing. It may happen if you do not mention the values for height and/or width clearly.

And here is the CSS for footer div:

We clearly specified the values for height and width again. But specially notice the clear:both; part. Why do we write this line? Because we are using floating feature. When we use clear:both;for a div area, it floats left by default and does not mess up with any other div area.

Simple. Huh?

Step Three: The CONTENT div

We have put our two columns in the content div:

<div id=”content”></div>

And here is the CSS for content div:

Notice that we are using clear:both; coding to avoid any mess up with the header. If you do not clear your div, it will automatically try to be positioned side by side with the preceeding div (provided it gets enough space there).

Step Four: The two columns in the CONTENT div

Inside our content div element, we have two div element and those are leftColumn div and rightColumn div.

Here is the CSS for leftColumn div:

And here is the CSS for the rightColumn div:

You specially need to notice the following two things

1. We are using float feature for both of them and floating both of them to left.
2. Add the witdh of the leftColumn and rightColumn and that is 775 pixels (225 px + 500 px) that is exactly equal to the width of our container div (775 px).

What I am trying to say is: when you float two DIVs to the same direction (i.e. left in our case), they take position side by side as like two columns. But the total width of both of them must be equal to or less than the width of the div they are positioned.

Step five: Putting something in the left and right columns

We assign some text in the left and right columns and thus we are done.

3 Column tableless page design

Step One: A 3 column complete page coding

First take a look at the page code below. You can see the output here: 3 Column Page Output

I suggest you go to this output page, open the source code and take a look for a better indent view.

Explanation for the 3 column design:

When you understand 2 column design, it is very easy to understand the three column design too since they are very similar. Everything else are as they were but now we have three columns in the content div:

Left column CSS:

Middle column CSS:

Right column CSS:

Well. Notice that (1) we are floating them all to the left direction to keep them side by side in column style and (2) the total width of all the three columns is (200 px + 375 px + 200 px) or 757 pixels which is exactly equal to the width of the container div (775 pixels).

Thus, you can make as many columns as you want. But make sure the total width of all your columns is smaller than or equal to the available space (width).

I tries my best to keep this post as easy as possible. If you are not clear or do not understand the whole article at the first reading, I suggest you giving a second reading.

Thanks for reading.

Oct 18, 2008 - Wordpress    42 Comments

Password protect sub-directory in wordpress by htaccess

Hello!

Recently a Canadian client of mine told me to look at an interesting wordpress problem. I regularly develop wordpress theme for him. He is a great artisitic designer of wordpress theme and I code theme to HTML & CSS. Whatever, my client told me that he wants to password protect a sub-directory “download”. He has done it from cPanel. He also created a user and permitted that user in that sub-directory. But it was not working.

Befoer I start, I want to clear that in this case wordpress was installed in root directory. One more thing is in this post i cannot write “.” and “htaccess” together. May be this is a security issue. If I write “.” and “htaccess” together, the post is not saved and I get a 404 error. So, I have written (dot)htaccess instead. Again, (dot)htpasswds instead of “.” and “htpasswds” together.

So I logged in to the cPanel to check what is happening actually. I found that whenever you password protect a sub-directory from cPanel, a new (dot)htaccess file will be created in that sub-directory. And the content of the (dot)htaccess file is less or more like as follows:

And your password that you set from the cPanel will be encrypted and saved in a file (dot)htpasswds in the AuthUserFile location.

If this was not a wordpress site or it was a wordpress site (but custom Permalink not used; rather the Default used), you should not face problem in most cases. But when you use customized Permalink in wordpress to create beautiful links and try to protect a password, the password protection from cPanel does not work!

But do you know why? Here is the reason: in the root directory you installed wordpress and here there is a (dot)htaccess file. The settings in this file and the (dot)htaccess in your sub-directory (for example root_directory/download/(dot)htaccess) do not smoothly match with each other with since you are using Permalink plug-in to customize your URLs.

So, when you try to go to: http://www.yoursitename.com/download wordpress think that it is a post or page!

WordPress think this because you have enables permalink and this is quite correct and logical. But you know your download sub-directory is not a post but a folder/directory in the root folder. So, you need to do something so that wordpress does not confuse the following link as a post or page.
http://www.yoursitename.com/download

Here is the solution:
1. Open the (dot)htaccess file in http://www.yoursitename.com/(dot)htaccess
2. Find out the line # BEGIN WordPress
3. Just before this, add the following three lines:

4. Save the (dot)htaccess file and upload in your root or installation directory.

Now go to http://www.yoursitename.com/download and check if it works. If everything is OK, you should get a prompt asking for a username and password that you set from the cPanel.

Here is my example:
Sub-directory download password protected: http://www.tanzilo.com/download
Permalink smoothly working: http://www.tanzilo.com/2008/10/18/password-protect-sub-directory-in-wordpress-by-htaccess/

Or you may install a shopping cart in location as in:
http://www.yoursitename.com/shop

This should work smoothly too as you see my example here:
http://tanzilo.com/shop

Although there is an application/software in the shop sub-directory, wordpress no more thinks it a post or page!

Thus, you can set (dot)htaccess, password protected sub-directory (i.e. /download/) and any other sub-directory (i.e. /shop/) in such a way that they will be living in happiness in the same home!

The last interesting thing is this solution is sometimes helpful in Drupal and in some other applications where (dot)htaccess and URL rewriting code do not fit together.

Thanks for reading.

Pages:«123»