Tag Archives: Wordpress Themes

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…

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!

Fix A WordPress Blog With One Click

Just as a foundation on a house is important to the rest of the structure and the longevity of the building, so is the foundation of a Blog. 

WordPress is a great foundation, however, sometimes we get that foundation messed up. If you have a WordPress Blog that is under performing, try this, set the WordPress Theme back to the Default. 

If your content is good, will readers quit reading something because it is not as pretty?

What about the search engines?

Maybe they are losing their way through all those little enhancements?

Or, try any other Minimal WordPress Theme, sometimes simple is just better.

CyberCoder WordPress Themes

I finally got around to getting these WordPress Themes cleaned up, organized and uploaded.

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.

Minimal WordPress Theme Download

The Minimal WordPress Theme can now be downloaded from here.

This is the theme I am running on this site.

I added a YouTube video hook on the Single post page. Instead of using a WordPress Plugin that would be an additional step I took my AJAX API Video plugin and incorporated it into the Functions file. Thanks to Chris Pearson for the inspiration for this idea.

By using the function file there is no need to have an additional Plugin to install. Whenever you write a post the single post page will automatically search YouTube for videos that match the title and put them in a horizontal bar under the post. These videos will play dynamically on the given page utilizing the Google AJAX VideoBar.

The Minimal WordPress Theme is excellent on Niche sites that focus on Search engine traffic. CelebrityRamble is one site that is already using the theme.

Make sure to change the Adsense to your account, and you can move the YouTube videos by relocating the ajaxapivideos() call

EDIT : This theme is also Widget Ready.