Saturday, May 29, 2010

Redirect non-www to www and vice versa using .htacccss

In this post with simply two lines of code I will show how to redirect all non-www traffic to www traffic as well as how to redirect all www traffic to non-www by editing .htaccess file.

Redirect non-www to www
Edit .htaccess file and add following lines,
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]
This will redirect any non-www to www site regardless of domain name.

Redirect all www to non-www
Edit .htaccess file and add following lines,
RewriteEngine On
RewriteCond %{HTTP_HOST} !^domain-name\.com$ [NC]
RewriteRule ^(.*)$ http://domain-name.com/$1 [R=301,L]

Here we explicitly mentioned domain name.

In the example replace domain-name with your domain. For example for site http://arju-on-it.com my .htaccess of redirect all www to non-www will look like below,
RewriteEngine On
RewriteCond %{HTTP_HOST} !^arju-on-it\.com$ [NC]
RewriteRule ^(.*)$ http://arju-on-it.com/$1 [R=301,L]

Friday, May 28, 2010

How to enable theme and plugin editor for wordpress mu

After you install and login for first time in wordpress mu you will be astonished that under Appearance tab there is no longer present an "Editor" link and under under Plugins section there is no longer present "Plugin Editor" on Dashboard in WPMU. So you might wonder how you will change a theme or plugin or a stylesheet file from wordpress.

Following is a screenshot about how you see Appearance section.


You can get the editor by installing plugin or manually changing files in wordpress.

Installing Enable Theme and Plugin Editor (WPMU) plugin
You can get theme and plugin editor by simply,
- Login to Wordpress dashboard as site administrator.
- Under Plugins tab click on Add New.
- Install Plugin window will appear. You will see Search for plugins by keyword, author or tag.
- Choose Term from drop down menu, in the textbox type "Enable Theme and Plugin Editor" and then search Plugin. You will see "Enable Theme and Plugin Editor (WPMU)" there. Just install it and activate the plugin. You will see your editor for theme and plugin will appear in wordpress MU.

Manually Installing Enable Theme and Plugin Editor (WPMU) plugin

- Download the "Enable Theme and Plugin Editor (WPMU)" plugin from http://wordpress.org/extend/plugins/enable-theme-and-plugin-editor/.

- Using an FTP editor upload the plugin file(s) or folder to the /wp-content/plugins folder.

- Login to Wordpress dashboard as site administrator and click on Plugins.

- You should see your new Plugin listed. To turn the Plugin on, click Activate on the far right side of the list.

- After you activate you will see theme and plugin editors are enabled and you can modify files within wordpress admin panel.

Manually changing Wordpress files
- Go to wp-admin/includes folder of your Wordpress MU installation directory.
- You have to edit the mu.php file. Open the mu.php file with any editor software and search for the term "unset( $submenu['themes.php'][10]"); " and "unset( $submenu['themes.php'][10] );" . You have to comment both of these two lines.

So, before changes
unset( $submenu['plugins.php'][15] ); // always remove the plugin editor
unset( $submenu['themes.php'][10] );  // always remove the themes editor
And After Changes
/* unset( $submenu['plugins.php'][15] ); */ // always remove the plugin editor
/* unset( $submenu['themes.php'][10] ); */ // always remove the themes editor

- After you commented above two lines, you should be able to see the theme editor and plugin editor option but still those pages will not accessible. To overcome that, you need to make below changes in mu.php file.

Search for the term "if ( strpos( $_SERVER['PHP_SELF'], 'user-new.php'" inside mu.php file you will see following Before Changes lines. Then you need to make it like After Changes.

