I used my holiday time to convert one of my own static sites. I wanted to use it as a case study in procedure and time. The site I converted was my Scripts and Database site, CyberCoded.com. This is one of my older sites and I have been too busy to convert it so I continued to manually add pages as needed.

I have about 10 hours invested in the whole process to convert this site. The bulk of the time is in the custom coding of a WordPress Theme from scratch to match an older site. There were 12 pages when I started and as some of the pages had different extensions I decided to convert the site using my favorite WordPress permalink structure and then redirect the old pages.

I used my Blank WordPress Theme so that I could start with a clean slate and match the design to the old site.

Here are the steps I took.

1. Installed WordPress in a Sub Folder
   • Set Privacy setting to OFF while I developed the site in a sub folder.
   • Modified the permalink to my favorite which is /%postname%/
2. Installed the Blank theme in the WordPress Themes folder.
   • I used FTP to upload the files into a new theme folder in WordPress.
3. Copied and matched elements from the old Style.css file into the WordPress Style.css
   • The blank theme has an empty CSS file.
   • The Body and Links were the only elements called out in the old CSS file.
   • Added Wrapper, Content, Header and Footer Divs to CSS.
4. Copied the Index.php file to home.php so I could have a custom Home page that would match the old page.
   • Simply copying the file like this makes a new home page with the home.php file.
5. Modified the WordPress code in the Home page to show each category and posts as lists.
   • Stripped out the common WordPress Loop
   • Created new code that loops through the categories and list each post per category.
   • Set the Category to sort in Descending order.
   • Set the Post titles to sort Title in ascending order
6. Created an Analytics.php file in the WordPress Theme to use throughout the site.
   • Retrieved the code from Google to use for analytics.php
7. Created a Header.php file within the WordPress Theme to add common header elements.
   • Modified the Title so that it would be SEO friendly, very similar to most popular SEO plugins.
   • Added a call to analytics.php file
8. Created a footer.php file in WordPress to add a common footer.
   • Used the code from the old static footer file for contact and info.
9. Created Single.php page
   • Added a Tweet This button from Twitter.
10. Created my Categories to match old site.
    • The old site had headers for each item type which I converted to Categories.
11. Copied each page from the old site into Textpad and removed any code that would interfere with WordPress.
12. Pasted each page into WordPress as a Post.
13. Created Tag Page.
    • Tag page list the excerpt for each Post that is tagged.
14. Created custom 404 page.
    • The 404 page shows a tag cloud to visitors.
15. Created Search page.
    • Search page only shows title for a matched post.
16. Widgetized and added a sidebar.
    • Create and set widgets in the functions.php file.
    • Add sidebar.php and corresponding code to use widgets.
    • Added a Facebook Like button.
    • Added RSS Button and link.
17. Copied the index.php from the WordPress sub folder to the root and modified the code to use WordPress from the Sub Folder.
18. Changed the Site Address within WordPress Admin to set the site in the root while leaving WordPress installed in the sub folder.
19. Redirected the old pages to the new WordPress pages using PHP header calls.
20. Installed and setup XML Sitemap Generator for WordPress Plugin

ALL DONE !

I copied the old Index file so we can see a before and after look.

Original Page versus New WordPress Site.

Most of the time was in the Theme setup. Each page took about 5 minutes to convert the content to a WordPress Post.

12 Pages, 10 hours

Think I will send my wife a bill and see if it gets paid, lol…

  Tweet

After almost 2 years of answering questions on that post I thought it was time to discuss the issue again.

I have done a dozen or so conversions since that post and I have found that some sites really need to take a fresh start approach to get the best result. The main reason for this is that a lot of older HTML sites are built with outdated techniques and WordPress has made some great advancements.

On these sites I create a sub folder for the WordPress install, such as /wordpress. This gives us designated area to work and learn WordPress without interferring with the original design. The hardest task may be getting a theme to match your original design, but I would suggest taking this time to update your original design. There are so many good WordPress Themes this should not be a problem. Once your theme is in place you can copy and paste your orginal content to the new install matching the page names. Depending on your original file extensions you may need to set the permalinks in WordPress.

Once this development is complete it is easy to change the Site address (URL) in WordPress to show the new site in the root. (Make sure to backup the original first!) Here is the link from the WordPress Admin panel that explains this.

If you need to learn WordPress and want to take a little time without being pressured to get the new site in place this is the best option I have found.

Yes, I do conversions for others. If you would like a quote, simply send me a link to your site and contact information using my Contact Form.

  Tweet

WordPress can be used in so many ways. Whether you need a standard blog platform or an easy way to do an old fashioned website, WordPress can deliver. Between the wealth of WordPress Themes, Plugins and Widgets available you can mix and match the tools to quickly create a website or blog. It is also a great way to Park a domain while you are developing the site, you can setup a home page, with enough information to get indexed in the search engines so that when the site goes live it is already indexed for the main topic.

And to clarify, I am talking about self hosted WordPress, not hosting on WordPress.com. Using WordPress.com to host a blog is certainly an easy way to get started. Personally I just can not see giving away an opportunity to build your own site and credibility in the search engines and social networks. Yes, that means there is a cost, but the cost is so low these days, if you are gonna step out and create something, make it yours.

Here a few links to tutorials and information on How To Use WordPress.

WordPress Tutorial – How to Install and Manage WordPress http://bit.ly/6qPO58 – Source http://www.siteground.com

Getting Started with WordPress « WordPress Codex http://bit.ly/5EZhRR – Source http://codex.wordpress.org

