In the beginning (of the web) all websites were made with nothing but text and static HTML. Now though, over 20 years later, the web is a much different place. Websites are much more complex. They provide richer and more enjoyable experiences for site creators and visitors alike.
This is in large part thanks to open source projects like WordPress. Which, over the last ten years or so, has succeeded in its core mission to democratize online publishing (and a lot more in the process) so that anyone with a WordPress install and the right theme/plugins can have a modern website with advanced design and functionality. No codingβnot even HTML!βrequired.
This is why to avid WordPress users like myself, itβs almost hard to believe that in 2018 someone might still be operating a static HTML website instead of a WordPress website with a theme and plugins. But the fact is there are still a significant amount of active HTML only sites out there. (Or HTML with a bit of CSS.)
Granted, these site owners may have good reasons for not upgrading or converting. Maybe their siteΒ content never changes and the simple formatting and design already in place is serviceable? Or maybe itβs less of a hassle than worrying about keeping a WordPress site updated? Both are valid reasons (among others). Prime examples of, βDonβt fix what isnβt broken.β
However, I have a feeling that these might not be the primary reason some (perhaps many) havenβt made the leap. The most obvious one being that they simply donβt knowΒ how to convert their HTML site into a WordPress site. Especially without losing content or needing to do excessive formatting on a page by pageΒ basis.
Thankfully, as is often the case with WordPress, there are a number of ways to go about solving this problem. Iβve compiled some options below.
Subscribe To Our Youtube Channel
Your Options for Converting a Static HTML site to a WordPress site
How you choose to convert your static HTML site into a WordPress site will no doubt depend upon your personal preference, desired time/monetary investment, and skill level with code. You will have to be the one to decide which is best for you, but with the summaries below you should be able to decide quickly and skip straight to the most relevant information in this post for your specific situation.
There are three main options:
1. Manually create a WordPress theme based on your current static HTML site.
This will require you to get into your code. You will have to access your current site directory via FTP and use your existing code as a starting point. From there you will need to create the necessary files for a WordPress theme and copy bits of code from the WordPress codex. This is fairly simple and straight forward if you have some experience with HTML, CSS, and a bit of PHP.
2. Install a pre-made theme and simply migrate your content.
This is probably the best option at the intersection of simplicity and value. Assuming you already have hosting for your current website, you will only need to spend money if you choose to purchase a premium theme. The plugin we will use for importing content is freely available in the official WordPress Plugin Repository.
3. Paying to have an HTML to WordPress conversion service re-create your site.
This is the easiest solution, as it doesnβt require you to do much of anything. However it will not do much for familiarizing you with WordPress and the cost will vary depending on who you choose to hire. I wonβt be covering this option in the sections below because if this is the route you are interested in, you can simply do a quick search for service providers and they will take care of the rest.
Preparing for HTML to WordPressΒ Conversion
No matter which route you decide to take below, there are a few things you will want to do before diving in.
The first is choosing a hosting plan. Youβll want to look over the options that are out there and decide on a package that best fits your needs. Or perhaps youβd like to create a local WordPress installation instead? You can always migrate it to a hosting service later.
Once youβve chosen, you will need to install WordPress and log into WP Admin. This is the point at which our two possible paths divide.
Manually Converting Your Static HTML Site to WordPress
If your goal is to not only get your content from your static HTML site into WordPress but also duplicate your current design, this means you will need to create your own custom theme. Thankfully, that is not as scary as it might sound at first. It only involves creating a few folders and files, a bit of copy and paste, and then uploading the result.
Youβre going to need a code editor such as Sublime or Notepad++ and access to both your HTML siteβs directory and your new WordPress installβs directory.
Step 1: Create a New Theme Folder and Necessary Files
On your desktop, create a new folder to hold your theme files. Name it whatever youβd like your theme to be named.
Next, create a few files (which all go in your new theme folder) in your code editor. Donβt do anything to them just yet. Just leave them open for further editing.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Step 2: Copy Existing CSS Into New Stylesheet
If youβre looking to duplicate a design, this probably means you have at least some CSS that you want to save. So the first file youβre going to want to edit is your Style.css file.
To begin, add the following to the top of your file.
/* Theme Name: Replace with your Theme's name. Theme URI: Your Theme's URI Description: A brief description. Version: 1.0 Author: You Author URI: Your website address. */
After this section simply paste your existing CSS below. Save and close the file.
Step 3: SeparateΒ Your Current HTML
Before we get into step three, let me give you a quick note on how WordPress works. WordPress uses PHP to call and retrieve pieces ofΒ data from its underlying database. Each file that weβre using in this little tutorial is designed to tell WordPress which part of your site content is to be displayed and where.
So when I say we are going to βchop upβ your existing HTML, what weβre actually doing is simply cutting and pasting parts of your existing code into the different files weβve just created, so that WordPress will know where to display them.
Here we go.
First, open your current siteβsΒ index.html file. Highlight everything from the top of the file to the openingΒ div class=βmainβ tag. Copy and paste this section into yourΒ header.php file, save and close.
Second, go back to yourΒ index.html file. Highlight theΒ aside class=βsidebarβ element and everything inside it. Copy and paste this section into yourΒ sidebar.php file, save and close.
Third, in yourΒ index.htmlΒ select everything after your sidebar and copy and paste it into yourΒ footer.php file, save and close.
Finally, in yourΒ index.html file, select everything thatβs left (this should be the main content section) and paste it into yourΒ index.php file. Save, but do not close yet.
YouΒ can close yourΒ index.html file now however and move on to the final steps. Almost done!
Step 4: FinalizeΒ Your Index.php File
In order to finalize your new themeβsΒ index.php file you need to make sure it can call up the other section (besides the main content) that are housed in the other files youβve created. Or in other words, put back together the elements we just βchopped upβ.
At the very top of yourΒ index.php file, place the following line of php.
<?php get_header(); ?>
Then, at the very bottom of yourΒ index.php file, place these lines of php.
<?php get_sidebar(); ?> <?php get_footer(); ?>
And finally, we have to add whatβs called The Loop. This is the primary bit of php that WordPress uses to display your post content to visitors. So the final step in creating your new themeβsΒ index.php file is adding the code below within the content section.
<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="post-header"> <div class="date"><?php the_time( 'M j y' ); ?></div> <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <div class="author"><?php the_author(); ?></div> </div><!--end post header--> <div class="entry clear"> <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?> </div> <!--end entry--> <div class="post-footer"> <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </div><!--end post footer--> </div><!--end post--> <?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <div class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </div><!--end navigation--> <?php else : ?> <?php endif; ?>
Save yourΒ index.php and close. Youβre theme is now finished! All thatβs left is to upload it to your WordPress website.
Step 5: Upload Your New Theme
Now that youβve created your theme files and have them all stored within your new theme folder, youβre going to need to access your new WordPress installβs directory.
Place your new theme folder insideΒ /wp-content/themes/. Then navigate back toΒ WP Admin > Appearance > Themes and your newly created theme should appear there. Go ahead and activate it!
All thatβs left to do at this point is populate your new WordPress website with your old siteβs content. You may want to also install an under-construction plugin as you clean up your old siteβs content and prepare your new WordPress website. Follow along with the section below (skipping over the part about using a pre-made theme) to see how that is done.
Using a Pre-Made WordPress Theme and Importing HTML Content
If the steps above seem too intensive or time consuming to you then rest assured, there is another way. Instead of converting whatever design you happen to be working with right now into a WordPress theme, you can take advantage of any one of the thousands of themes available in the broader WordPress marketplace.
There are free WordPress themes and there are premium WordPress themes, such as Divi. Before deciding which is best for you, you may want to read up on which themes are designed to cater to your needsΒ and browse by theme category here at Elegant Themes and elsewhere.
Once youβve chosen a theme you like (and have its zipped file package downloaded) youβll want to head back to WP Admin > Appearance > Themes > Add New and install/activate your new WordPress theme.
Once this is done, you will have a new WordPress website and themeβbut little else. When you preview your site, it will be empty of content and probably look sort of boring. Thatβs ok, because next we are going to import your old siteβs content.
In WP Admin go to Plugins > Add New and search for a plugin called HTML Import 2Β by Stephanie Leary. Once this plugin is installed and activated, follow its handy user guide to import your entire directory of HTML pages. Complete with images!
After this you will have all of your old content living on WordPress and formatted by your new theme. Or, if you created your own theme above, your site should pretty much look like it did beforeβjust running on WordPress.
In Conclusion
If youβve used this post as a guide for migrating your website onto WordPress then youβve just joined one of the largest open source communities in the world. Welcome! Itβs a fun place with lots of developers, designers, bloggers, DIYers, and moreβall building, playing, and creating with WordPress and WordPress themes/plugins.
If youβve βcaught the WordPress bugβ the official WordPress.org website is chock full of useful themes, plugins, and other resources. If youβd like to further tweak your theme files, explore the Codex for seemingly endless tips, tricks, and variations.
And of course we hope youβll stick around to chat in the comments below and subscribe for more blog posts in the future.
Article Thumbnail via Max Griboedov / shutterstock.com
The plugin page for “HTML Import 2” now says “This plugin hasnβt been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress” and “Last updated: 6 years ago”. It failed for me, giving me the “Fatal error…” message when I tried to run the import. Perhaps there are other such plugins that are more up to date?
If you convert your static HTML site to WordPress using the option where you take bits and pieces from the WP codex, including your existing css code, how does new pages/content get the CSS applied to those new page elements using either the DIVI builder or the WP editor? Or is that beyond the scope of the article (I hope not, but understand if it is)?
So if you use the method I described above to create your own WordPress theme, then the CSS in your stylesheet will automatically be applied to all new posts or pages. You can then install the Divi Builder Plugin and use it to create more varied layouts with a lot more design options. Alternatively, you can simply use the Divi Theme without creating your own theme and re-build your old pages altogether. This may sound like a huge time commitment, and it likely is, but I’m guessing that a lot of people who decide to make the switch from HTML to WordPress are probably due a big overhaul anyways. So it could well be worth it.
On a practical note, if you’re wondering how to approach that. You could do the method I’ve walked you through above to convert your website from HTML to WordPress. To your visitors nothing will change and adding content will be easier and still in-line with your old design. Then, on a separate WordPress development site you could use Divi to re-design your website from the ground up. Hosts like WPEngine and Flywheel both have tools that help you do that.
thanks for the guide, it helped me a lot!
Just wondering if this plugin still works with latest WP???
Why would you recommend a plugin that has this warning in the repository?
“This plugin hasnβt been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.”
Hi,
when we should use a starter theme like underscore or bones? or go building everything from scratch? appreciate your reply. thanks
Personally I’ve never done the process above with a starter theme instead of simply turning my old website into it’s own theme as shown. However, if you’re someone familiar enough with a starter theme to create your own unique WordPress themes from it, I’m sure it’s no big deal to adapt these instructions to use your starter theme of choice.
Very nice!
Actually to be honest it should be better to get just the opposite, namely convert WordPress to html website.
I’ve some old html websites totally on top of SERPs and absolutely secure from hacking.
There are certainly some benefits to going the other direction. Last I checked there’s a handful of services out there doing just that.
I have a Funeral website that I have converted the main pages to a WP site, but I have over 3000 Obits to convert – each Obit consists of a single page with an image and some text. Other than copy and paste into a post, is there a an easy way to turn these pages into a word press page.
Thanks.
Services like CMS2CMS specialize in this. Personally, I’ve had trouble finding a good automated service. No matter what I’ve done with my own projects like this no solution has been close to 100% automated. You’ll always have some manual tweaking to do. Even if it’s just some minor formatting. But at 3,000 pages even minor tweaks can be a big undertaking. My recommendation would be to do as much as you can with automation/services. Then, figure out the exact formatting you want for your obit pages or posts. Create a style guide and/or steps someone else could follow to update the rest of your obits. Then, hire someone (like a virtual assistant) at a low hourly wage to finish things off. You can track progress in a spreadsheet and have them work on it as much or as little as you can afford each week. Not ideal, but that’s the best solution I’ve found so far.
Brilliant – I just checked out CMS2CMS – cost is about $99 going to give it a try. thanks for the pointer.
Hey, thank you for this. But how to redirect all old HTML urls to new WP urls?? Is there any simple and best option for this. I have almost 1000 pages on my old html website.
I think using the plugin I recommended above (https://wordpress.org/plugins/import-html-pages/) is your best bet.
thanks a lot for the information, this is very useful for me
really a good tutorial….
but i still have some problems to do this.
What about “posts” and “pages”?
Thanks for your guidance, it’s really helpful for me.
Very informative here and a great article on how to convert from a HTML website to a Content Management System called WordPress.
If you have your current HTML website optimised with SEO make sure to keep your URL link structure for each page the same that way the links are crawled successfully by Google.
Not working,
Not a good step
Great article!
I’m going through this hell right now. I’m converting a 10-year-old membership-based graphics site, all in HTML to a WordPress blog. I don’t want to keep the old design, so I started fresh. After weeks of work, I have that part of the project sorted out at least.
But the biggest problem is having to migrate the massive amount of content, which involves copying and pasting data from the old pages to posts. After I do that, I have to manually go through each post and weed out the old HTML.
As I’m having to create posts for over 1,000 product pages. It’s a slow, slow process, downright maddening. I’ve almost abandoned the project more than once.
Why didn’t I do this earlier? Because I was unfamiliar with CSS, and what I had worked. I was so busy designing my graphics that I didn’t want to take time away to undertake such a massive job.
Then, this summer, following Google’s latest algorithm change, I quit getting traffic, because the site is no longer mobile friendly. So for me, making this change could mean saving my online business..
Great article and very helpful. But onething, how to make this theme with wordpress post? means, some html template’s has post section. i wanna make this section with wordpress post. is it possible, if yes, then how?
Hello, recently I also converted my site from HTML to WordPress. I used a bit alternative way, with the help CMS2CMS migration service, they’ve done good job. though I find this article to be also a very useful one. Nice pieces of advice, thanks.
i have converted the home page.. but how about the other page.. like my team page which has its own design.. i noticed WordPress tags doesn’t work on it.. I dont want to recreate a team page from inside wordpress.. i just want the team page converted.. is there any way?
Hi I would like to change my static website to wordpress site. Now my website seo are healthy. I know it is possible to redirect existing URL to new URL.I am having small doubt. How to do the same for images and downloads links? Can anyone clarify it? Thanks in advance.
After having my blog (wordpress) hacked I swore never to use dynamic CMS again. I’m too lazy to post updates anyway…
But if I REALLY needed a blog – I would rather use static blog generator like “jekyll” or “octopress”.
One thing to really keep in mind when converting html sites to wordpress are the URLS. If you are ranking with a URL that has .html at the end, then you HAVE to make sure you are redirecting that .html URL to your new wordpress.
If don’t do some kind of redirect, all your hard worked for rankings will vanish!
hi, does this work for non blog style wordpress sites? looking to convert our html template into wordpress so how does the main content added in back end of wordpress as pages end up showing on the front end?
thank you, very helpful, from the few articles I’ve read, this is the most easily understood.
If i convert my html site to wordpress site, will it impact on my site’s ranking?
I think that depends on how (if at all) you alter your link structures.
That and how you SEO your new site.
This may sound dumb but in your explaination I am not using “main” right after the body tag but “container” like this;
Should I just replace in your instructions the div class container for main?
I guess I can just try that or go into the CSS and change the name from container to main…duh!
Thanks
Just bursting in…
If you copy your website to a local store, you can change the HTML as you like because it is going to be transferred so no real browser will ever try to display the changes that you are making.
Good luck!
LOVED IT! I have found many HTML based themes that I would LOVE to convert to WordPress themes, but have never really known how. I started learning a few months ago and have done 7 themes so far. It was an article similar to this one that finally made me get off my but and take the plunge!
I am trying for a long time to convert my website into wordpress. Unfortunately it is not just a simple HTML page, it is in another platform. I asked a freelancer if he could do it but unfortunately he told me that it was not so easy, and it would be better to upload a wordpress theme instead of the old one. So I keep searching because I really like my template.
If you are serious about doing the conversion, check out http://HeadwayThemes.com – not really a theme, but a framework in which you build your own theme via drag-and-drop. Reminds me a little of Divi, but with virtually unlimited control over exactly what goes where and how it looks. Not nearly as user-friendly as Divi, though! I’m really struggling with it, trying to make my first site from the ground up, but it is looking good so far.
I just renewed my Elegant Themes membership to lifetime – for pre-made themes, they are the best I’ve seen, although they do have some quirks. Although I want to get good at using the Headway framework, most of the time I just want to populate a good pre-made theme and get on with life.
I want to convert this html site to wordpress. The concern I have is that it has several affliate plugins that pull data via cron jobs from the affiliated sites.
Will the html to wp converter plugins that are mentioned here be do this or is there a special method I have to use?
this is the site
firstvacationsearch.com
Thank you for this excellent post. I love you guys – for things like Divi and Monarch as well as for your blog! This article popped up in my inbox exactly at the right moment, as I am about to migrate my old sailing website (http://cocodemer.de) to WordPress. Very informative. π
Sure WordPress brings advanced web design to non-coders, but security-wise it is a nightmare. Bots that steal your bandwidth and hackers and spammers that are always attempting to penetrate your site, and the vulnerabilities attached to poorly designed themes and plugins. That’s why many sites prefer to stick with vanilla html/css.
Hmm.. Many sites prefer to stick to vanilla html/css because thatβs what they want and need.
In other words, donβt for one minute believe that just because your site is built on html/css only that your server and information is safe from hackers and the likes.
Itβs like the old saying “Iβm on a Mac Iβm safe from viruses”β¦
Please stop spreading FUD.
Thank you
Security is definitely one of WordPress’ biggest issues. However, I think there are an equal number of quality tools/services for combatting the security risk to make it worthwhile. In the end what you get is a much broader range of possibilities for how you can grow and evolve you website.
Really an eye opener article on how to convert from HTML sites to WordPress. I love this article. Great article.
A few other things you will want to also do when migrating a site from static HTML to a wordpress site:
1) make their URLs more search friendly in the directory structure by using the %postname% functions.
2) Redirect from older URLs. You can do this with a plugin, or simply place the redirect information for all of the old URLs on the domain, pointing to the new wordpress search-friendly URLs in the .htaccess document. This way visitors with old bookmarks won’t just receive 404 errors if you’ve upgraded the URL structure.
3) Install a mobile theme like HandHeld so that they website owner now has better viewing on mobile devices.
Can you further explain #2 in your list? I am not a programmer or IT professional so it takes me a little longer to get it this “redirect” stuff π I am using WP with Divi.
Also, I installed WordPress in a folder while we are in the development stage. But before we go live, I want to change that and make the URL not have /wordpress/, (at least on the home page).
To get rid of the “wordpress/” from url, simply go to
control panel ==> setting ==> general
and change ONLY the site url.
Thanks for the useful information!
This plugin give you the oportunity to do this fast. “HTML To WordPress Converter “. Here the link: http://codecanyon.net/item/html-to-wordpress-converter/5947287
Cheers.
This is an excelent information.
thank you.
regards
When I read this, the “oh, that’s how it’s put together!” light bulb suddenly went off for me. This is probably the most useful post I’ve read in the last year – thank you.
Great article, but how about the other way around? Believe it or not, some clients want websites that don’t do much other than sit around as information pages. We all have clients who don’t do much with their websites. For these sorts of sites, it’s best to rapidly build using wordpress and say “Divi theme” and then convert the whole thing to static HTML. This way you don’t have to use up database resources, schedule maintenance and updates, and have better performance on shared hosting plans. Basically set it and forget it.
There are some plugins out there that do this such as “Really Static” and it would be great to hear from other devs on how they go about going from wordpress site to static HTML site. That is, if this is a topic of interest to anyone.
Interesting. Honestly I didn’t think of that. Though, wouldn’t it be close to just as easy if you simply managed these clients via a service such as ManageWP? I’m assuming you are charging them management fees, which would more than cover your costs. It would also mean that if you ever did need to change something or update their design, you could just jump back into Divi and make the changes. Regardless, you’re right. I think going the other way is the topic of another post. I’ll suggest it for the future.
I think that WordPress to static site is a (~simple) 3 steps:
1. Website copier to local storage.
2. Upload the result to some hosting service
3. Configure/replace old site with new
Clearly it will be faster (no DB, etc…), easy to maintain: no upgrades. But also no seo improvement and modification are made by developer and will be relatively expensive.
I never done that. Not expecting to do it.
Finally, if this is what the client want – so why not?
I agree with Jaime and feel strongly that static files are useful in many situations. Static sites are often much faster and more secure than data-driven sites. Static sales pages, for example, are gaining popularity lately. An HTML page, some CSS, perhaps some jQuery, and a PayPal button (or other “pay now” option) and you’re good. Why complicate things?
I agree that there are still an awful lot of clients just wanting ‘an image website’. Also some can be persuaded to have some interactivity eg sliding panels.
As a designer what I would also like is advice on how to use WP to design the site, and then strip it to the bare bones to get faster load times.
True there are articles around and plugins to make the site static, that do a good job, but for a non programmer, details on how to go about this would be a great ElegantThemes article. π
This is perfect. We’re in business of converting old html sites to wordpress! We usually use divi or another framework to migrate, but we’re looking into building our own themes based off of the html site now
Okay John and all You want a trick or should I say a hack Then I give you this Monarch plugin hack…
http://s91585912.onlinehome.us/howididit/whatidid2.html
OP3N and Derek over in the Monarch 1.2 β Now With More Stats, Smarter Triggers And Other Great New Features post was looking for an email button so i attempted it before it becomes a full needed feature. ALMOST works. Do not know what needs changing.
Hey Richard, great effort on trying to “hack” Monarch. It looks like your almost there with a regular “mailto:” command. This could be a great temporary way to use a mailto option.
I’d like the coding wizards at Elegant to design a feature like this:
It would be even better if a mail-button didn’t call for a mail application, but use a pop-up box (just like the other buttons) instead . This way you won’t have visitors being dragged away from your web-page.
But thanks again for the effort!
Hey Richard, looks like you have PHP embedded within your PHP at line 2555. At that line, you are already in PHP, but you have .
I suspect you want 2555 to read something like:
$link = sprint(‘mailto:?subject=’ . urlencode(get_the_title()),
I haven’t tested this, but this would at least solve the PHP embedded within PHP problem! π
Not a 100% fix, but a start.
I also wanted to throw in the link to the post in the body as well along with extra text.
Not a 100% fix though, butt a good improvement though. I was also going to throw in the link to the blog post in the body as well.
You can do a quick test on your end and make changes to the code.
nice article but really missing customer spotlight… havent got any in a while.. need some inspiration
Not nice article need good clarification idea maybe some one not understand and me also not understand ,
yeah and some tips and tricks