Before Changes
$pages = array( 'theme-editor.php', 'plugin-editor.php' );
foreach( $pages as $page ) {
    if ( strpos( $_SERVER['PHP_SELF'], $page ) ) {
        wp_die( __('Page disabled by the administrator') );
After Changes
$pages = array( 'theme-editor.php', 'plugin-editor.php' );
  foreach( $pages as $page ) {
     if ( strpos( $_SERVER['PHP_SELF'], $page )&& !is_site_admin() ) {
         wp_die( __('Page disabled by the administrator') );
Now check on your Wordpress MU dashboard. You will find the theme editor and plugin editor is working properly in your MU installation.

Wednesday, May 26, 2010

How to install a Wordpress theme

In the post Introducing wordpress theme I have already discussed about wordpress theme. Now in this post I will discuss how we can install and activate a wordpress theme.

Whenever you install wordpress you already have noticed that there is a default blue style theme and a WordPress Classic 1.5 by Dave Shea. But for your website you of course will try some good and attractive theme. Following steps will help you.

Automatic Installation of Wordpress theme using Wordpress Administration Panel.
Step 01. Log in to the WordPress Administration Panel.

Step 02. Select the Appearance panel, then Themes.

Step 03. Select Add New Themes

Step 04. Use the sub-menu or the Search or Filter options to locate a theme you would like to use.

Step 05. Click on the Preview link to preview the theme.

Step 06. If you are satisfied with the preview use the Install link to upload the theme to your blog. You may need to provide your ftp information in this phase.

Step 07. After you install wordpress theme you will get a message like below.
Downloading install package from http://wordpress.org/extend/themes/download/......zip

Unpacking the package.

Installing the theme.

Successfully installed the theme ................

Actions: Preview | Activate | Return to Theme Installer

You will have three options. Now you need to click on Activate to apply the theme.

Alternatively, you can activate your theme from http://domain_name/wp-admin/themes.php

Manual Installation of wordpress theme
Step 01: Choose a theme to use for your site.
At first you need to find out suitable themes for your website. There are lots of free and paid wordpress themes. You can either google it or you can find it from wordpress site. After you choose the suitable theme download the theme zip file.

Step 02: Extract the theme zip file.
Once you download the theme extract the zip file using unzip or unrar utility. Review the readme.txt and any screenshot of the template. There might also have index.html file.

Step 03: Upload the theme directory into wordpress wp-content/themes folder.
After you download and extract the theme folder upload the theme folder into wordpress site's wp-content/themes directory. For example if you theme name is SkyTheme then all theme files will under under sitename/wp-content/themes/SkyTheme. You can use ftp or ssh to upload the theme files. FileZilla is an example of good ftp client software.

Step 04: Activate the theme.
The theme files are uploaded and now you need to activate the theme. To activate the theme.
- Log in to the WordPress Administration Panel.
- Select the Appearance panel, then Themes.
- From the Available Themes section, you will see your theme. Click on the theme title (or theme screenshot) for the theme you wish to activate.
- A preview of the theme will be shown.
- To activate the theme click the Activate "Theme Name" link in the top right.

Note that, if the theme preview is blank, do not activate the new theme without investigating further. Your site may not be displayed correctly, otherwise.

Related Documents
Introducing wordpress admin panel
Fatal error: Allowed memory size of 33554432 bytes exhausted
How to add a logo to wordpress site
How to transfer wordpress site to new domain
Introducing wordpress theme
How to install wordpress

How to display multiple images from one thumbnail using lightbox

With lightbox wordpress plugin you can present your group of images in a slick window, while darkening the rest of the page which makes your site professional looking. Now if there is two many images then you might think about group of images. For example, you can think in one group there will be 50 images and in another group there will be 60 images. Displaying 50 and 60 images in one page increases loading time as well as space is wasted and make sites unprofessional looking. So you might wonder how to keep only one thumbnail and clicking on thumbnail will load multiple images.

Let's say we have the following codes, which is used to display 10 images and we have 10 thumbnails through lightbox. Now our goal will be display only first image thumbnail and upon clicking on first image we can go backward and forward to display rest of the images.

<a href="http://arju-on-it.com/wp-content/uploads/HKMagazine.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Magazine" src="http://arju-on-it.com/wp-content/uploads/HKMagazine.jpg" alt="HK Magazine Interviews Fion Chang AKA Hong Kong's Makeup Magician" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides evening gowns.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Brides" src="http://arju-on-it.com/wp-content/uploads/HK Brides evening gowns.jpg" alt="Elegant Evening Gown" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides floral evening gown.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Brides" src="http://arju-on-it.com/wp-content/uploads/HK Brides floral evening gown.jpg" alt="Floral Evening Gown" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides gold evening dress.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Brides gold" src="http://arju-on-it.com/wp-content/uploads/HK Brides gold evening dress.jpg" alt="Gold Evening Dress" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides jade evening dress.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Brides jade" src="http://arju-on-it.com/wp-content/uploads/HK Brides jade evening dress.jpg" alt="Jade Evening Dress" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides pink evening gown.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Brides pink" src="http://arju-on-it.com/wp-content/uploads/HK Brides pink evening gown.jpg" alt="Pink Evening Gown" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides scarlet red evening gown.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Brides scarlet" src="http://arju-on-it.com/wp-content/uploads/HK Brides scarlet red evening gown.jpg" alt="Scarlet Red Evening Gown" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/bridal bouquet.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="Bridal Magazine" src="http://arju-on-it.com/wp-content/uploads/bridal bouquet.jpg" alt="Bridal Bouquet Couple" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/my garland.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="Bridal Magazine Garland" src="http://arju-on-it.com/wp-content/uploads/my garland.jpg" alt="My Garland" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/greenery.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="Bridal Magazine wedding" src="http://arju-on-it.com/wp-content/uploads/greenery.jpg" alt="Wedding Greenery" width="60" height="70" /></a>

The idea we need to make the first image to be loaded via <img> tag and for rest of the images there will be no <img> tag. So re writing my code as following.

<a href="http://arju-on-it.com/wp-content/uploads/HKMagazine.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Magazine" src="http://arju-on-it.com/wp-content/uploads/HKMagazine.jpg" alt="HK Magazine Interviews Fion Chang AKA Hong Kong's Makeup Magician" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides evening gowns.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides floral evening gown.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides gold evening dress.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides jade evening dress.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides pink evening gown.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides scarlet red evening gown.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/bridal bouquet.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/my garland.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/greenery.jpg"> </a>

The above code will work and it will display multiple images under one thumbnail. Since it is defined via the img tag, but the others have no content, but will still be parsed by the lightbox script.

In a nutshell, to make one thumbnail and multiple images write code in this way,

<a href="image_url"><img src="imageurl" alt="Arju on IT" width="60" height="70" /></a>

<a href="image_url"> </a>

<a href="image_url"> </a>


An important note is to follow the space and indentation as required. If you don't follow lightbox-2 code will not work.