HTML to WordPress Featured

Case study: Moving an HTML website to WordPress

WebsitesCategory
12 min read
Daymon Hoag

WIWA is a German company and leading manufacturer of airless spray painting units, plus fluid handling, material extrusion, and injection systems. WIWA USA is a North American Master WIWA distributor operating in the United States, Canada, and Mexico.

They’ve been a client for just a few years shy of a decade now, and their website has changed quite a bit over the years.

In this article, I’ll be going over the many changes involved with moving their site from static HTML to WordPress — a dynamic interactive tool to be used by their distributors and people interested in WIWA products in North America.

Moving HTML to WordPress Intro
Moving an HTML site to WordPress gets pretty involved, but we'll cover the process end to end.

Scoping out the redesign

When the opportunity to work on the WIWA website was presented to me, they were mainly interested in a redesign to bring the look of the website into the then current era of web design. Being that it was a static HTML website, ideally it would be converted to a CMS platform.

I felt WordPress, which had previously been a highly respected blogging platform, had proved itself as a great full-on CMS.

Hub Signup

That being said, WIWA USA was overpaying quite a bit for their hosting and development services. The website was moved to a GoDaddy hosting plan, which really helped to speed things up on their website. The website’s domain at the time was also moved to GoDaddy servers where it sits to this day.

Having some experience in SEO and website optimization in general provided the insight needed to convert a static HTML site to a dynamic CMS platform — WordPress in this case. It wasn’t enough to just copy the old pages to newly created pages on WordPress, since this site was already indexed and getting traffic.

Not only did each page need to be created in WordPress, but each of the old pages needed a 301 permanent redirect to their WordPress versions. It was a bit of a grind, but we got it done and the WIWA USA website was and is ready for future web development.

A new look & more functionality

Having the website converted from HTML to WordPress unlocked a ton of powerful features. We didn’t just update the design but added powerful functionality as well. One of the first tasks on the list after the initial conversion was language translation. Being WIWA is a multinational company, they needed a way for visitors to easily translate the English version of the site into their own language.

HTML to WordPress Archive
A visit to Wayback Machine shows moving the site from HTML to WordPress was the right move.

I can’t really take credit for this as it was a simple plugin, and one they’re using to this day. All I had to do was set it up, but it was one of the first major changes that needed to be dealt with. It literally was set it and forget it.

Having ready-to-install plugins available at a whim to enhance a website’s functionality is one of the reasons I chose WordPress, and I think the translation plugin is a great illustration in practice.

There were other challenges along the way, some right from the start and others years later. I’ll go over the needs and solutions of some of the most notable features that transformed this once-static HTML site into a powerful product and support portal for WIWA distributors in North America.

Digital product catalog

WooCommerce was a key feature used to transform static product pages into a full-on digital catalog. While they could start selling their products from a catalog, they prefer to simply showcase products at this point.

Creating a digital catalog was pretty simple. If we just leave off the price, there is nothing to add to the cart, so no button for that function is created. Still, other features of WooCommerce are available — such as product search, filters, categories, tags, attributes, and just about anything else you would typically need for an online store.

There’s just no actual selling.

This method is also somewhat future proof since if they decided to start selling everything is already in place other than price and a few shipping details.

HTML to WordPress Catalog
Dialing in the catalog was an important part of moving the site from HTML to WordPress.

Search is an important feature for the WIWA USA website. A parts search for tech support was implemented early on, followed by a distributor map with search. After a more recent redesign (the second one since I started working on it) we converted their training videos, brochures, manuals, and product videos into a searchable format.

I’ll explain how and why we did that in more detail later in this article.

Parts search was another important feature that needed to be implemented. This came with a unique set of challenges, and to be honest it took a few tries to get this one right. One problem is a part number needed to be matched up with a PDF diagram.

There were hundreds of PDF files that needed to be uploaded to the hosting account then made searchable. A static page listing all of the files just wasn’t going to work here. The idea of someone looking through a list of hundreds of files was simply impractical.

Search was the only solution.

My first thought was to use a plugin. I tried several, but each had their own terminable shortcomings. As often happens in web development when a solution doesn’t already exist, it’s up to you to create one.

So, instead of using and configuring a plugin I had to roll up my sleeves, do a little research and start scripting.

As an aside, I don’t think most web developers simply know how to write a particular script willy-nilly off the top of their heads to solve a problem unless it’s “hello world,” or something of that nature.

I think the main strength of being a good web developer isn’t necessarily just knowing everything instantaneously. It is knowing how to ask the question, and how to implement the answer.

Now, a programmer might be able to quickly whip a script into existence since that’s the majority of what they do. Web developers on the other hand are a kind of jack of all trades. We do design, coding/scripting, databasing, and more.

Few people just “know” all this stuff.

The point is this: Don’t let not knowing a thing stop you. Our job as web developers is simply to uncover and implement the right solution. We might not always get it right on the first try, but persistence is how we evolve to become great at what we do in any aspect of life.

What I settled on in this case was a custom search dedicated to searching through PDF files hosted on the server. It was challenging, because WordPress doesn’t search outside of the database by default.

