Did you ever experienced hard times trying to get your hand crafted Wordpress website transferred from your local test environment to the destination server? Did you spend countless hours trying to make things work? If you can answer yes to these questions then this article is for you. I’ll explain in plain English how to make a smooth transition from you localhost to the destination server.

Before we begin, I need to make some assumptions:

• You have your website working perfectly on your local machine.
• Local environment is either a PC or Mac on which you run a web server with PHP and a MySQL database and you have access to phpMyAdmin.
• Destination server runs Apache or IIS, you have FTP details, access to phpMyAdmin, database server name, database name, database user name & password.
• Other configurations may work as well.
• It doesn’t matter which version of Wordpress you are using.

Also, a quick “executive summary” of all the steps below:

1. Export your local Wordpress database to a text file.
2. Search and replace http://localhost/yoursite with http://www.yoursite.com
3. Create a database on your destination server and import your database.
4. Copy all files from your local machine to destination server and amend wp-config.php file with new database details.
5. If necessary change file and folders permissions so Wordpress will be able to use them.

Step 1 – Export Local Database To Text File

Open up your browser and access phpMyAdmin and select your website database from the drop down box on the left. This may look like this:

Step 1a (click to enlarge)

Go to Export section (click on the Export tab at the top). Depend on your version of the phpMyAdmin this section may look bit different but the functionality will be the same.

Click ‘Select All’ in the Export form. All tables should be selected now. Leave other options as they are. Navigate to the bottom and tick ‘Save as file’ checkbox. Click ‘Go’.

Step 1b (click to enlarge)

Step 1c (click to enlarge)

File save dialog will appear. Click OK and save that SQL file on your computer. Step 1 completed. Get yourself a coffee.

Step 1d (click to enlarge)

Step 2 – Search & Replace

Now, we have to change your database export file and find & replace all URLs that contain http://localhost/yoursite with http://www.yoursite.com

I’m using Dreamweaver but you can use any text editor to do the same.

Step 2a (click to enlarge)

We have to change another line as well. Find line C:\\Program Files\\xampp\\htdocs\\yoursite/wp-content/uploads and strip it down to /wp-content/uploads and finally save your SQL file.

Step 2b (click to enlarge)

Step 3 – Import Information Into Destination Server Database

On your destination server you have to create database for your WP installation. It may look like this screen below (assuming you’ll be using phpMyAdmin) However in most cases you’ll have to log onto your server administration panel and create database, user and password from there. It varies from provider to provider so please refer to your hosting provider help section.

Step 3a (click to enlarge)

Now as you have your database created you should populate it with your data. Click on the Import tab at the top of the page. Click on Browse in the ‘File to import’ section and select your amended SQL file. Click Go to proceed.

Step 3b (click to enlarge)

If everything went well you should see table names on the left hand side and a message saying something similar to this: ‘Import has been successfully finished, 162 queries executed.’ You’re done and deserve another coffee.

Step 3c (click to enlarge)

Step 4 – Upload Wordpress Files

In this step you should use your favourite FTP client to upload all files to your destination server. If you created a brand new website than you can upload everything including index.php file. If you upgrading an existing website then you have to make sure that it will work until you launch your WP website. DON’T DELETE ANY FILES that belongs to your existing website. Make sure your Wordpress website works first, then you’re safe to delete the old files.

To make your website work you should update wp-config.php file with your database details: database name, database server address, database user and password. Once done, you should be able to see your new website at http://www.yoursite.com/

Now, you have to test if you can login to the administration panel. So type in http://www.yoursite.com/wp-admin/ to find out. If you can see WP admin login screen you’re half way there. Type in your login details and login. If you’re successfull you should see WP Dashboard.

That’s it. You’re done.

Step 5 – Fine Tuning your Wordpress website

Few other thing you should take care of:

• Make sure that you can upload any new images or documents. If you can’t it means that you have to change files/folders permissions and give Wordpress read/write right for necessary folders.
• Check if your permalink structure works. Amend if necessary.
• Make sure you’re running the latest version of Wordpress and upgrade automatically to the newest one where possible.
• Check if you have installed latest versions of any plugins that you’re using. Be careful though! Some plugins require PHP5 to work properly or require additional libraries to be enabled. Check this prior to any upgrades.

I was redesigning Unified Communications website and my goal was to make it similar to CDSoft website. CDsoft’s website is based on Wordpress engine but it is using templates extensivelly to make Flash Tab Menu work properly (I know, it could be done better). Anyway, I didn’t want to create another flash menu for the UC website and wanted to make it look consistent at the same time.

