I recently found this quick and easy tutorial on installing XAMPP Lite locally on Windows XP. This provides a great environment for testing and developing Wordpress websites from your PC. The next logical step is converting this nice local installation into a live site as quickly and easily as possible. I found some excellent instructions from The Tamba2 Wordpress Guides. These guides contain almost all the information used in this tutorial. I really just combined a bunch of the provided information to accomplish this specific task. I put all the instructions together here in a quick, and (hopefully) easy to follow tutorial. Let’s get started.

Export Your Database

First, we need to export your local XAMPP MySQL database. While XAMPP is running, navigate to http://localhost/phpMyAdmin/. Next, click on the database name you want to export in the menu on the left. Your database tables should be displayed and you should see some tabs running across the top. Click the export tab at the top.

Make sure you check the “save as file” box and then click the go button in the lower right. This will create an .sql file for us to import later. Remember where it is saved.

The Import

Log on to your hosting account or your webserver and create a new MySQL database for Wordpress, call it whatever you want.

Once you have created your new database, find PHPMyAdmin, and open it.

Click the name of the database you just created from the dropdown menu.

At the top of the screen it should say “Server: your_server(probably localhost) Database: your_database_name”

Click the Import Tab.

Now click the Browse Button and browse to the location where you saved your *.sql file in the first part of the tutorial.

Click Go at the bottom.

You should get a message at the top stating: “Import has been successfully finished, XXX queries executed.”

Important: If you are importing an extremely large database, over 5MB, you may suffer from a timeout and failed import. If this is the case you need to manually upload your data in parts. See Podz detailed instructions for restoring if you are having this problem

A couple quick changes

Now we need to make a couple quick changes to the database. Click on the Structure tab at the top and then click the little picture in the wp-options row as seen below.

You should now see a list with a column showing all of the option_name values: siteurl, blogname, blogdescription, etc. You need to change two of them. The first is the very first option, siteurl. Click the little pen button on the left side of the siteurl table row. It is directly to the left of the big red X. You should now see something similar to this:

Type your new blog URL in the big text box. Important: Make sure you do not add a forward slash / at the end of the URL.

Click Go.

Your siteurl row should now display your new blog URL instead of localhost or whatever IP address it was showing before.

Now you must repeat this same exact operation on a different option row with the option_name of home. You may have to use the pagination to view the second page of option rows to find it. It is option_id #39 on a normal Wordpress install.

Your new database is now ready to go, exit PHPMyAdmin.

Edit, Upload, and Go!

Browse to your local Wordpress installation.

Open up your wp-config.php file and input the MySQL details (username, password, etc.) of the new database you created in the previous step.

Save and close wp-config.php.

Upload the ENTIRE contents of your local Wordpress folder to the new location on your webserver. This new location should must be the same one you used in the first part of this tutorial when changing the siteurl and home values in phpMyAdmin. This is important. If the locations are different, it will not work.

Your done, navigate to your new “live” Wordpress powered website and enjoy.

Note: If you want to continue using your local installation you can keep your updated wp_config.php file and add the following lines of code to your local version of the file(this will override the two option values we changed earlier in phpMyAdmin):

//*Set Path
define('WP_HOME', 'http://localhost' );
define('WP_SITEURL', 'http://localhost');

When I first decided to convert a static XHTML/CSS design to Wordpress I did some searching for a tutorial to help me get started with the basics. Surprisingly, I didn’t find anything that was very complete or easy to follow. For that reason I decided to write a very basic tutorial on how to convert a static XHTML/CSS template into a Wordpress theme. If you are an absolute beginner at developing Wordpress themes than this should help you get started. This tutorial assumes you already have a basic understanding of XHTML and CSS. It also assumes you have already built a website in XHTML and CSS and have it ready for conversion.

How Wordpress Works

Wordpress works in a rather straightforward manner but it may seem confusing if you are completely new to the concept. Wordpress relies on PHP to call on different parts of your content from the database management system it stands on. For example, look in your /wp-content/themes/classic/ directory and open the header.php file. As you scroll through the code notice the PHP calls, they start with a <? and end with a ?>. Look at line 11 and you will see the call for your stylesheet:

