In order to make content management and publishing easy on the web, static HTML website owners are flocking in droves to brilliant, feature packed and dynamic content management systems and platforms like WordPress. The free open source software lets you build, customize and go live with a fully fledged website without so much as glance at a code.
In that context, it’s easy to want a WordPress website of your own. But when you already have a static HTML website and are not sure on how to proceed with migrating the entire thing to WordPress, you’ll need some help. This post is a general guide to HTML to WordPress migration to give you a basic idea of how it’s done.
html to wordpress
1. Web Host Requirements
Before you make the switch, make sure to read up on the two types of WordPress: The Managed .com version as well as the Self Hosted .org version. Generally, the major difference is that the self-hosted WordPress website will give you significantly more control over design and feature customization.
If you are going with WordPress.org (completely free and self-hosted), you would need to get your website hosted (on a server) yourself. Considering you already have a domain name, you will need to take note of various hosting types (shared, VPS, dedicated, etc.) and consider the various limitations of plans in terms of bandwidth, storage, allowed visitors, download limits, and so on. WordPress websites require minimum PHP 5.6 and MySQL 5.6 servers.
web host
2. Install WordPress
Now that the hosting concerns are straightened out, you need to download the CMS from <a href=”https://wordpress.org/download/”>WordPress download page</a>. Download and install the system as directed in the WordPress Codex ‘famous 5-minute install’ and login to your website back end, aka The WordPress admin dashboard.
If you want to transfer all your previous site’s content, data as well as the design, this is the point where you’ll the services of an HTML to WordPress theme conversion company to create you a WP theme exactly mimicking your previous site design. Here’s how they do it:
install wordpress
3. New Theme Directory
A new theme folder (aka directory) is created. This folder will be named after the theme. So let’s say our theme is called ‘Erstwhile’ (I like Dickens, sue me), so the folder will be name Erstwhile (I also hate subtlety apparently). This folder houses the following code files (created with a code editor or text editor like Notepad++) named as follows: style.css (Style sheet) and all necessary Templates files: Index.php, header.php, footer.php, sidebar.php, archive.php, etc. etc.
4. Creating stylesheet
The previous static HTML website, no matter how bland it was compared to current trendily designed website front ends, must have had some CSS to dictate style and visual presentation of the content. These rules are written in CSS and typically found in the file style.css. The developers copy that CSS from your previous website, add improvements (responsiveness and browser compatibility) and paste it in the WordPress theme folder (Erstwhile).
By WordPress standards, the style sheet ought to start like this, so professional developers will often place this bit at the top of their WordPress themes:
This entire bit is a comment and will help any future developers looking at your theme’s code.
5. Creating Templates
Chopping: It’s not quite as axe-murder-y as it sounds.
The static HTML site has an index.html file which houses the markup of the website. Developers take this markup file and sift through the code, dividing all the HTML into separate parts (corresponding with separate parts of your web page) with different templates. So all HTML beginning from top to div class = “main” will now become your header template, going neatly into header.php template file.
Once all the bits of markup have found their correct places as templates in WordPress themes, the remaining markup is taken up as index.php. This WordPress template file is the ‘boss’ and calls other template files in correct sequence when a page is requested with call functions like:
And so on.
Once all the templates have been called, the index.php calls the Loop, which displays fresh content to visitors and keeps things dynamic.
Once all the files have been created and saved (with correct names), the custom WordPress theme (mimicking previous site design) is ready to go.
The theme is then uploaded to WordPress installation directory in path wp-content/themes and then activated via admin dashboard, where it will be visible. The settings (if your developer gave you any) should be visible in WordPress Customizer and the theme itself is available under Appearance >> Themes
6. Importing Content
Even the developers know how absolutely priceless content really is. This is why WordPress developer Stephanie Leary created the HTML Import 2 plugin to help you import the complete set of content, directories and more from your previous static HTML website to currently active WordPress website.
It may require some adjustments (in terms of images, URLs, etc.) but a developer can sort that pretty easily.
Endnote
That’s how ‘apparently’ easy HTML to WordPress conversion is. Of course, there are nuances I deliberately left out – every website’s markup is different and needs vary depending on the project, so one method can never fit everyone. This is the outline of HTML to WordPress conversion.
The post Complete HTML to WordPress Migration Guide appeared first on Online Shouter.