Converting HTML Layouts into a WordPress Theme

A few companies sell this service, and I looked into it. While conversion and existing layout to a WordPress theme isn’t too hard to create a rudimentary theme that replicates an existing website. Is this a valuable service? Is it going to help the site? Answers withing.

A port of an existing HTML site would have these qualities:

  • Identical or similar layout and markup.
  • Identical URLs (critical for SEO).
  • You can edit the content in WordPress.
  • One or two layouts.

But it would lack the following:

  • Menus that update when you add or remove pages.
  • Configuration options wouldn’t be reflected in the layout.
  • Limited compatibility with some plugins.
  • No bulk import of existing pages.

So, the process of converting an existing website to WordPress, so it looks the same, is considered only the first step to improve the site. The steps of this process would roughly break down into:

  • Reimplementation (the stuff above)
  • Refactoring – breaking out reusable elements and reimplementing with plugins if desired.
  • SEO Improvement – removing legacy metadata and allowing WordPress or plugins to control the SEO and Social Media metadata.
  • Site Structure – use Categories, Taxonomies, and Custom Content Types to create a framework for the documents.
  • Mobile phone performance improvements.

If there’s a redesign with a new appearance, creating a new theme is obvious.

Even if there isn’t a full redesign, you can create a theme, and do some additional work to improve search engine performance.

Partial Results

My first whack at this was to start porting a website I have. It took around 2 hours to get the layout mostly ported. This site required an extension like ACF to implement an attachment feature. I think a full port could have been done in three hours.

A port with the goal of making it grow would require defining Categories, maybe defining a Custom Content Type, and revising the menus, which aren’t really working well. It’s a 2 or 3 day project.

More Work

The site had a single page template, and a couple partials, but I went with a lot of copy-pasting. Page templates took 50 minutes.

Menus were ported so that WordPress could control them, and because this CMS was going to allow some growth, I made the menus link to category archives. I diddled around with categories, which took more time. It took two hours, and it’s not a 100% replica, but close enough. This took a long time, partly because I don’t know the WordPress menu markup, but in the future, I could probably duplicate the menu in an hour.

The menu system porting wasn’t a direct port. The original one linked to pages. The new one links to categories.

I also had to build the theme. This took an hour, because I hadn’t done it before and spent time tweaking it a lot (you could say the same for all these tasks). Building a theme just means rearranging the files, creating a build script, and making it uploadable. It didn’t include making the code and package conform to the WP standards, which would take longer.

Implementing Advanced Custom Fields took 45 minutes, and some of that was to modify the page template.

So the total time spent was nearly 7 hours. I think, with some automation and experience, it could be cut to 4 hours or less.

SEO Fixes

One thing I didn’t do, intentionally, was apply SEO fixes to the theme. Porting a site shouldn’t alter the meta tags or heading information.

Turning a port into a reusable theme, however, requires replacing static content with blog info from the settings. I also used the Yoast theme SEO guidelines and Yoast Heading Structure article as guides to recode the headings, to help search engines index the pages better.

There were also some formatting bugs on the taxonomy/archive pages, so I switched it to use the search results formatting. These templates also needed tweaking to improve SEO.

This took 50 minutes.

Making the Existing Layout Responsive

Making the existing layout responsive took 55 minutes.

There were three pain points with this conversion:

  • First was that the widths at which the layout breaks were nonstandard. The main constraint was the size of the Google Ad.
  • Second was the existing CSS code was Desktop-first, except the template’s CSS used max-width in the media queries, so it looked more mobile-first. It was really neither. I settled on coding the CSS mobile-first.
  • Third was getting the menu worked out. The existing CSS used a trick to set the background, which made modificaitons more difficult.

Porting the Pages

It took nearly two hours. Manually copying even a 15 page site is annoying, but, even worse, this one had a bunch of uploads. When you have uploads, they are attachments to the page, so you can’t simply link to them from the file system.

The total time to port was 9 1/3 hours.

Leave a Reply

Your email address will not be published. Required fields are marked *