Since the PDF files were simply uploaded and not attached to pages or posts they were not referenced in the database. To compound the issue, once I had the custom search working, the results were not displayed within the WordPress templating system.

This meant I had to create another script that called the WordPress templating system for the results page.

Once finished, this worked well for several years. Eventually, someone developed a plugin that allowed files to be uploaded then indexed by the database — which is how the parts search works today. This also allowed for parts to now be searched using the main WordPress search function with just a couple of minor tweaks.

HTML to WordPress Search
As we moved the site from HTML to WordPress, search was a function that needed to be preserved.

Moving the distributor map from HTML to WordPress

Being that WIWA USA is a master distributor, it makes sense that they would list the other distributors on their website. WIWA USA currently sits at number one in a Google search for the brand name “WIWA,” even above their parent company.

At least for US-based searches. This is important to mention, because the distributor map makes it possible for contractors to find their closest WIWA equipment distributor.

When researching the best way to implement this feature, I quickly found no plugins existed specifically for this kind of implementation. I did, however, find a plugin that would do most of what we needed. With just a few minor workarounds I was able to bend the will of this plugin to do my bidding.

To be fair, the plugin used was a paid plugin, and the developer has since added the functionality that would have made this work “out of the box.”

While this plugin met the need for a few years, the listings were not searchable from the main WordPress search. A person had to actually click the link to the distributor map and use a variety of filters to find their closest distributor.

This was good, but for completeness the feature was updated using a different plugin — one that is capable of retrieving one’s location with the click of a button and displaying a map with markers and their listings within a specified radius.

This was accomplished by creating custom post types then geotagging the post.

Creating a post for each distributor meant they each got their own page instead of just inclusion in a list. Since they’re custom post types it also means they can be included in the main WordPress search functions. If a contractor knows the name of a distributor they can just type the name in the main search to find that listing.

The distributor map is such an integral feature of the WIWA USA website experience that it’s search form is located on the home page. It features the ability to auto detect location, search within a radius, and to filter results to only the United States, Canada or Mexico.

HTML to WordPress Distributor Map
The distributor map was a key function when we moved the site from HTML to WordPress.

Individual posts for one-off functionality

Training videos, brochures, manuals, and product videos all shared a common trait. For several years, each type of documentation had its own page consisting of a grid of static content. They were basically set up just like the original HTML pages with some design changes.

While they looked nicer there were a few shortcomings.

In the early years this worked OK, but as more content was added over time it began to slow the pages down. While the pages themselves could be found via WordPress search, the individual items could not be.

It became clear that having each item individually searchable would be of great benefit. For example, there might be a single product that had a product catalogue listing, a brochure, a manual or two, and several training videos.

Wouldn’t it be nice if a user could simply type in the product name or model and be presented with all of the content available for that product?

Darn Skippy, it would!

Not only would this make all of that content easier to find, but speed up the archive pages as well.

HTML to WordPress Posts
Don't overlook the functionality of posts when you're moving a site from HTML to WordPress.

One of the best examples of this is the product videos which are actually hosted on YouTube. Without getting into a ton of technical detail, video snippets/embeds have to load individually, which isn’t too bad if it is just a single video.

Add several videos on a single page and things can start getting a little hairy with load times.

The solution was to create individual posts for each video. Some WordPress themes provide post formats, and in this case a video post would output a thumbnail for the video in the post archives instead of a video snippet.

This makes the post archives and indexes load much faster since we’re now working with images in the form of thumbnails instead of video embeds.

HTML to WordPress Videos
As we moved the site from HTML to WordPress, using posts yielded much faster load times.

Similarly the product brochures and manuals, which are all in PDF format, had a grid of images from the PDF files all arranged in a grid, and all on a single page. By converting each of those to their own post, we are now dealing with thumbnails for the archive pages instead of regular sized images — which helps with load times.

There’s also the added benefit of using categories which all have their own individual archives instead of cramming everything into a single page. Again, helping with load times and overall organization.

Closing thoughts on moving a site from HTML to WordPress

This website had a few other technical challenges, but what I’ve highlighted here are the bread and butter of the operation. Many of the ideas WIWA came up with I wasn’t sure would actually be possible.

At least for me, being a one-man operation.

What I’ve learned is “let me take a look” will get you off the hook when you’re uncertain. You cannot let the fear of failure stop you from trying in this industry. In 2021, budding developers have it pretty good in comparison to when I started.

There is just an overwhelming amount of information and resources freely available for web developers online these days.

To be honest I hated WordPress in the early stages of their transformation into a CMS. It allowed anyone who could write an email to build a website, and that was cutting into my bread and butter. I spent all of this time learning to build websites with a text editor, FTP program, HTML, CSS, javascript, and PHP.

What I found after getting onboard with WordPress is that knowing these things just made me a better developer.

It helped me turn this static website into something I think, and I hope WIWA thinks is truly great. Being able to one-click-install a WordPress site is one thing. Being able to manipulate WordPress, plugins, styles, themes, and functions is an entirely different beast.

Yes, anyone can do it, but with some persistence and ingenuity you can turn a good website into a great website.

Products Used