Change Your HTML Site to WordPress
Here we’ll talk about changing your old static HTML site to WordPress. As with all 101 courses, there’s lots of yummy techie stuff, but I will try to not bore you too much with the fundamentals.
Let’s face it. If you have an HTML site still, they created it in the Stone Age. There have been so many technological advancements since then. One of the main ones is that we live in a software-driven age. There’s software available for this, an app for that, and templates for everything you could ever imagine needing in your online life and web presence.
Why not take advantage of that? Let’s make this easy, let’s just take your old site and walk you through the process.
First, decide how you want to approach changing your site. There are several ways we can accomplish it. You can manually create a new WordPress theme with your existing theme files, you can use a WordPress “child” theme, or last, import your site into a new WordPress theme using a “plugin.” You need to decide which of the three methods will work best for you.
If you want to keep the same look as your old HTML site, this is probably the option you’ll use. It is the most labor-intensive option available to you. Much copy and pasting are going on here! Not to mention, it is the one that will take the most techie/coding know-how.
This option will require that you first manually create your new theme. This requires that you dive into your HTML, CSS, and PHP files and copy/paste these five specific files into your new WordPress theme folder in order for it to have the same look as your old HTML one.
1.Style.css–CSS means cascading style sheet. The style sheet controls the “look” of your site, yes, the entire site. This can save a lot of time and aggravation for you. The type of font, the line spacing, your background colors, the colors of your menus… heck, all the colors on your pages, how your paragraphs indent, what your bullet points look like, and much more.
2.Index.php– This is the bare-naked Miss Thing. It controls the main default theme for your entire site.
3.Header.php–This file controls your logo, site title, subtitle, and usually a menu. It is also the home for your Google Analytics code, Facebook pixel, and certain other scripts that run in the background.
4.Sidebar.php–The sidebar is where all the fun links go to party. This is where anything HTML goes. The only limits are size, space, and widget availability.
5.Footer.php–Footers usually contain a bit of a sitemap. Links to other important areas of your site like copyright notices, privacy policies, and your contact info. It can also contain scripts that run in the background. Even here you are only limited to your imagination and widget availability.
This picture from WP Beginner shows it nicely:
You can copy these files to your desktop and edit them there. You can then upload your HTML site to WordPress via your favorite FTP handler when you’re finished editing them.
One thing to note is that you CAN move your site this way, but its capabilities are limited and you’ll not have all the functions that WordPress offers, such as widget areas and the ability to manipulate your menus from WordPress’ back end.
So just realize, it will function, just not as easy as a full-blown WordPress site.
You can also change your HTML site to WordPress using a child theme. Child themes are called that for a reason. It requires a parent theme to ensure that everything functions as it should. There are some terrific advantages to using a child theme. The parent theme remains intact and all customizations are completed on the child theme.
One advantage to this is that this makes the child theme easily portable. So, switching themes in the future will be much easier and more replicable.
It also allows for updates to the parent theme without disrupting all those cool modifications you did to your child theme.
You’ll save a ton of time since you’re not creating something new, but building on an existing theme.
You don’t like what you’ve done with your child theme? It’s easily turned off and you’re back to the existing parent theme without your customizations.
I recommend starting this process with a folder on your desktop. You could do these on your server via your favorite FTP client, but it’s too easy to make a mistake; you’d be crying in your beer if you deleted or changed something irrecoverably. So, safety first, start on your desktop.
Make your child theme folder. The Standard naming convention is that you use the parent theme name and add -child to it.
You only really need three items for a child theme: the folder itself, a style sheet, and a functions.php file. If you’re not 100% familiar with working with functions.php files, I do not recommend jumping in feet first. Mistakes here CAN crash your site. According to WordPress Codex, functions.php is described as.
You can copy the style sheet from the parent theme and change it to fit your child theme or you can, of course, create a new one or copy the file from your old site. It must contain the header information and any code that will control the look of your theme. For more information on creating your style sheet, go to WordPress.org.
Congratulations! You’ve made a child theme!
Now all you have to do is create a zip file using your zip file program of choice.
Now that you’ve got your zip file ready, you can simply add it like any new theme download.
1.Click on Appearance then Themes and scroll down to add a new theme and click.
2.At the top of the page, next to Add themes is a button that says “upload theme,” click on it.
3.You’ll have to look a little down the screen and it will as you to “browse” for your file. Add your new zip file and click “install now.”
4.Then look for your theme below and activate it.
This is the best way, in my humble opinion, of moving your site. If you’re not married to the idea that your site must look exactly the way it does now, you can set up a fresh, new theme and import all the important stuff!
This choice is the easiest yet. Importing your old HTML site to WordPress is easier than ever. Go into the themes area as explained above and pick a shiny new theme. Set up as you see fit.
Now it’s a matter of finding the right plugin to do the job. WordPress offers free plugins to do the job, of course. One such plugin is HTML Import 2.
I’m going to stop you here for a moment just to stress the importance of MAKING A BACKUP of your site. Actually, both sites, old and new. Whatever you do, DO NOT SKIP THIS STEP. When I was first learning about themes, FTP, and manipulating sites, I arrogantly thought that this wasn’t necessary. I was wrong. I ended up making a horrible mess of a couple of my websites before I finally learned my lesson.
So, you’ve got your plugin, you’ve made your backup, let’s move on.
The easiest way to install the plugin is to go to your Plugin Directory in your new site and search for it by its actual name, HTML Import 2. It may or may not show up in the search since the plugin has not been currently updated. If it doesn’t pop up in the search, just click on the provided link and download it to your computer. You can then upload it to WordPress using the Upload Plugin feature.
Click to add the plugin to your site and click to activate.
Prepare the files from your old site. Go to “settings,” then HTML Import you will see a screen that looks like this:
You will need to go through each screen and tab carefully, filling in the required information to get the best results. Take your time. It is a tedious process, but MUCH easier than the previous methods we’ve discussed.
You will need to know that if your files are too large, a fatal error may occur. This is not an end-of-the-world scenario. It means things will take a little more time.
Break the file into smaller files and try each file again. These errors can still import some data so you could end up with duplicate information. After you finish importing all your files, go back and check, removing any duplicates.
And… there you have it! Your site is converted. Welcome to the Land of WordPress!
There is no such thing as a quick way to accomplish an HTML to WordPress conversion. Just be aware that it will take time and if you can’t or don’t want to do it yourself, hire a professional. You want your site to look great and keep all that data you’ve had before.
It’s definitely a good thing to change your static HTML site over to a CMS for ease of management if nothing else. Static sites are going the way of the dinosaur!
Don’t forget to visit this post! 7-Steps to Improve Your Social Media Marketing
