Tag Archives: Wordpress How To

Static HTML to WordPress Conversion Case Study

Converting older static html sites to WordPress is one of the most popular things for me to work on. Seems there are still a lot of older sites that have no CMS system and when people decide to finally convert these sites WordPress is one of the most popular options.

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

Convert HTML to WordPress

This is the second post I have written on this topic, the first post was Convert Static HTML Site to WordPress Easily. In that first post I covered a very simple way to convert a static HTML site to WordPress.

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 /wp. This gives us designated area to work and learn WordPress without interfering 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 original 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.

 

 

 

How To Use WordPress

This is one of my favorite questions people ask. The answer is pretty much infinite.

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

WordPress Threaded Comments

I have been needing to change my comments to Threaded Comments for some time. I finally took the time to do this, and thought I would share these simple steps to accomplish Threaded Comments using the latest standard WordPress system without any plugins.

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
I modified 2 lines of code in the stlyesheet once I copied it over from Chris Harrisons’ Example. I did not like the word “says” showing up, so I turned it off, and I changed the meta link to the comment to match the rest of the site.

Turn off  “says” :

  • From : ol.commentlist li div.vcard span.says {}
  • To: ol.commentlist li div.vcard span.says {display:none;}
Change Meta link color:
  • From: ol.commentlist li div.comment-meta a { color:#ccc; }
  • To: ol.commentlist li div.comment-meta a { color:#003366; }

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!

Convert Static HTML Site to WordPress Easily

NOTE: This post was originally posted in January of 2009 and was intended to help small HTML sites (5 to 10 pages) convert to WordPress. A lot has changed since then, and if you are trying to convert a larger site I highly recommend taking a little deeper approach. I have written another post (Convert HTML to WordPress) on the subject in 2010 that might help larger sites make the transition to WordPress.  

 


Working with someone recently made it apparent the process to move a static site to WordPress has been made a lot harder than it needs to be. Here is the easiest way to convert a static website to a WordPress blog. You will not have to do any redirects or modify any files other than in the WordPress admin area.

Let’s assume we have 3 static pages, Index.html, about.html and products.html and we want to move to WordPress.

  • Install WordPress in the root of this domain.
  • Immediately copy the Index.html to the WP Theme (whichever theme you are using) folder, and rename it Home.php

At this point, your site will look to the world just like it always did. WordPress will automatically use the home.php page as the default, and now you can go about putting it all together. You should have no broken links or any worries about redirects.

  • Leave the permalinks with their default settings. This keeps you from having problems with existing pages.
  • Copy the contents from About.html and create a page called About
  • Copy the contents of your other files and make pages with the exact same names. If your page names are different than the titles, you can edit the permalink to match the filename (without the html extension).
  • Once the data is copied and you have the look you want, change the permalink to /%postname%.html
  • For PAGES (Not POST) to use the HTML extension you need a plugin as WordPress only applies the Permalink structure to the posts. Recommended HTML Extension Plugin -> WordPress Hero
  • Install this Plugin first for the pages.
  • Remove the old static pages, I suggest keeping them just in case you have a problem, but you need to move them out of the root.
  • Copy the index.html contents to the file you want to be your home page, and delete the Home.php file. Typically this is the index.php in the theme, however you may want to use a static page depending on the site setup. You can change this is the WP Settings.

At this point, your conversion is done.

Example:

All I have to do is change the permalink and remove the old files and I am done.

There, no need to mess with your .htacess file, and no need to worry about redirects, let the system handle it for you.

And yes, I have done several sites like this.

I also use the Home.php method to park a page if I need time to work on it before going live.