1. Firstly take a backup of your test site folder. If something happens at least you can restore everythign back to the original state and try again.

2. Copy all the files of /blog folder into the main root of your site. Make sure you copy the .htaccess file too. Make sure you remove and index.html folders or index.php and any image folders that do not need to be there.

3. Open your wp-config.php file of the files you just moved over to the root folder and the line below, it needs to be added towards the base of the page and will be the last define statement:

define(‘RELOCATE’,true);

when you have done that save the file and upload to the root

4. Now open your browser and open the page http://www.yourdomain.com/wp-login.php and enter your admin login details.

5. In your admin area go to the General Settings and make sure in WordPress address (URL) field, you have http://www.yourdomain.com and remove the url placed in the Blog address field. Make sure there is no trailing “/” in either of the fields.

6. Check your .htaccess file in the root directory and make the content like this:

# BEGIN WordPress

<IfModule mod_rewrite.c>
RewriteEngine On

RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.php [L]

</IfModule>

# END WordPress

Once this has been done you are now ready to test, you may notice that some images placed in your pages have been broken, all you need to do is click on each and point them to your new folder, you will be able to do this within the media library. Or alternatively you can leave your wp-content folder/uploads intact within your subfolder and remove all other files.

Any new images you place in your site will be uploaded to the root upload folder.

7. Finally again open wp-config.php and remove

define(‘RELOCATE’,true);

save the file and upload.

all done!

The php code

This was added to the comments.php file:

{code type=php}<ol>
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id=”comment-<?php comment_ID() ?>”>
<cite>
<?php if(function_exists(‘get_avatar’)) { echo get_avatar($comment, ’35′); } ?>
<span><?php comment_author_link() ?></span><br /><span><?php comment_time() ?></span> on <a href=”#comment-<?php comment_ID() ?>” title=”"><?php comment_date(‘F jS, Y’) ?></a> <?php edit_comment_link(‘edit’,'&nbsp;&nbsp;’,”); ?>
</cite>
<div><?php comment_text() ?></div>
<?php if ($comment->comment_approved == ’0′) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? ‘class=”alt” ‘ : ”;
?>
<?php endforeach; /* end for each comment */ ?>
</ol>

{/code}

Stylesheet

All you need to do is add this to your stylesheet, and create a background image for the comment list ul, the comments are also gravatar enabled.

{code type=css}
.commenttext{
padding: 10px 0px 0px 0px;
line-height: 18px;
}

.commentsheading {
padding: 3px 5px 3px 0px;
margin: 0px 0px 8px 0px;
text-decoration: none;
}

.alt {
margin: 0;
padding: 10px;
}

.commentlist {
padding: 0;
text-align: justify;
}

.commentlist li {
background: #f3efec url(‘images/comment_background.jpg’) repeat-x left top;
margin: 15px 0 10px;
padding: 15px 15px 10px 15px;
list-style: none;

}
.commentlist li ul li {
margin-right: -5px;
margin-left: 10px;
}

.commentlist p {
margin: 10px 5px 10px 0px;
}
.children { padding: 0; }

#commentform p {
margin: 5px 0;
}

.nocomments {
text-align: center;
margin: 0;
padding: 0;
}

.commentmetadata {
margin: 0;
display: block;
}

.commentlist li, #commentform input, #commentform textarea {
font: 0.9em Helvetica, Arial, sans-serif;
}
.commentlist li ul li {
font-size: 12px;
}

.commentlist li {
font-weight: bold;
}

.commentlist li .avatar {
float: left;
padding: 0px 10px 0px 0px;
}

.commentlist cite, .commentlist cite a {
font-weight: bold;
font-style: normal;
font-size: 12px;
}

.commentlist p {
font-weight: normal;
line-height: 18px;
text-transform: none;
}

#commentform p {
font-family: Helvetica, Arial, sans-serif;
}

.commentmetadata {
font-weight: normal;
}

#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}

#commentform {
margin: 5px 10px 0 0;
}
#commentform textarea {
width: 100%;
padding: 0px;
}
#respond:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#commentform #submit {
margin: 0 0 5px auto;
float: left;
}

{/code}