Godaddy Shopping Cart – Case Study: Moving a Site from HTML to WordPress
WIWA is a German firm and main producer of airless spray portray items, plus fluid dealing with, materials extrusion, and injection programs. WIWA USA is a North American Master WIWA distributor working within the United States, Canada, and Mexico.
They’ve been a shopper for simply a few years shy of a decade now, and their web site has modified fairly a bit over time.
In this text, I’ll be going over the various modifications concerned with shifting their website from static HTML to WordPress — a dynamic interactive software to be utilized by their distributors and other people fascinated with WIWA merchandise in North America.
Table of Contents
Scoping out the redesign
When the chance to work on the WIWA web site was offered to me, they have been primarily fascinated with a redesign to carry the look of the web site into the then present period of net design. Being that it was a static HTML web site, ideally it might be transformed to a CMS platform.
I felt WordPress, which had beforehand been a extremely revered running a blog platform, had proved itself as a nice full-on CMS.
That being mentioned, WIWA USA was overpaying fairly a bit for his or her internet hosting and growth providers. The web site was moved to a GoDaddy internet hosting plan, which actually helped to pace issues up on their web site. The web site’s area on the time was additionally moved to GoDaddy servers the place it sits to today.
Having some expertise in search engine optimization and web site optimization usually supplied the perception wanted to convert a static HTML website to a dynamic CMS platform — WordPress on this case. It wasn’t sufficient to simply copy the outdated pages to newly created pages on WordPress, since this website was already listed and getting site visitors.
Not solely did every web page want to be created in WordPress, however every of the outdated pages wanted a 301 everlasting redirect to their WordPress variations. It was a little bit of a grind, however we received it finished and the WIWA USA web site was and is prepared for future net growth.
A brand new look & extra performance
Having the web site transformed from HTML to WordPress unlocked a ton of highly effective options. We didn’t simply replace the design however added highly effective performance as properly. One of the primary duties on the listing after the preliminary conversion was language translation. Being WIWA is a multinational firm, they wanted a method for guests to simply translate the English model of the location into their very own language.
I can’t actually take credit score for this because it was a easy plugin, and one they’re utilizing to today. All I had to do was set it up, but it surely was one of many first main modifications that wanted to be handled. It actually was set it and neglect it.
Having ready-to-install plugins accessible at a whim to improve a web site’s performance is likely one of the causes I selected WordPress, and I believe the interpretation plugin is a nice illustration in follow.
There have been different challenges alongside the best way, some proper from the beginning and others years later. I’ll go over the wants and options of a number of the most notable options that remodeled this once-static HTML website into a highly effective product and help portal for WIWA distributors in North America.
Digital product catalog
WooCommerce was a key characteristic used to remodel static product pages into a full-on digital catalog. While they might begin promoting their merchandise from a catalog, they like to merely showcase merchandise at this level.
Creating a digital catalog was fairly easy. If we simply depart off the worth, there’s nothing to add to the cart, so no button for that perform is created. Still, different options of WooCommerce can be found — corresponding to product search, filters, classes, tags, attributes, and absolutely anything else you’ll sometimes want for a web based retailer.
There’s simply no precise promoting.
This methodology can also be considerably future proof since in the event that they determined to begin promoting every part is already in place aside from value and a few delivery particulars.
Search is a vital characteristic for the WIWA USA web site. A elements seek for tech help was carried out early on, adopted by a distributor map with search. After a more moderen redesign (the second since I began engaged on it) we transformed their coaching movies, brochures, manuals, and product movies into a searchable format.
I’ll clarify how and why we did that in additional element later on this article.
Integrated elements search
Parts search was one other necessary characteristic that wanted to be carried out. This got here with a distinctive set of challenges, and to be trustworthy it took a few tries to get this one proper. One drawback is a half quantity wanted to be matched up with a PDF diagram.
There have been lots of of PDF information that wanted to be uploaded to the internet hosting account then made searchable. A static web page itemizing the entire information simply wasn’t going to work right here. The concept of somebody trying by means of a listing of lots of of information was merely impractical.
Search was the one resolution.
My first thought was to use a plugin. I attempted a number of, however every had their very own terminable shortcomings. As usually occurs in net growth when a resolution doesn’t exist already, it’s up to you to create one.
So, as an alternative of utilizing and configuring a plugin I had to roll up my sleeves, do a little analysis and begin scripting.
As an apart, I don’t assume most net builders merely understand how to write a specific script willy-nilly off the highest of their heads to remedy a drawback until it’s “hello world,” or one thing of that nature.
I believe the primary energy of being a good net developer isn’t essentially simply understanding every part instantaneously. It is understanding how to ask the query, and the way to implement the reply.
Now, a programmer would possibly have the opportunity to rapidly whip a script into existence since that’s the vast majority of what they do. Web builders alternatively are a type of jack of all trades. We do design, coding/scripting, databasing, and extra.
Few individuals simply “know” all these things.
The level is that this: Don’t let not understanding a factor cease you. Our job as net builders is just to uncover and implement the fitting resolution. We may not all the time get it proper on the primary attempt, however persistence is how we evolve to change into nice at what we do in any facet of life.
What I settled on on this case was a customized search devoted to looking out by means of PDF information hosted on the server. It was difficult, as a result of WordPress doesn’t search outdoors of the database by default.
Since the PDF information have been merely uploaded and never hooked up to pages or posts they weren’t referenced within the database. To compound the difficulty, as soon as I had the customized search working, the outcomes weren’t displayed throughout the WordPress templating system.
This meant I had to create one other script that referred to as the WordPress templating system for the outcomes web page.
Once completed, this labored properly for a number of years. Eventually, somebody developed a plugin that allowed information to be uploaded then listed by the database — which is how the elements search works at the moment. This additionally allowed for elements to now be searched utilizing the primary WordPress search perform with simply a couple of minor tweaks.
Moving the distributor map from HTML to WordPress
Being that WIWA USA is a grasp distributor, it is smart that they might listing the opposite distributors on their web site. WIWA USA at the moment sits at primary in a Google seek for the model identify “WIWA,” even above their guardian firm.
At least for US-based searches. This is necessary to point out, as a result of the distributor map makes it potential for contractors to discover their closest WIWA tools distributor.
When researching one of the best ways to implement this characteristic, I rapidly discovered no plugins existed particularly for this sort of implementation. I did, nevertheless, discover a plugin that might do most of what we would have liked. With simply a few minor workarounds I used to be ready to bend the desire of this plugin to do my bidding.
To be truthful, the plugin used was a paid plugin, and the developer has since added the performance that might have made this work “out of the box.”
While this plugin met the necessity for a few years, the listings weren’t searchable from the primary WordPress search. An individual had to truly click on the hyperlink to the distributor map and use a number of filters to discover their closest distributor.
This was good, however for completeness the characteristic was up to date utilizing a completely different plugin — one that’s able to retrieving one’s location with the clicking of a button and displaying a map with markers and their listings inside a specified radius.
This was completed by creating customized put up varieties then geotagging the put up.
Creating a put up for every distributor meant they every received their very own web page as an alternative of simply inclusion in a listing. Since they’re customized put up varieties it additionally means they are often included in the primary WordPress search capabilities. If a contractor is aware of the identify of a distributor they’ll simply sort the identify in the primary search to discover that itemizing.
The distributor map is such an integral characteristic of the WIWA USA web site expertise that it’s search kind is situated on the house web page. It options the power to auto detect location, search inside a radius, and to filter outcomes to solely the United States, Canada or Mexico.
Individual posts for one-off performance
Training movies, brochures, manuals, and product movies all shared a frequent trait. For a number of years, every sort of documentation had its personal web page consisting of a grid of static content material. They have been principally arrange similar to the unique HTML pages with some design modifications.
While they regarded nicer there have been a few shortcomings.
In the early years this labored OK, however as extra content material was added over time it started to sluggish the pages down. While the pages themselves could possibly be discovered by way of WordPress search, the person gadgets couldn’t be.
It turned clear that having every merchandise individually searchable could be of nice profit. For instance, there could be a single product that had a product catalogue itemizing, a brochure, a handbook or two, and several other coaching movies.
Wouldn’t or not it’s good if a consumer might merely sort within the product identify or mannequin and be offered with the entire content material accessible for that product?
Darn Skippy, it might!
Not solely would this make all of that content material simpler to discover, however pace up the archive pages as properly.
One of one of the best examples of that is the product movies which are literally hosted on YouTube. Without entering into a ton of technical element, video snippets/embeds have to load individually, which isn’t too unhealthy whether it is simply a single video.
Add a number of movies on a single web page and issues can begin getting a little bushy with load instances.
The resolution was to create particular person posts for every video. Some WordPress themes present put up codecs, and on this case a video put up would output a thumbnail for the video within the put up archives as an alternative of a video snippet.
This makes the put up archives and indexes load a lot sooner since we’re now working with photographs within the type of thumbnails as an alternative of video embeds.
Similarly the product brochures and manuals, that are all in PDF format, had a grid of photographs from the PDF information all organized in a grid, and all on a single web page. By changing every of these to their very own put up, we are actually coping with thumbnails for the archive pages as an alternative of standard sized photographs — which helps with load instances.
There’s additionally the additional advantage of utilizing classes which all have their very own particular person archives as an alternative of cramming every part into a single web page. Again, serving to with load instances and total group.
Closing ideas on shifting a website from HTML to WordPress
This web site had a few different technical challenges, however what I’ve highlighted listed here are the bread and butter of the operation. Many of the concepts WIWA got here up with I wasn’t certain would truly be potential.
At least for me, being a one-man operation.
What I’ve realized is “let me take a look” will get you off the hook while you’re unsure. You can not let the worry of failure cease you from attempting on this business. In 2021, budding builders have it fairly good compared to once I began.
There is simply an awesome quantity of knowledge and sources freely accessible for net builders on-line lately.
What I discovered after getting onboard with WordPress is that understanding these items simply made me a higher developer.
It helped me flip this static web site into one thing I believe, and I hope WIWA thinks is really nice. Being ready to one-click-install a WordPress website is one factor. Being ready to manipulate WordPress, plugins, types, themes, and capabilities is a completely completely different beast.
Yes, anybody can do it, however with some persistence and ingenuity you may flip a good web site into a nice web site.
Godaddy Shopping Cart – Case Study: Moving a Site from HTML to WordPress