Easily Turn A Static HTML Site Into A WordPress Theme With Theme Matcher

Despite WordPress powering over 20% of the web, there are still a lot of static websites that could use a dynamic upgrade. In order for a static website to take advantage of WordPress it requires two things: A WordPress installation and a WordPress theme that looks like the static HTML site. Thanks to a new website called Theme Matcher, creating a WordPress theme from a static website is easy.

How It Works Using The Example Theme

Theme Matcher, created by Patrick Moody, takes static websites and automatically generates WordPress themes using Bones. Bones is a minimalistic theme that is great to use as a foundation. To see how this site works, visit Themematcher.com and use http://themematcher.com/example/ as the example URL. Follow the directions as described in the video. If you have difficulty finding the right spot to select as content, just select an area, then use the plus or minus buttons to add or subtract elements that will make up the content portion of the theme.

Theme Catcher Generator

Next, select the area you want for the sidebar which will usually be to the left, or right of the content. If you feel adventurous, you can select an area outside of the content to use as the sidebar. You just might not be happy with the results. Alternatively, you can select an option to not have a sidebar via a link at the top of the website. After selecting the sidebar location, you can delete areas or preview the theme. When previewing the theme, experienced developers will be able to tell right away which parts are WordPress while the rest of the design remains static.

Patrick Moody Answers A Few Questions

Why did you choose the Bones theme to power ThemeMatcher.com?
Bones is an incredible starter theme that has already been highly refined and optimized by over 60 contributors over the course of several years. It’s a great foundation that is fast, lightweight, and has very clean code. These are all benefits that are easy to miss on ‘custom’ projects, but are incorporated into every Theme Matcher conversion.

Who are you targeting with this service?

  • WordPress developers saving time and getting a head start on client projects, and then customizing the theme further.
  • Non-technical webmasters wanting to add a WordPress blog to an existing site.
  • Designers that create a HTML template/mockup, then fast-track it into a WordPress theme with ease.
  • Freelancers migrating sites to WordPress from another system

Nice Way To Save Time

While the above is an excellent example of how Theme Matcher can help developers save time, there are a number of other uses for the site. Using Theme Matcher won’t take care of 100% of the work when transitioning a static site into a WordPress theme, but it gets you at least two-thirds of the way there.

16

16 responses to “Easily Turn A Static HTML Site Into A WordPress Theme With Theme Matcher”

  1. I def like the idea. I think this would be good for extremely novice users who want to maybe learn how to make their own WordPress themes. In my opinion though, nothing beats manually creating your own theme. I think you have more control that way. Great concept. i think I’ll bookmark it and play with it a little and see just exactly what it can do. Thanks for the post and the link ;)

  2. This is pretty smart. I’m a fan of the Bones framework and I can see this being a great tool for at least previewing what a WordPress site might look like, or getting started.

    I’m with Thomas on this one. Nothing beats manually creating your own theme. Unfortunately most beginners don’t have the finances to hire someone like us.

  3. It’s important to know that the only things that will turn into WordPress on the static site are those regions you select during the transition. It doesn’t turn the entire HTML website into a WordPress theme. Just the two necessary bits. The content and the sidebar. Everything else remains static.

  4. OMG! That’s totally awesome. Hahaha.

    I’ve never thought of something like that being possible, but it makes complete sense.

    It’s not going to work on complex sites and it will be glitchy in general I imagine, but it should be able to crudely bash out the theme structure in a usable state, particularly for simple themes. It worked fairly well on my personal blog.

  5. I’m one of the non-technical webmasters referred to in Patrick’s “who is this for” list.

    It kind of worked, but our one page static web site came out looking like a blog post and none of the original text was in it. I stopped at Preview as I didn’t want to change the live page.

    Is this the only way to use this? I’d hoped to change the page from HTML to a WordPress theme so I could better handle additions/changes.

    Thanks,

    Linda

  6. Thanks for getting back to me so quickly, Ryan. It could be an iframe issue as I have only a rudimentary knowledge of what that is. I noticed when I used the + to expand the selection, it expanded to take in the whole page. Not sure how to try with the “raw HTML” but thanks for checking that out for me.

    I understand what you mean about the page looking like a blog out of the box, thanks to your explanation.

    The plugin really sounded perfect for me because I’ve been trying to find a suitable theme so I can turn the current “placeholder” HTML site into a fully functional WordPress one.

    Here’s the big question: can I see how it will look as a static page before I make it “live”. The guy who created the HTML page for us is no longer available so I’d hate to lose it or mess it up, even if it isn’t in WordPress. Sorry for so many questions!

    Linda

  7. Thanks, Ryan. I do realize I need a local development environment, which we don’t have. Your suggestion about another site to try it out on is a great idea and I’ll try that. Once I have, I’ll post back with how we do.

    Appreciate your suggestions and really appreciate the app and its possibilities.

    Linda

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.