How to move your old static HTML website to WordPress (or just start a new one)

WordpressI frequently get asked how to set up a small-ish CMS-driven (CMS = Content Management System) website for research groups or other entities. Many of these people have learned that maintaining a static website the “old-fashioned way” (e.g. using Dreamweaver) presents a variety of problems – mainly related to inconsistent content or collaborative editing problems. These issues are often caused by changing web editors and varying levels of HTML-savvy.

The task of setting up a new website that is CMS-driven can be quite complex. After all, there are many different CMS software packages available (many are luckily open source and free) and a complex, corporate website can be quite extensive and could contain sub-sites (“micro-sites”) as well. What I want to propose here, however, is a tool that is “just enough” for a small- to medium-size site. Often, selecting a too complex management software can lead to extensive training needs and confusion by the users that likely will underutilize the available functionality as a result. So “just enough” would be the best approach.

For these reasons, my site-building tool of choice in the past has been WordPress. Although it is often considered to be a blogging platform, it is a very capable and very easy-to use software package that can easily handle a good size site with a variety of add-on functionality (provided by plugins). You can find an overview of the core features here. Sample sites that use WordPress are shown here – use them as inspiration. And did I mention that it is free?

Beyond WordPress, other CMSs are Joomla, Drupal and many more. Feel free to look at these, too, and make up your mind on the features you need and how the site will be implemented and managed.

So what’s next for you? These are your steps to success:

1 – Analyze your Current Website, Web Presence and Needs

Start this process by looking at what you have right now. What you basically need at this point is a sitemap for your current site that shows its content (pages, documents, media files), how it is organized and what kinds of content it contains.

Generate a sitemap either by exporting it from a site management software (like Dreamweaver) or by simply going through your site – page by page – and drawing out the content on a piece of paper in the shape of an organizational map. For example, if you have a hierarchy-based site structure draw the sitemap as a tree map. If you have lots of timeline-based items (“news” items), sketch those as well. This sitemap will give you an idea how you will organize the new site.

Site map

(Image: Wikipedia)

At this point, it might also be a good idea to think about your web presence in general. Will it be important for you to have your own domain (a URL like alexschreyer.net) and do you need any email accounts under that domain name? Do you want to expand your current web offerings and offer interactive tools such as a forum to your site? All of this will help you get a clearer image of what it is you will need to build.

It is also important to figure out who will do what on the new website. Who will be the administrator(s) that are in charge of maintaining the site’s software and can add or remove features and users? Who will be the editors that can supply or edit content? The benefit of the new WordPress-based website will be that these functions can easily be distributed among many people.

2 – Set up Hosting and Secure Your Domain

Web hostingWhat you need next is your own web property. This can be done in a multitude of ways. Before you start looking at the options, ask yourself how much effort you (or someone else in your organization) want to commit to maintenance and how much control you want to have over the site’s design and feature extensibility.

Your main hosting options are:

  • Sign up with WordPress.com.
    This allows you to start a website very quickly. You can start adding content right after signup and you benefit from a minimal maintenance load because your website is hosted and the software is maintained by the folks who run this service. For $17 per year, you can also get your own domain (e.g. www.yoursite.com) and make your site look like you hosted it yourself.
    The downside of this method is that you have only limited design options (you have to pick from a number of templates) and that you have to cope with limitations such as occasional ads, limited users and limited media hosting (at least in in the free version).
  • Get managed WordPress hosting.
    This option is similar to the first, only that you are now registering with companies that usually sell plain webspace. This means that the packages they offer often include domain registration, email accounts and web space (to allow you to host your own videos, for example). Another benefit is that you typically have more freedom to modify your WordPress installation.
    The downside of this option is that you may end up with more maintenance tasks (this is very much depending on the hosting package you choose, though).
  • Get some web space and host WordPress yourself.
    This option gives you the most freedom. You can install WordPress and customize it any way you like (by installing design themes and modifying them or by installing plugins). You can even run multiple websites in one webspace. For example, this website is hosted with 1and1 (in their Linux Home package). These packages also come with at least one domain and multiple email accounts. Check your hosting company of choice for the features you need.
    The downside of this method is that you are in charge of all the maintenance. While WordPress is very easy to maintain, you will still have to do it all yourself (apply software upgrades, maintain database and other backups etc.).
  • Host WordPress on your own computer.
    If you decide to go this route, then you are in charge of setting up your own server (including the PHP scripting engine and the MySQL database), installing WordPress and pointing the domain at your computer. This is quite involved and carries a heavy maintenance load. On the plus side, this will be likely your cheapest option – especially if you already have a fast internet connection and maybe even a dedicated IP (as may be the case on a university computer). Because all the software is available for free, the only part you need to pay for is the domain registration, which can be under $10 per year.

3 – Set up WordPress and Configure it as a CMS

Depending on the choice you made in the last step, you may automatically have WordPress installed in your webspace by now. If you picked the third or fourth option, then follow these simple steps to install WordPress yourself.