How to use WordPress as a Truly Customized CMS http://bit.ly/81U26Y – Source http://www.idesignstudios.com

Convert Static HTML Site to WordPress Easily http://bit.ly/8RKj34 – Source http://www.cybercoded.net

  Tweet

The one thing you need before you start is a copy of WordPress 2.7+ so you can copy some code. Just a little side tip here. Even though most of my sites and clients have one button install of WordPress, I keep a copy of each version that is released on a thumb drive with my other web stuff so I always have it handy. I also sync that thumb drive up to a hard drive in my office for backup!

Here are the steps to take to convert your comments to threaded comments as they appear here on my site.

• Copy \wp-content\themes\default\comments.php from WordPress 2.7+
• Copy \wp-content\themes\default\comments-popup.php from WordPress 2.7+
• Copy code from \wp-content\themes\default\header.php, and place in your header file.  <?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>
• Copy the Updated styling code from this great article by Chris Harrison

Turn off  ”says” :

That’s it, about a 5 minute process to convert to WP Threaded Comments on a WordPress blog. Pretty painless too. Big thanks to Chris Harrison for his excellent post on styling Threaded comments!

  Tweet

There is a very simple way to handle this issue.

Yes, there are plugins available that handle all kinds of issues with ads, however, I just wanted an easy way of dealing with it, so here is what I came up with.

Two lines of code and using Custom Fields does the trick,

First I wrap my ads on the single page with this code.

<?php
if (get_post_meta($post->ID, ‘ads’, true)) {
?>

AD CODE HERE

<?php
}
?>

This will cause ads to only show when there is a custom field named “ads” with a value of anything but 0. And once you have inserted the custom field you never have to add it again, just apply a value, and since this is a simple boolean expression, any value except 0 will cause the ads to display.

Examples:

No Ad : Weekly CyberCoder Tweets for 2008-11-30

With Ad : Online Residual Income

You could go the other way and have the default show the ad, or include a couple statements to change the ad location, color or anything else you could think of. This is just a simple solution for a specific need and I hope it helps someone.

If you want more options using basically the same technique I would highly recommend this tutorial, How To Automatically Disable Ads On Selected Posts In WordPress.

  Tweet

The first theme is just an Empty WordPress Theme. This may seem a little silly, but you would be surprised at how many people want this to learn from.

The second theme is a Minimal WordPress Theme that may not be the most beautiful theme you can find, but it is very functional and does very well on Niche sites where the primary focus is driving traffic from search engines and converting that traffic into income.

  Tweet

To catch this bug before it causes an unexpected problem you should check each plugin immediately after running an upgrade. Simply click the Edit button next to Deactivate, scroll to the very bottom of the file and make sure there is no whitespace at the end of the file. If there is whitespace, simply delete it, and save the plugin. See example images

If you do not check your plugins this bug can become a real pain. The main reason is that once it occurs you have no idea if it is in the WordPress PHP, Plugins or Theme files.

Reference Link : Search › xml parsing error

  Tweet

This post is being accomplished using the Post via Email options in WordPress 2.51

I am toying with lots of ideas where this could be very beneficial and I
plan on writing up a detailed post on how to set this up easily on a
Wordpress blog.

  Tweet

The first upgrade was to a very small blog with only 2 plugins, the second was to a larger blog that had several plugins installed. Both upgrades went smooth as silk.

The WordPress 2.5 dashboard and layout are totally different from anything WordPress has released before and it will take some getting used to. I did use the upgrade automatically option on a couple of the plugins and everything worked as expected.

One new feature I really like is the Tag management. As an example I had a tag that should have had a word capitalized that was not. I was able to modify the tag display with a couple clicks and then verify that it was corrected in my tag cloud.

So far WordPress 2.5 looks great and I will follow up with more data as I upgrade the rest of my blogs.

  Tweet

Based on the WordPress Template Hierarchy it is very easy to create an individual page for a tag. If you look at a Tag Cloud on a site you will notice that there are always tags that get mentioned more than others. These tags should represent the most popular topics for a site and taking advantage of the WordPress Tag Template can result in a focused marketing campaign for these given tags.

The WordPress Tag Template flows like this :

1. tag-slug.php
2. tag.php
3. archive.php
4. index.php

The first template is the key here. If you have a tag you would like to create a custom page for you can copy your tag.php to a new file named tag-slug.php and then modify that page to fit that tag.

Here is an example:

On MusicRamble.com we focus on Classic Rock music. The general tag page lists excerpts from articles for the given tag. Examples of the basic tag pages are George Harrison and Steve Winwood. If you compare those two pages you will notice they are basically the same design.

Now look at Eric Clapton. Notice the sidebars, they have been customized specifically for Eric Clapton. The left sidebar is loaded with products related specifically to Clapton. This has resulted in an increase of Amazon sales for Eric Clapton.

Here is how it was accomplished.

1. Copied the tag.php to tag-eric-clapton.php
2. Removed the call to the sidebars, get_sidebar()
3. Copied the contents of the sidebar.php file
4. Placed the copied code where the previous call to get_sidebars() was.
5. Moved all items in left sidebar to right sidebar
6. Placed the product links in the left sidebar.

The resulting custom tag page shows up in the file list on the WordPress -> Presentation -> Theme Editor menu so it is easy to work on. At any point if we decided not to use this page, all we have to do is delete it and the default tag.php will once again be used for this tag.

Are you getting the most out the WordPress Tag Template?

  Tweet