Seattle Web Design 
WordPress Theme #1
WordPress Custom Theme
If you have static website and you need to convert it to the WordPress custom theme, you are on the right track. In this tutorial I teach you how to make your dream come true. To do so, you need to have web programming knowledge. Especially HTML and CSS. You need to have a text editor and WordPress template tag cheat sheet. The best source for all your answers is codex.wordpress.org.
Starting point
Backup all your content and images on your old static website. The worst case of scenario you should be able to recover your old website. Also, you need content for your new dynamic WordPress website. You can copy/paste all your text to a text editor like Microsoft Word. Keep them some where safe and go to the next stage.
Install WordPress CMS:
You need to install a fresh copy of WordPress on your web server and create database. If you purchased your web hosting from Dreamhost, you can go to the Dreamhost control panel and click on One-Click install. Then choose WordPress. Everything will be done automatically.
Purchase your web hosting from here > Dreamhost
Enter content, Make pages, Make some posts, comments, and customize permalink. Do not forget to categorize your posts by editing and adding categories to your website.
Dashboard > Posts > Categories > Add new category
How to customize permalink?
Go to WordPress dashboard > Settings > Permalinks > Choose “Custom Structure” and paste this code into the box and save changes
/%year%/%postname%
To start your conversion you need to download a sample very simple theme to convert your HTML theme to the WordPress theme.
> Download Tabular Rasa
Unzip this package and rename it with your favorite theme name. It is usually is called your domain name. Then upload it to your WordPress themes location.
Domain name > wp-content > themes > your package
Now you have your package on your desktop, a copy of it on your WordPress, and a folder to convert to WP on your desktop (Three folders, one on Server and two on your desktop). To make it simple I would call these packages:
- Your HTML website folder > HTML template
- Your renamed Tabula Rasa > Desktop WP Website
- Your renamed Tabula Rasa on Server > WP Website
Primary Actions:
Your HTML website should have global styling specially for h1, h2, h3, h4, h5, images, margins, paddings, and links and hovers. Fallow this structure:
a:link, a:visited {
color: #blue;
}
a:hover,a:focus {
color: #red;
}
Create Your Theme Thumbnail
This helps you to choose your theme thumbnail in the dashboard themes area. To create your thumbnail take a screenshot of your HTML website and resize it to 300 x 250 Pixels. Save your file as “screenshot.jpg” and replace this file with the old one in Desktop WP Theme. upload it to the WP website on the server. You need to replace it with the old one. Now open style.css in Desktop WP website and Add and Edit this comment to the top.
/*
Theme Name: Your Theme Name 2014
Description: This is ..
Version: 1.0
Author: Your Name
Author URI: http://YourDomain.com/
*/
Create Your Favicon
There are many online tools which you can use them to create your "favicon.ico". All you should do is creating a favicon for your website and replace it with the old favicon.ico on the desktop WP website. Then you need to upload it to the appropriate location (theme folder) to your server. Replace it with the old one.
Some Favicon Online Generators:
- http://www.favicon.cc
- http://favicon-generator.org
- http://tools.dynamicdrive.com/favicon
Now check your themes in your WP dashboard and activate your theme. Yey.. Your theme is officially there. Now it is time to convert this Simple WordPress theme and put your website’s CSS and Codes to it.
If you are done with all above stages and can see the simple theme, you are ready for next step. Check Part two of this tutorial.