How To Convert An Existing Site To Wordpress

Thursday, January 29th, 2009

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.

Posted in Wordpress |

Knocked Off The Horse

Tuesday, January 20th, 2009

Wow. Things got busy and my Wordpress blog gets forgotten. I think I’m back. I’ll try to make up for lost time. The weather has been in the 80s for the last week or so, so I may have been a bit distracted.

In the last week, I’ve also been busy with, and learned a lot from, clients and would be clients, about what people want, what they know, what they don’t know, and what they need. I’ll go into depth on some of these later, but I’m shocked, SHOCKED! I say, that there are actually people in the world who don’t have the same knowledge and beliefs and understanding that I do.

People don’t seem to understand that Wordpress is free and powerful. I am an old school, hand coder, who would rather do it all myself, so I can have total control, but I cranked out a complete web site, including a custom design, including an image gallery, and including all the fixin’s, in two hours. That’s two hours folks, to build a site that would have taken me two weeks in the old days.

Wordpress rocks. No way around it. Wordpress just freakin’ rocks.

It also seems that SEO is the buzz of the day. Either people want it or they don’t know yet that they want it. I’m finding that the common thread, with everyone that I talk to, is that they just don’t know much about how to effectively do SEO, even though it’s relatively easy.

A client told me this morning, after I gave them an outline of what to do, that it’s not hard to do, they just didn’t know what needed to be done. It’s like I gave them the map and now they are driving the car across the country.

I’ll be talking more about Wordpress SEO and SEO in general. It is really not difficult, once you get a few ideas figured out. I’m surprised that people charge so much for it, but it does give results and most people are not doing anything, so it’s easy to beat most other sites out there.

Posted in web site build |

How Much Does Wordpress Cost?

Monday, January 12th, 2009

I ran into an old friend recently. The usual questions were asked about what’s happened in the 20 years since we’ve seen each other. Yes, I do web sites.

They said they were about to update their web site. Their spouse had created it and they wanted to add some features and update the look. I suggested that they use Wordpress. I sounded like the fan boy that I am.

They were pleasant, but said they already had hosting with GoDaddy and they would just use the web blog application that they provided as part of the hosting package. They had heard of Wordpress and that it was good, but they would use what they had.

I continued on about how cool Wordpress is. They were very nice, but had decided that they didn’t want to pay anything extra when they already had a blogging application included in their hosting package.

I checked it out on my own GoDaddy account. It sucked! It had a tenth of the functionality and the interface was horrible.

I told them again that they should use Wordpress. I told them that it is free. You can install it anywhere. It’s got features, and blah blah blah, and IT’S FREE!

Oh. That’s quite different. It’s free you say? You don’t have to buy it?

No! It’s FREE. You can download it, install it, pick a theme, put in some plug ins and have a complete, professional web site FOR FREE.

They said they would check it out. They thanked me profusely. Told me that I had motivated them to get going on their web site.

I have no idea if they will do anything on it at all, but I guess I was shocked that not everyone has the same understanding and knowledge and beliefs that I do. Silly me.

People seem to think that to get cool software, you have to spend money. If you don’t spend money, then you can have cool software. People can’t wrap their heads around the whole “open source” thing.

If you happen to not be aware, Wordpress is free. There is no cost. You can download it and install it on any web server that’s running MySQL and Apache (which is almost every web server these days). You can control all aspects of it. You can build your own theme if you want. You can do anything with it.

Did I mention that it’s free?

Posted in Wordpress |

Half Of All Churches Do NOT Have A Web Site!

Tuesday, January 6th, 2009

Half of all churches in America today do NOT have a web site. Half! What excuse is there for that? This article below is quoting a Duke University survey to make the point that the church has caught up with the times, that only a fifth of them had a web site in 1998. But the glass is not half full here. It’s half empty.

If you are involved with a church that does not have a web site, I can show you how to get one for free, using Wordpress.com. All it takes is a little initiative on your part and you can have a web site. You don’t need a $300 site. You don’t need a $500 site. You can have a free web site for your church. Go to www.worpdress.com and follow the instructions.

Do it now. For the children.

