How To Convert An Existing Site To WordPress

I will attempt to explain how to convert an existing site into WordPress. I wrote previously about converting a client’s site from old school tables to a CSS based WordPress theme at http://www.flowerart.biz. I think this should work for Frontpage based sites as well as DreamWeaver or any other site that is reasonably coded, that is, if you “saved as HTML” from MS Word, you’re on your own.

A lot of people are looking for this information, so I figure I should expand on it and tell you exactly what I did and how you can convert any existing web site into a WordPress themed site too.

Concept
The concept of a theme is that it will be the framework, the common template, that all of your content will be displayed inside of. Normally, you will use the same look and feel, the same template, on all of your pages. This usually contains the header, the sidebars, the footer, and the content goes in the middle and changes from page to page. We’ll want to take the existing HTML files and slice them up into WordPress theme files, with a dynamic place in the middle to put all of the content.

Text Edit
Did I mention that you need a text editor to make WordPress theme files? MS Word will not work. You MUST be able edit the files and save them as “text” files. They can not be formatted in any way. On Windows, look for WordPad. On a Mac, look for TextEdit. Do not make them RTF, or Rich Text Format. Just save the files as simple old text.

Quick shout out for BBEdit on a Mac. The ultimate text editor and if you’re going to be doing this, worth every penny. It does not suck. Says so right on the box.

Set Up Dev
Before we get any farther, you’ll need a development installation of WordPress that you can play with and break. It can’t share the database with an existing installation, or the theme you pick here will be the theme that the existing site will get at the same time.

If you do not have an installation of WordPress yet, install it and we’ll just play with it until we’re happy with the new theme. No one is looking. No one cares. Feel free to break it all you want.

If you do have an existing installation, you need to make another installation. It’s easy, but pay attention. You will have the existing site in your top level. You’ll probably have a “wordpress” folder with all of the files in it, in that top level. Make a copy, or upload a new copy, of WordPress right next to that folder. Name the new folder “dev”. You will now have the existing Worpress in “wordpress” and the new one right next to it, named “dev”.

Take the existing wp-config.php file and download it to your hard drive, where you can edit it. Open it up and look for the line that says ” $table_prefix = ‘wp_’; “. That “wp_” is the prefix for all of the tables in the database that WordPress uses. We don’t want to create a new database. We want to create new tables inside the existing database. We leave everything else in this file alone, but we change the “wp_” to “dev_”. Our new installation will see that and go create a new set of tables, all with names beginning with “dev_”.

Upload that wp-config.php file and upload it to our new “dev” installation. It should be next to all of the other “wp-”folders, at the top level.

Now, we’ll let WordPress do it’s thing. This is where the WordPress is so much better than any other Content Management System out there. We’ll finish the installation using your web browser.

Go to the home page of the new “dev” WordPress installation. If you have a previous installation, type in that URL, followed by /dev/, which is the folder that we put the dev WordPress. If this is a new installation, then you can go to the new home page. You should be looking at a new installation page that says “welcome”. You need to fill in the Name of the new site and your email address.

Click on the Install WordPress button. Wait for a really long time while WordPress goes out and updates the database and installs all of the information that it needs. This might take up 10 seconds on a slow day.

You will be looking at a Success! page. The user name is “admin” and the password is some totally obscure random string. Log into the new site and look around. You now have a development site that we can install themes on and break if we want to.

Lift and Separate
We want to go back to looking at the existing site that you want to convert. We want to lift the HTML from it and separate it into WordPress theme files.

The basic task is to separate out the “theme” elements from the “content” elements. If you have a stack of HTML files on your server and you’re not sure how they all work, download them and look at them in a text editor.

You need to have some background in HTML to know what you are looking at. You’re going to have to read the HTML and figure out what it is doing. You’ll see a lot of stuff at the top, in the <head> section. The next should be the header area, all the stuff at the top. Somewhere down after that, will be what looks like content, the actual writing.

Your task, and this is the hardest part, is to figure out exactly where the “top” stuff stops and the “content” stuff starts. It could be a table cell. It could be a <div> tag. You need to find that point.

In the simplest form, there’s a bunch of HTML, then there’s content, then there’s a bunch more HTML. The goal is to slice that HTML into files named “header.php”, “sidebar.php”, “footer.php”, and most importantly, “index.php”. There could be others, but we’ll talk about that later.