Wordpress SettingsOnce everything is up and running, start by modifying general settings and setting up plugins. Here are some tips:

  • Set up a custom welcome page.
    Under Settings > Reading pick a static page as your home page if you don’t want to have your news items be your site’s most prominent feature.
  • Set up descriptive permalinks.
    I like using “/%category%/%postname%/” as my permalink structure. Search engines seem to like it and will give you a good ranking.
  • Make sure your site is visible for search engines.
    Under Settings > Privacy make sure you select the option that makes your site visible to search engines.
  • Set up comments only on the pages where you actually want to have a discussion.
    Comments are a great feature of WordPress. You can even use them for mini-discussion forums on your pages or posts. When you set up comments, don’t forget to activate Akismet (the plugin that came with WordPress) so that you have less spam. It is a good idea to disable comments by default and just activate them where you need them.
  • Add users.
    Based on the lineup of Administrators and Editors that you determined earlier, add people to your WordPress site. Many hands make for light work on website admin tasks, too. Just remember to give everyone a quick intro to the features so that you don’t end up with problems later. It is also a good idea to discuss formatting standards for consistency.
  • Add plugins.
    This is where you expand the core functionality of WordPress. Depending on the plugins you choose, installing them ranges from extremely easy to a bit more involved. Because it is easy to try out different ones, go ahead and do so until you find the ones you like. A good starter list for a CMS is the following. You can add them from within WordPress under Plugins > Add New.

    • Breadcrumb NavXT – Adds breadcrumbs to your pages so that visitors know where they are on your site.
    • Dagon Design Sitemap Generator – You need a sitemap for the lost visitor somewhere.
    • External Links – Opens all external links in separate windows so that visitors don’t navigate away from your site.
    • Google XML Sitemaps – Simplifies integration with Google’s search.
    • Related Posts – Show your visitors what else you have on your site.
    • WP-DBManager – Helps you maintain the database.
    • YOURLS: WordPress to Twitter – Use this or a similar plugin to integrate with social networks like Twitter.

4 – Move Content to the New Site

At this point, you could focus on the design of your site (step #5 in this list). It might, however, be easier to settle on the final design if the content is already in place (stay with step #4 in that case). Whichever process you choose, at this point, you’ll likely want to do a bit of each in parallel. It might also be a good idea to get some people moving content over while others work on finding the best visual theme for your site. Choose the approach that makes most sense for you.

Now you are ready to move content from your old site to the new WordPress site. For common needs, follow this template:

  • Move hierarchical pages to “Pages” in WordPress.
    Simply create a new “Page” in WordPress for each page on your old site and then copy the content over. When you create the new pages, put them into the correct place by selecting the appropriate “Parent Page”. For example, add a personal page under a “People” page (by selecting the “People” page as the “Parent”). Top level pages (such as the “People” page) have no parent page.
    When you copy content over, remember to download and then re-upload any non-text content like images or files.
  • Move timeline-based items or categorized non-hierarchical items to “Posts” in WordPress.
    Set up categories in the WordPress admin area for the categories that you need. These would be categories like “News” or “Projects”. Then start copying content over to those categories by pasting relevant pages from the old site into “Posts” on the new site.
  • Move media items into WordPress using a relevant plugin.
    If you want to host video or extensive image collections in your WordPress installation, then you are best off if you install a media-manager plugin and upload your media using its interface. For example, I use Nextgen Gallery for my photo galleries and wordTube for my videos.
    If this sounds too daunting, then consider hosting your media externally (on YouTube or Flickr, for example) and embed it on your pages. This has the added benefit that you are not paying for the download bandwidth.

WordPress has many more options to organize content. If you need a more customized solution, begin by reading about custom taxonomies.

5 – Design the Site

Design templateAfter you moved all your content over to the new site, it is time for you to review the new site and see if everything is presented as good as possible. Look at the same content in different themes. Play around with widgets (under Appearance in the admin area) and settle on a design that works best in your case. If you feel up to it, go ahead and modify the CSS or any of the template files (if you have access to them).

Look at magazine-style themes if you want to go away from the blog-like templates (blog posts on the left and timeline on the right). There are many free, high-quality themes available. The new Twenty-Ten default theme that ships with WordPress is a great place to start in any case.

6 – Set up Forwarding

After you remove your old site, you’ll be left with links somewhere on the internet that point toward your old URLs. It is best if you set up some forwarding on that site. Here are some options:

  • Static error page.
    You can now move all of your old site’s content (the HTML pages) off that site. You could move them to an “Old” subdirectory on the old webspace, for example – then they are still there if you need them.
    Afterwards, add a static HTML page to your site and put some content in it that has a link to your new site (save it as notfound.html). Finally, add a file in the web space that is called “.htaccess” (don’t forget the dot at the beginning). In it, add this line:
    ErrorDocument 404 notfound.html
    This line will redirect any incoming visitors to the notfound.html page that tells them where to go now.
  • htaccess redirecting.
    This is the more elegant version. Read about it on any of these sites.

7 – Deploy and Lean Back

Now you can tell everybody about your new site and wait for Google to index it. You will enjoy the simpler maintenance that WordPress provides you in no time.

Don’t forget to make sure you do regular backups of the database as well as any uploaded files. It is also a great idea for any site to start looking at site statistics. Depending on your preferences, you can sign up with free services like Google Analytics or Statcounter.

If this was helpful for you, add a link to your new WordPress-driven site in the comments below.

Links: