
# How to convert HTML to WordPress

Today we're announcing a new tool to [convert HTML to WordPress](/html-to-wordpress), Upload a zip file that contains an `index.html`, then use Theme Matcher to turn it into a fully dynamic WordPress theme!

As web developers, designers, or tinkerers, we work on websites locally and dont necessarily have a live URL to use with Theme Matcher. Now you can upload your site without having to worry about hosting a live version first.

This makes it easy to build a site or modify a template, then quickly turn it into a WordPress theme. If the resulting theme needs some changes, just edit your HTML locally and upload a new version!

## How it works

To get started, visit the [HTML to WordPress](/html-to-wordpress) landing page.

![Upload a zip to convert to WordPress](/blog-assets/upload-zip-html.png)

You'll need a zip file on your computer that contains at a minimum, an `index.html` file. This is the page that is used for your WordPress template.

Most websites are going to have accompanying css files, some javascript, and possibly fonts. As long as these are included in the zip and linked from `index.html` with relative links, it should show in the generator exactly the same as it does on your computer.

You can either click the upload button and select your zip file, or just drag and drop it anywhere on the page to upload.

Once Theme Matcher uploads, unzips, and processes your site, you will be taken to the generator step where you can select areas where you want WordPress posts to show.

[Let me know](/contact) how it worked for you! I love to hear feedback about how people are using the tool.


How to convert HTML to WordPress


# Create a WordPress theme from a website

When you're adding WordPress to your site, choosing a theme can be a real sticking point.

You either need to build a custom theme to match your branding or try an find the one from the _millions_ available online.

I want to show you a solution to this problem using Theme Matcher - A tool that lets you use any web page as a template for a brand new WordPress theme.

You take a URL, enter it into Theme Matcher, make a few choices about what kind of theme you need, then you're done! Let me show you how it works.

Today I'll be using this [example site](https://www.themematcher.com/demo-site/index.html). Pretend this is my company website and I've decided to add a WordPress blog. Since WordPress is the largest and most established blogging platform, it's a common choice. Adding a blog is a great way to improve SEO, get more traffic to your site, and engage your audience with updates and new content.

The original site could be plain HTML, php, some other framework - It doesn't matter. The important thing is that my new blog looks like the main site. The branding needs to be consistent and it shouldn't be confusing when moving between the blog and the main site.

So the first step is to choose a nice clean content page to use as the template. Some sites have a different design for the home page, so you might want to consider the "contact" or "about" page of your site for a better template.

## Enter page URL

For this example, we can enter the url `https://www.themematcher.com/demo-site/index.html` straight into [Theme Matcher](https://www.themematcher.com).

![Enter URL into ThemeMatcher.com](/blog-assets/enter-url.png)

## Select content area

On the next page we'll be greeted with a preview of our site and instructions on how to choose a content area. Move the mouse around the page to select the largest area that makes sense. This is the area that will be filled with WordPress posts and widgets in the final theme.

It can be tricky to get the best area, but you can always go back and try again if it doesn't work out.

By slowly moving the mouse to the edge of the title, I can select the biggest possible area.

![Select content area](/blog-assets/select-content.png)

You can imagine how squashed everything would look if we tried to cram the entire blog into the headline area!

Click the area to select it and move to the next step.

## Choosing the sidebar position

A typical WordPress blog has a large content area for posts, and a smaller sidebar with widgets like recent posts, categories, ads, etc.

We can choose to put the sidebar on the left, the right, or none at all and just have the entire area dedicated to blog posts.

![Select sidebar position](/blog-assets/sidebar.png)

## Removing unwanted areas

We've got a great area for content, but sometimes there's some elements on the template page that we do not want to include as part of the blog theme.

![Remove areas](/blog-assets/remove-areas.png)

Click the "remove area" button to start trimming the fat!

Using the same technique as before, you can hover over elements, and click them to remove.

If you scroll down, you'll see some redundant content under the green blog area that we might not want in the theme. Simply click to remove. You can do this as many times as you need.

![Click to remove](/blog-assets/remove-click.png)

When you're done, click the "Create theme" button in the top right to see a preview of your WordPress theme!

## Preview the theme

This is a preview of our theme running on a sample WordPress installation. What you see here is exactly how the theme will look in the wild.

![Click to remove](/blog-assets/preview.png)

Sometimes it's hard to see what changed because the sites are so similar, so here's the difference highlighted more clearly:

![Click to remove](/blog-assets/preview-markup.png)

Everything outside the red boxes should be exactly as on the original site. Menu links will point to the correct locations and be fully integrated.

Just click on the button in the top right to see your download options and enjoy your new theme!


Create a WordPress theme from a website


# Announcing the all new Theme Matcher

In 2012, Theme Matcher was created to solve the problem of getting a WordPress blog to match the branding of it's main site. It was the first service to let you input any URL and produce a custom WordPress theme in just seconds.

Over the years, we've improved the service to handle different edge cases and produce a quality custom WordPress theme.

In April 2018 we launched the 3rd re-write of the system to keep up with the changing world of web development and WordPress. In 2018, WordPress continues to take over the internet and currently powers around [30% of all websites](https://venturebeat.com/2018/03/05/wordpress-now-powers-30-of-websites/), making it a great safe choice for your new blog.

The latest version focuses on code quality. Generated themes follow the latest WordPress best practices for SEO and structure. This means if you are a developer that wants to make further modifications, files are laid out in a logical and organized manner.

If you're not a developer, you'll enjoy the peace of mind that comes with having a fast, secure, optimized, and modern code base.

We love to hear your feedback as that is what continues to improve Theme Matcher over time. Go ahead and [send us an email](/contact) for a quick human reply!


Blog