Converting HTML Pages to WordPress

Editor’s note: Back in 2013 when Dan Knight still ran Low End Mac, it was around the time our website was transitioning over from HTML to WordPress. This article documents his experiences and some of his tips for others looking to migrate to WordPress. This article was complete, pulled out of our draft archives from 4/13/2016. Some images are missing and cannot be retrieved, unfortunately.


After many years of looking at our options and trying some content management systems that just didn’t work for us, in March 2013 we began transitioning Low End Mac to WordPress. Part of that was migrating all the articles to WordPress. We were working on moving other content, and it was a very time consuming process.

I’m going to share my technique so others can learn from it. My solution is specific to Macs, but it can probably be adapted to Windows and Linux fairly easily.

Recommended Tools

  • TextWrangler
  • Dropbox
  • Camino browser (TextEdit also works)

The HTML Content

Most of our archive content was originally written and edited using Claris Home Page, then massaged through TextWrangler before being uploaded to our server. TextWrangler, a free text editor from Bare Bones Software, remains an invaluable tool even though we stopped using Home Page in 2013.

Sync Files with Dropbox

All of the HTML pages on Low End Mac are stored on my Macs and mirrored via Dropbox. Whether I make changes on my Mac mini or my MacBook, Dropbox makes sure the change is duplicated on the other machine. That’s extremely helpful, as it means I can take the MacBook to work, make fixes there, and not worry about copying them to the Mac mini at home. Dropbox takes care of that automatically.

I use a color coding scheme to keep track of which files are to be ported over, which are in progress, which have been completed, and which will not be converted. By using Macs throughout the process, I can be assured that each machine uses the same color codes to mark files.

Step 1: Open the HTML Files

Because our HTML files have hard returns, you can’t simply cut and paste their text into WordPress using Text mode. If you do that, the text doesn’t flow properly, as in the example below:

The best process is to open the HTML files in a browser or other app, such as TextEdit, that can display it. I usually use the Camino browser for this, as it doesn’t make any changes to the underlying code, but TextEdit seems to work equally well.

Best of all, when you switch to Text mode in WordPress, the line breaks that you didn’t want are gone.

The problem is, some browsers let you work this way while others will leave the line breaks in place. Camino doesn’t do that, and that’s why I continue to use this increasingly outdate browser for this.

Step 2: Date and Save the Article

WordPress calls articles posts, and once you’ve verified that the text is flowing correctly, it’s time to save everything before you proceed.

Step 2a: Set the Publication Date

WordPress defaults to publishing your article as soon as your click on the Publish button using the current date and time. Since this is archived material, we almost always want to publish it using its original publication date. So before you click on the Save Draft button, click on the word Edit following the words Publish Immediately. This will let you set the month, day, and year for the post.

There’s no need to worry about the time of day. Just set the month, the day, and the year, and then clock on the OK button. You’ve now set the publication date.

Step 2b: Set the Title for the Post

In most cases, you can simply copy the article title and paste it into the box that says Enter title here. Usually, but not always. Sometimes you need to update the title, and once in a while, the article doesn’t have the correct title. (Rare, but I’ve run into it several times in recent months.)

If the title mentions an older version of OS X, such as Jaguar, but not the fact that it is OS X Jaguar, update the title to read OS X Jaguar. Old timers won’t be tripped up by that kind of thing, but people new to the Mac in the past decade could be. It’s just one way to make a title as clear today as it would have been to its original readers.

If the title of the article seems to be wrong, the best places to check for the correct title are:

  1. The index page for the category.
  2. The “this date in LEM history” page at http://lowendmac.com/arc/MMDD.html where MM is the number of the month and DD is the day of the month, both using two digits.
  3. The Internet Archive at http://archive.org/

Step 2c: Add the Year of Publication

Because this is archived content and because the current mobile edition created by the Jetpack module in WordPress doesn’t display the publication date, in most cases you will want to begin the first paragraph with the year of publication followed by a space, a hyphen, and then another space. This immediately identifies this as old content.

There are exceptions to this rule. If the title of the post mentions the year, you don’t need to add it to the first paragraph. If it’s a historical article that is as relevant today as when it was first published, there’s also no need to add the date unless is says something like ten years ago. The purpose of including the year is clarity.

Step 2d: Set Categories

Most of our content is in the category Low End Mac, but it might also be under Deals, Low End Android, Low End PC, Tech History, Reviews, etc. Some articles may be under both Low End Mac and Low End PC or Android depending on their subject matter.

Most of our archived content is already in a category, such as Mac Musings, The Rumor Mill, Miscellaneous Ramblings, and so on. In these cases you will choose this category along with Low End Mac.

Step 2e: Save as Draft

This is a good point to save the post using the Save Draft button.

Step 3: Edit the Post and Check Links

In migrating content to WordPress, I’ve been surprised at how many typos and other issues crept in over the years. I’m sure I didn’t make those mistakes originally – I was an English major, after all! Seriously, it happens. Please fix typos. Make our writers look their best.

There may be points where you need to clarify something. In the early days of Mac OS X, I used to call it simply X in some articles. As I go back and work on them, I change that to OS X. I used to call the Blue and White Power Mac G3 the G3 Pro, but that didn’t catch on, so now I give it its full name.

Over time, links on the Internet break. Sometimes you can find them in the Internet Archive. Sometimes not. And sometimes you can find the old material at a new URL. For instance, what was once news.com is now cnet.com. Sometimes companies change their names or move to a different content management system.

Sometimes links just lead to a different page on the website, something we’ve run into a lot with Apple TIL and KBASE postings. No link at all is better than a link to a page that doesn’t provide anything helpful. And sometimes it is better to link to the company than to a page that no longer exists, something we’ve been doing with Tom Bihn bags. The links are for old, discontinued product, but at least we can get people to the company home page.

Most of all, we need to get rid of broken links and links that are no longer useful – and links that now lead to malware sites, domain resellers trying to make a quick buck, and domains that are no longer the same company that once owned them.

Step 4: Improve the Post

Adding Links

In the olden days, we didn’t have Wikipedia to link to. Now we do, and it’s often helpful to add links to Wikipedia for certain tech topics.

In the olden days, we didn’t have pages for the different versions of Mac OS X or iPod or iPhones, etc. Now we do, so if an article is talking about Mac OS X 10.4 Tiger, you can add a link to that on Low End Mac.

Adding Images

We already have a fairly extensive Media Library, as WordPress calls it. We may already have the photo or photos in the Media Library so you can enhance the article. We may also have images in our Dropbox archive that were originally used with the article but are not yet in the Media Library.

If none of those work, do a Google image search. If you’re lucky, you may find old Apple PR photos that you can import into your favorite image editor (I use good old Adobe Photoshop Elements 6, but there are lots of other options for manipulating and resizing images, and then saving them for the Web.)

If you’re comfortable correcting color, adjusting lighting, straightening out images, and the like, go for it!

WordPress has one nice ability here: You can display a large image at a reduced size. For instance, some of our columns have a graphic that’s 1360 pixels wide but displayed centered at 680 pixels to fit the page. We do this so people using Retina Displays get the highest possible quality. Here’s one example:

The Rumor Mill

For image placement, avoid placing images “above the break”.

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.