<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?>);
</style>


This line uses PHP to look-up your stylesheet’s location from the database. This basic function of retrieving or calling some kind of data from your database and using PHP to display it in your XHTML is how Wordpress works. Throughout this process you will be substituting PHP for different parts of your content and your code. This will make editing easier in the long run, as you will find out. Now that you understand the basics of how Wordpress works, lets get started.

First Things First

The first thing to do is create a new folder and name it whatever you want your theme to be called. Next, create two new files, style.css and index.php and place them in the folder. Believe it or not, these are the only two files you actually need for a Wordpress theme. Now copy and paste the code from your original CSS file into the style.css file you just created. At the top add the following code:

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

These comments simply help Wordpress properly identify the theme. Your stylesheet is now ready to go.

Chop It Up

Now let’s start chopping up your XHTML. Remember how we talked about Wordpress using PHP to call data from your database? Well Wordpress can also use PHP to call different files from within your template folder. Imagine your current XHTML code chopped up into 4 (or more) different sections. For example, take a look at the layout and corresponding XHTML of this page. The header comes first, followed by the content, then the sidebar, and finally the footer. Instead of keeping these 4 parts of the XHTML together in one file, you are going to put each of them in their own separate file. Then call on them one by one using PHP.

So go ahead and sort through your XHTML code and put some markers in the 4 places where you plan on cutting the code into 4 separate sections.

Note: These next steps assume you have your page set up in the same order as this page: header, content, sidebar, footer. If your page is ordered differently you will have to switch a couple of these steps around, but I am sure you can figure that out.

Now create 3 new files (header.php, sidebar.php, footer.php) and place them in your theme directory. Next take a look at the header.php file from the classic theme we looked at earlier. Notice all the PHP that is used in between the <head> tags. You will want to keep most of this code, so just copy the whole <head> section into your new header.php file. Now open up your original XHTML file and copy the code you marked off for your header (1st section) into your new header.php file (underneath the <head> section). Save and close.

Now open up your new index.php file. Copy the second part of your original XHTML code, the content (2nd section) into your new index.php file. Save and close.

Getting the hang of it?

Next open up your new sidebar.php file, copy the sidebar (3rd section) of your original code into the sidebar.php file. Finally, copy the original footer (4th section) of code into your new footer.php file.

Put It Back Together

Your original code should now be chopped up into 4 different files (header.php, index.php, sidebar.php, footer.php). Let’s put it back together using a few lines of PHP. Open up your index.php file, it should contain the XHTML from the content (2nd section) of your original code. Add this line at the very top of the file:

<?php get_header(); ?>

Now go to the absolute bottom of your index.php file and add these two lines:

<?php get_sidebar(); ?>
<?php get_footer(); ?>

These 3 simple lines of PHP are telling Wordpress to fetch and display your header.php, sidebar.php, and footer.php files within your index.php file. Your code is officially put back together. Now if you want to edit your sidebar you can just edit your sidebar.php file, instead of sorting through your index.php to find it. The same goes for your header.php and your footer.php.

The Loop

Your index.php is almost finished. The final step is to insert the actual content into the code. Luckily, Wordpress uses PHP for this as well. The Loop is the PHP function Wordpress uses to call and display your posts from the database they are saved in. Look in your /wp-content/themes/classic/ directory and open the file index.php file. Copy everything in between <?php get_header(); ?> and <?php get_footer(); ?> to your clipboard. Now paste it into your new theme’s index.php file inside of whichever div you are using to hold your content. You just inserted a basic version of the loop into your code. Wordpress will use the loop to display your posts and comments on your website.

The End

Now upload your theme folder to /wp-content/themes/. Then log into Wordpress and activate your theme. Wasn’t that easy?

This tutorial covered the basics for converting your theme to Wordpress. To further customize and enhance your theme start looking at the Wordpress Codex, specifically Template Tags and Template Files. You can use template tags in your sidebar, in your header, or your footer to call menus, categories, posts, etc. As you learn more about template tags and template files you will discover the endless possiblities for customizing your new Wordpress blog.