Quoting from The Church In 2009 – KYPost.com

Close to half of the churches offer Web pages.

For example, local churches have caught up with the secular society in their use of computers and technology. In 1998, fewer than one in five U.S. congregations hosted Web sites; today, close to half of the churches offer Web pages to their members and local community. A friend of mine who ministers to a large Washington, D.C. Baptist congregation has a frequently updated interactive Web site whose volunteer editor works from India.

Read the entire article at:
http://www.kypost.com/content/middleblue3/story/The-Church-In-2009/o3oMerab5E2upfPeBvDqdg.cspx

Posted in church |

New Year’s Resolutions

Wednesday, December 31st, 2008

Who needs ‘em?

I do remember one year that I sat down and thought through some goals I had for my life. At New Years, I sat down and wrote them out and formalized them. There were only 3 or 4 and they were very specific and attainable.

During that year, I actually remembered those goals and started to make decisions based on them. Should I do this or that? This lines up with the goal and that would be a lot of fun, but doesn’t line up with the goal.

I kept track and measured myself during the year. Nothing hard core, but I was aware of exactly where I was on the quest.

At the end of the year, I had done really well on them all. I was shocked at how well I had done. I thought I had stumbled across a new way to make my life everything I ever wanted it to be.

I create even more goals for the next year. I had charts and graphs for the entire upcoming year. I had a manila folder. I was set. This new year was going to be great.

About 3 months into the second year, I realized that I had no idea what those detailed goals really were for each step along the way. I couldn’t remember the details. At 6 months, I had given up on all of them. Quit. Done.

At the end of the year, I hadn’t accomplished anything. I was still were I started and completely distracted by other things.

What do you want to achieve? Pick a couple goals. Make them simple. Make them measurable. Then go accomplish them.

What are your goals for the upcoming year? Leave a comment.

Posted in marketing |

This Is How You Should Comment!

Tuesday, December 30th, 2008

Douglas at Hostgator actually looks for people talking about his company. This is the kind of proactive research that you should be doing for your company. You need to search Google and Technorati to see what people are saying about you on a regular basis.

Look at his response. Leads with a compliment, addresses the concern, and follows with a positive statement. Also notice that he gets a link to his site in the comment he left (good for SEO). If it was just comments spam, I wouldn’t have approved it. Since it was a meaningful comment, it’s approved and he got the link.

I wish I could comment as well as Douglas! The dude is a professional. I’m happy to give him the extra links.

I’ve been promoting PowWeb, since they are who I’m happy with, but perhaps it’s time to stroll on down to Hostgator and check them out.

Quoting from How To Use The “Suckage Ratio” | Web Design and Developement for Small Business

I wish I could comment as well as Douglas!

By Douglas – HostGator.com on Dec 29, 2008 | Reply | Edit

I’m glad to see that you utilize a ratio (most posts like these just use the flat out number of results), but am disappointed to see that HostGator had the highest “suckage ratio.”

With that in mind, though, our customer service is still amongst the best in the industry and is continually improving. We also invest a lot of time and resources into reaching out to customers that have any trouble (we have an extremely strong presence on the Twitter and regularly reach out to bloggers). And the CEO of the company is also personally available to customers who ask (this is not a gimmick and actually does happen).

Hopefully our reaching out will help demonstrate our commitment to customer service excellence. If you have any questions or concerns, don’t hesitate to send me an email.

Read the entire article at:

http://www.walton.com/2008/12/22/how-to-use-the-suckage-ratio-to-pick-companies-and-products.html#comments

Posted in web host |

Last Edit for Web Site Starter Kit

Tuesday, December 9th, 2008

My wife went through the draft with her pen and marked it all up. Anything that she didn’t understand is being rewritten. Some of my organization wasn’t clear, so I’m making that a little clearer. We want to make Web Site Starter Kit the best it can be, which means clear, concise communication.

They haven’t quite released Wordpress 2.7 yet, so I’m still rocking the RC1 version of it. They say they will release the final version tomorrow. A few more screenshots today and it should be good to go.

Web Site Starter Kit should be released by the end of the week.

Posted in web site build |