Slice off the top stuff and put it in the “header.php” file. Figure out where the side bar stuff might come and copy it into that. You don’t really need a sidebar file if you don’t want to have one or you might want a couple, using sidebar-right.php and sidebar-left.php. You’ll have to go through your code and look at the layout of the page.

Take the bottom stuff and put it in the footer.php. You saw that coming, didn’t you?

You’re left with the content. You need to create an “index.php” file. At the top, you want to have the tag <?php get_header(); ?>. At the bottom, you want to have the <?php get_footer(); ?> tag. You can put your sidebars in where you want them, before or after the content, for left or right.

In the middle of the index page, you want to put in the magic PHP tags that display the content. Open up the default theme index.php file and look at it. Copy everything starting at the <?php if (have_posts()) : ?> tag down to the <?php endif; ?> tag. You’ll get a bunch of “class=entry” and “php_content()” tags.

Save all of these files into a new theme folder. You’re doing all of this on your hard drive. Name the new theme whatever you want. “MyNewTheme” sounds great. Copy the style sheet from the default theme into your new theme folder. If you already have a style sheet from your original site, use that instead.

Open the .css style sheet file. You want to have the new name so that it shows up in the Appearance page in WordPress. At the top of the file, you need to have at least “/* Theme Name: MyNewTheme */”. The slash and asterisk means that it’s “commented out” so that it doesn’t interfere with the style sheet. Don’t use the quotes, just the slashes and asterisks. Look at the default theme style sheet or the codex for more info. This is minimum.

Upload and Look
Upload your theme folder to the “wp-content” themes folder, next to the default and classic themes. Go to your Themes page in WordPress admin and see if your theme is there. If it is, select it and activate it. Hold your breathe and “View Site”.

Did it work? Did it break? If you have horrible text that displays PHP error messages, read what they say and try to figure out where the error is. It’s probably a missing closing tag or a missing semi-colon. I hate those.

Did it display something, but it’s all out of whack? You need to play with the style sheets and the theme files to get it to display correctly.

Fix it
The simplest situation here is that you copied the code straight out of the original files and plopped it in here and it all works.

The issues could be style sheets, missing code, or badly written HTML. The more you change from original, the more you need to know what you are doing.

Pages
After you get it working and looking right, you want to create new pages for each page in the new site. Just create them and put some gibberish for now. You just want a place holder. Make sure that the menu points to the right places. Menus will be the next issue.

Existing Pages
If you have pages that you just don’t want to convert, you can put them into the Worpdress top folder, so that they act like normal pages. In my example, all of the portfolio pages are still hard coded PHP files. http://www.flowerart.biz/portfolio/ I needed to make sure the menus work, but those are hard coded pages. They are not visible in WordPress, but they are visible to the user. Read “Put A WordPress Menu In An External Page” to see how I made the menus dynamic on a hard coded page.

Menus
If you want to have dynamic menus, where pages are added to the menu when you create the pages, then you need to read through the codex about menu tags and their attributes. It’s possible to cut out the hard coded HTML menu that you had and replace it with a dynamic one. See where to cut out the old one and replace it with the new tags.

Different Templates
If you have different templates for different pages, you need to know what the differences are. If you need to create a new template for each page, you can do that. Go into each old HTML file, cut out the “contents” and replace it per the directions above. Now, create a new file that will act like that specific page’s index.php file. I like to name them all starting with “template_”, so you might have template_aboutus.php.

These new template pages need to have all of the tags of the others, header() and footer() and that stuff. It’s possible to have a template page that is entirely custom HTML and not even use the content() tags. You won’t be able to edit it, but it’ll show up on the site and be managed like other pages.

Each one of these new template pages needs to have the commented out lines at the top of the file that has the name in this format: “/* Template Name: About Us */”, again, without the quotes.

Upload this new file to the theme folder, next to the index.php file. Go back to the page that needs to use this template. On the right, there’s a “Template” drop down menu that should now list all of the template files that contain that “Template Name:” line in them. Select the one you want to use for that page and update.

Go look at it. You will have to customize and fix each template to make sure it works with the pages that you want.

Final Touches
You will have to go through each page and make sure that the menus work and that they look right. You can use the default theme as a guide. You can look up specific problems in the codex or the forums or you can ask me.

From here on out, it will be stylesheets and php tags to get it to look and work right. If you have a specific problem, let me know in the comments below and we can walk through it.