If you work on a test site for your new wordpress website there comes a point when you need to make the site live and move from the test folder and into the root. There are a few steps to follow but it’s straightforward and the only time consuimng part is waiting for the many wordpress files to upload.

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!

I decided to place some excerpts on my home page, this helps give users an insight to the blog before clicking through, it’s something that gives a reader more choice which can’t be a bad thing.

To do this you need to insert the following code into your function.php file, there is a part of the code where you can design your own arrow or more link button:

add_filter('excerpt_length', 'my_excerpt_length');
function my_excerpt_length($length) {

return 35; }
//function to replace invalid ellipsis with text
function elpie_excerpt($text)
{

return str_replace('[...]', '<a href="'.get_permalink().'"><img src="yourpathhere/readmore.jpg" alt="" /></a>', $text);
}
add_filter('the_excerpt', 'elpie_excerpt');

Now all you need to do is edit your page template to include the following code, you can wrap with a css style to colour the fonts, rollovers etc:

<ul id="recent-items">
<ul>
<?php
$recentPosts = new WP_Query();
$recentPosts->query('showposts=2');
?>
<?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a><br /><?php the_excerpt(); ?></li>
<?php endwhile; ?>
</ul>
</ul>

The best slideshow that I have found for wordpress is the nextgen gallery, the main plus point is that it can be controlled via the admin area, making it easy for clients to upload images to specific pages, it can be fully customised, with options for multiple slides, captions and transitions.

It uses the the JW image Rotator which costs around £35.00 for a licensed version.

Wordpress is great when used as a cms, one thing many forget to apply is styling to the comments pages, comments can be fully configured and styled to tie in with the overall look and feel of a new site, using graphics and css styling can also enhance the usability of the comment feature, to style the comments on my site i used the following code:

The php code

This was added to the comments.php file:

<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>

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.

.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;
}