UC website is based on Wordpress but it has less content and it’s focused only on one solution CDSoft provides, the Unified Communications from Microsoft.

Let’s start then. First, I’ve placed my main menu into header.php and this is how it looks:

<div id="main-nav">
<ul>
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
</div>

So, let’s have a look on how generated HTML code looks like:

<div id="main-nav">
<ul>
<li class="page_item page-item-6"><a href="http://localhost/unified/index.php/about-uc/" title="About UC">About UC</a></li>
[...]
</ul>
</div>

I need my menu items to be highlighted on HOVER and to be highlighted same way when a section is selected. This highlight is that subtle gradient. Also I want each menu item to have a different icon. I decided that highlight will be done through a:HOVER and icons will be done through a span. So I need to have <span></span> added around menu name. With Wordpress you can do it easily by using wp_list_pages() options. Here’s how it looks now.

<div id="main-nav">
<ul>
<?php wp_list_pages('title_li=&link_before=<span>&link_after=</span>&depth=1'); ?>
</ul>
</div>

OK, so by default, without any styling our menu looks like this:

Menu without styling

So, we need to add some styling now and here it goes:

#main-nav {
width: 920px;
height: 161px;
margin: 0 20px;
overflow: hidden;
background: url("img/bgnd-main-nav.gif") bottom repeat-x;
}
#main-nav ul {
margin: 0 0 0 26px;
}
#main-nav ul li {
list-style: none;
display: inline;
}
#main-nav ul li a {
display: block;
float: left;
width: 120px;
height: 128px;
margin: 0 2px;
color: #333;
text-decoration: none;
}
#main-nav ul li a:HOVER {
background: url("img/bgnd-menu-item-hover.gif") repeat-x;
}
#main-nav ul li.current_page_item a,
#main-nav ul li.current_page_parent a {
background: url("img/bgnd-menu-item.gif") repeat-x;
}

This styling produces menu that looks like this:

Now, I have to style that <span> element and add classes for icons. Complete CSS code looks like this:

#main-nav {
width: 920px;
height: 161px;
margin: 0 20px;
overflow: hidden;
background: url("img/bgnd-main-nav.gif") bottom repeat-x;
}
#main-nav ul {
margin: 0 0 0 26px;
}
#main-nav ul li {
list-style: none;
display: inline;
}
#main-nav ul li a {
display: block;
float: left;
width: 120px;
height: 128px;
margin: 0 2px;
color: #333;
text-decoration: none;
}
#main-nav ul li a:HOVER {
background: url("img/bgnd-menu-item-hover.gif") repeat-x;
}
#main-nav ul li.current_page_item a,
#main-nav ul li.current_page_parent a {
background: url("img/bgnd-menu-item.gif") repeat-x;
}
#main-nav ul li a span {
width: 120px;
height: 18px;
overflow: hidden;
padding: 110px 0 0 0;
display: block;
}
#main-nav .about-uc {
background: url("img/menu/microsoft-uc.png") top center no-repeat;
}
#main-nav .products {
background: url("img/menu/round-table.png") top center no-repeat;
}
#main-nav .accessories {
background: url("img/menu/plantronics.png") top center no-repeat;
}
#main-nav .ip-phones {
background: url("img/menu/uc-phone.png") top center no-repeat;
}
#main-nav .faq {
background: url("img/menu/faq.png") top center no-repeat;
}
#main-nav .blog {
background: url("img/menu/blog.png") top center no-repeat;
}
#main-nav .about-cdsoft {
background: url("img/menu/about-cdsoft.png") top center no-repeat;
}

Menu with added <span> styling looks like this (note that no icons are displayed yet):

Styling of <span> element moved the page title to the bottom leaving space for menu icons. Now it’s time to add these colorful icons to the menu. We’ll use simple jQuery function that can be placed in header.php file. Here’s the code:

<script type="text/javascript">
$(document).ready(function() {
equalHeight($(".column"));

var menus = new Array("about-uc", "products", "accessories", "ip-phones", "faq", "blog", "about-cdsoft");
for (j=0; j < menus.length; j++){
//$("#main-nav li:eq("+j+") a span").addClass(menus[j]);
}
});
</script>

And this is how our menu looks like now:

Visit Unified Communications website for more detailed look on how this works.

Enjoy!