HTML to WordPress Conversion Guide and How Much Does it Cost?
Initially, the websites were usually unexciting with HTML static code and text with few interactive features and no frilly effects. Now 20 years later things have changed significantly.
Based on complex programming, building these takes weeks and the makers create feature-packed, more responsive, highly interactive, and better-looking sites. You do not have to write the code as you can instead use the Content Management System (CMS) to deal with codes behind the site. Simply, pick themes to start posting.
One example of such a CMS is WordPress (WP) which millions everywhere use today due to its flexibility and for using this, you do not need any knowledge of coding. Create highly responsive websites using WordPress.
HTML to WordPress conversion is quite popular as it gives users full control of on-site details, access, maintain, and manage the sites easily, gets unique themes, and increases discoverability with SEO.
Table of content:
- What is HTML to WordPress Conversion?
- Why Should You Convert Your Static HTML File to a WordPress Theme?
- What are the Ways to Convert HTML to WordPress?
- How to Manually Convert HTML to a WordPress Theme?
- How to Convert HTML to WordPress Using WordPress Child Theme?
- How to Import Content from HTML to WordPress Using Plugin?
- What are the things to Consider in HTML to WordPress Conversion Cost?
What is HTML to WordPress Conversion?
Collecting your existing data from a static HTML file or site and transforming it into a WordPress theme is called HTML to WordPress conversion.
Static HTML sites do exist with the latest version of markup language HTML5 is powerful and helps to build good sites without the use of CMS. Still, more people now switch to WordPress and convert templates to WordPress themes. The theme controls the feel and looks of WP sites and CMS provides the functionality.
Why Should You Convert Your Static HTML File to a WordPress Theme?
To Manage the Content
Create, edit, organize, and publish content with ease with WordPress. While popular for publishing on the web, you can use this to manage the content on a single computer or intranet.
The users have complete control over the documents, files, display, and design of content. You do not need any knowledge of coding to publish the content with WordPress.
This blogging platform allows users to publish the content they want on the web. More than a blogging platform WordPress facilitates the building and designing of the website to include different types of content.
To Optimize For Search Engines
WordPress is SEO-friendly so crawlers crawl the site to gather required information through pages and posts. This way the search engines can include definite sites within their database.
WordPress has various security features, helping users to optimize the website per the SEO guidelines. This way the site gets a higher ranking in search engines important in the case of business websites. Various plug-ins are available that make the sites more search-friendly.
Help From a Large Community
A vibrant community is behind WordPress that offers support to beginners, guiding them through issues they face. This open-source platform allows users to contribute to the platform and enrich it regularly.
Developers release new updates from time to time so that the users can remain updated for the latest happenings in the WordPress arena. Continuous support available from the ever-growing community ensures that it is a fantastic experience for new users.
What are the Ways to Convert HTML to WordPress?
1. Manual Conversion
This is a highly technical option for those interested and here you take the existing codes using these as the point to start and create WordPress theme files. Those with some coding experience would not find this method too complicated so a degree of PHP, CSS, and HTML knowledge is going to come in handy in this regard.
You would need to do a lot of copying and pasting through the process. The downside of this method is that you have to work with some functional WordPress theme and this does not have the full capabilities of this platform. The website performs its work but you will not manage it completely with WordPress.
2. Using WordPress Child Theme
WordPress Child Theme works as a reasonable and easy method when it comes to monetary investment and effort. You do not need to use the existing site to start the process but ready-made WordPress themes instead.
Adjust the design in a way to resemble the old site. This way you can get the WordPress advantage fully while retaining the look of the old site and there is no need to add WP features later. Instead, build upon existing themes designed for the WordPress platform.
3. Using a Plugin
Users looking to change the current design and not interested in using the existing one can convert an HTML site to a WordPress site with ease. Simply set up the site, install a related theme, and then import the HTML content. This proves to be a painless and quick process.
4. Hiring the Development Agency
This is the easiest option to convert your static HTML file into a WordPress theme. Just find trusted and experienced developers or a WordPress Development Agency and order your HTML to WordPress conversion. In this way, you can focus on your other business activities that are necessary to grow your business.
Additional Read
5 Reasons to Convert HTML Website into WordPress Theme
How to Manually Convert HTML to a WordPress Theme
1. Create a Theme Folder and Basic Files
First, create a theme folder on the desktop just like a directory on the computer. The name can be anything that you might call the theme. Now, go to the code editor, create some text files, and keep these open in the editor as you are going to need these soon.
Create a new theme folder on your theme directory and name it. We’re naming our folder as my-theme. After that, open your code editor and create the following files:
- style.css
- index.php
- header.php
- sidebar.php
- footer.php
2. Copy Existing CSS to the WordPress Style sheet
Prepare WP style sheets and copy the CSS of the old site into this. First, put the header and then copy-paste existing CSS that is from the HTML static website, and save the file in the theme folder before closing this. Now you can move to rest.
/** * Theme Name: My Theme * Author: Me * Author URI: * Description: A development theme, from static HTML to WordPress * Version: 1.0 * License: GNU General Public License v2 or later * License URI: http://www.gnu.org/licenses/gpl-2.0.html */
This code provides information to WordPress that it’s a theme stylesheet header. You can edit the details like the theme name, author and URL, description, etc.
Right after the header, copy and paste your old CSS code into the file. Save and close it.
3. Separate Your Existing HTML
WP usually makes use of PHP for pulling information from the database. Chop up existing HTML into different pieces for the CMS to put these together in a proper way. This means that you have to copy-paste the parts of the HTML document to multiple PHP files. This is just an HTML standard template including a header, then a content area, followed by a sidebar and footer.
WordPress uses PHP to pull information from its database. So, you need to split up your old website’s HTML into different pieces to make sure it can put them together correctly.
If this seems complicated, don’t worry too much, the process is quite straightforward. First, let’s see how our static website and its code look.
<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-US" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-US" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-US" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en-US" class="ie9"><![endif]-->
<!--[if gt IE 9]><html lang="en-US"><![endif]-->
<!--[if !IE]><html lang="en-US"><![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>WordPress Theme</title>
<link rel="stylesheet" media="all" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Assistant|Oswald" rel="stylesheet">
</head>
<body>
<div class="header-bg">
<header role="banner">
<hgroup class="site-name three-quarters left">
<!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
<h1 id="site-title" class="one-half-left">
<a href="https://domain.com/" title="WordPress Theme" rel="home">WordPress Theme</a>
</h1>
<h2 id="site-description">Fiction and Technical Writer</h2>
</hgroup>
<div class="right quarter">
<a class="toggle-nav" href="#">☰</a>
</div> <!-- .right quarter -->
</header><!-- header -->
</div><!-- header-bg-->
<!-- full width navigation menu -->
<nav class="menu main">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="main-nav">
<ul class="menu">
<li class="menu-item"><a href="https://domain.com/">Home</a></li>
<li class="menu-item"><a href="https://domain.com/about-me/">About Me</a></li>
<li class="menu-item"><a href="https://domain.com/books/">Books</a></li>
<li class="menu-item"><a href="https://domain.com/bookclub/">Book Club</a></li>
<li class="menu-item"><a href="https://domain.com/blog/">Blog</a></li>
<li class="menu-item"><a href="https://domain.com/contact/">Contact</a></li>
</ul>
</div>
</nav><!-- .main -->
<div class="main">
<div id="content" class="two-thirds left">
<article class="post">
<h2 class="entry-title">Welcome to This Website</h2>
<section class="entry-content">
<p>This site is comprised of one static HTML file.</p>
<p>You will be able to add more content later via the WordPress admin screens.
<h3>Here's a heading so you can check how it's styled</h3>
<p>And another paragraph underneath.</p>
<p>And a list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>And so on...</li>
</ul>
</section><!-- .entry-content -->
</article><!-- #post-## -->
</div><!-- #content -->
<aside class="sidebar one-third right">
<aside class="widget-area">
<div class="widget-container">
<h3 class="widget-title">Buy My Book</h3>
<p><em>WordPress: Pushing the Limits</em> will help you become a professional WordPress developer.</p>
</div>
</aside>
</aside>
</div><!-- .main -->
<footer>
<div class="fatfooter">
<p>Add footer content here with <a href="#">widget areas</a> - the tutorials will show you how.</p>
</div>
</footer>
</body>
</html>
Now, open your old static website index.html file, we’re going to split that into the newly created WordPress files. (The examples below are our markup).
header.php
Everything from the beginning of your old HTML code up to the main content area goes into this file. The main content area usually expressed with <code><main></code> or <code><div class=”main”></code>.
<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-US" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-US" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-US" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en-US" class="ie9"><![endif]-->
<!--[if gt IE 9]><html lang="en-US"><![endif]-->
<!--[if !IE]><html lang="en-US"><![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>WordPress Theme</title>
<link rel="stylesheet" media="all" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Assistant|Oswald" rel="stylesheet">
<?php wp_head();?>
</head>
<body>
<div class="header-bg">
<header role="banner">
<hgroup class="site-name three-quarters left">
<!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
<h1 id="site-title" class="one-half-left">
<a href="https://domain.com/" title="WordPress Theme" rel="home">WordPress Theme</a>
</h1>
<h2 id="site-description">Fiction and Technical Writer</h2>
</hgroup>
<div class="right quarter">
<a class="toggle-nav" href="#">☰</a>
</div> <!-- .right quarter -->
</header><!-- header -->
</div><!-- header-bg-->
<!-- full width navigation menu -->
<nav class="menu main">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="main-nav">
<ul class="menu">
<li class="menu-item"><a href="https://domain.com/">Home</a></li>
<li class="menu-item"><a href="https://domain.com/about-me/">About Me</a></li>
<li class="menu-item"><a href="https://domain.com/books/">Books</a></li>
<li class="menu-item"><a href="https://domain.com/bookclub/">Book Club</a></li>
<li class="menu-item"><a href="https://domain.com/blog/">Blog</a></li>
<li class="menu-item"><a href="https://domain.com/contact/">Contact</a></li>
</ul>
</div>
</nav><!-- .main -->
sidebar.php
Everything belonging to the section <code><aside> … </aside></code> in your old HTML code, goes into this file. When you finish, save the file.
<aside class="sidebar one-third right">
<aside class="widget-area">
<div class="widget-container">
<h3 class="widget-title">Buy My Book</h3>
<p><em>WordPress: Pushing the Limits</em> will help you become a professional WordPress developer.</p>
</div>
</aside>
</aside>
footer.php
Now, everything up to the end of the file should be the footer information, which goes into this file.
Just before the closing bracket <code></body></code>, add this code <?php wp_footer();?> for the same reason as in header.php. When you finish, save it.
</div><!-- .main -->
<footer>
<div class="fatfooter">
<p>Add footer content here with <a href="#">widget areas</a> - the tutorials will show you how.</p>
</div>
</footer>
<?php wp_footer();?>
</body>
Now you’re done with the old index.html file. You can close it along with other files in your theme folder except for header.php and index.php. They still have some work to do.
4. “WordPressify” Header.php and Index.php
Change call for a style sheet for a header from the HTML to WP format.
In the header, all you need to do is change the style sheet from HTML to WordPress format. Look for an existing link in the <head> section. In my case, it’s something like this:
<link rel="stylesheet" media="all" href="style.css" />
Open your functions.php file and add this line:
function my_theme_enqueue_script() {
wp_enqueue_style( 'theme-css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_script' );
Now, you can save and close the header.php file.
Let’s turn to the index.php file. It should be blank at the moment, so copy and paste these lines of code:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
This code will call for the rest of your WordPress files. You should notice the space between the header and the sidebar. It’s where you’ll add <a href=”https://codex.wordpress.org/The_Loop”>The Loop</a>.
The Loop will process each post for display, and format it according to how the content matches the criteria within The Loop tags. It’s an important aspect to add dynamic content to your WordPress site.
To do so, paste the following code right after
<?php get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
<h2 class="entry-title"><?php the_title(); ?></h2
<?php if ( !is_page() ):?>
<section class="entry-meta">
<p>Posted on <?php the_date();?> by <?php the_author();?></p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Posted under: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?></section>
</article>
<?php endwhile; ?>
5. Create a Screenshot and Upload Theme
It is time to add a theme screenshot along with information from the header of the style sheet. This works as a website preview in the WP backend. Open the existing site, take a screenshot with the preferred method, and add it to the theme folder. After this, you can upload the theme. There are several options to get a new theme to the WP site but all files should be inside the theme folder.
After you finish creating the basic theme, you can upload it to WordPress. All files inside your theme folder must be in the same place. To do that, you can zip them.
Pro Tip: If your website requires visitors to operate and deliver value, you should make it possible for them to register, sign up for an account, and contact you through your site. HTML form templates can let you engage with your users.
Go to your WordPress Admin Dashboard. Head over to Appearances -> Themes. Click Add New -> Upload Themes.
In the HTML drop down menu, locate your theme’s zip file, upload it, and click Install Now. After that, don’t forget to activate the theme.
Now your front end should look like the old site. You should be aware that while the basic design looks the same, there are more things you should do to make the integration better.
For example, you can’t use WordPress features like the widget area. You also need to adjust CSS markup to make it a part of WordPress’ original design.
Additional Read
40 Best HTML Editors You Should Use in 2022 (Free & Paid)
How to Convert HTML to WordPress Using WordPress Child Theme?
1. Pick a Suitable Theme
Pick a theme to base the design and you need to find a theme close to the existing design. You can use a starter theme or theme framework and this works as a basis for the custom themes. Check the WP theme directory to pick a suitable theme and then install this on the WP website. This works as a base so there is no need for activation of the theme because the remaining things occur in the child theme.
2. Create a New Folder
Here too, it is necessary to create a theme folder and you would put the files that belong to this within. Give it a name without any spaces because it will not work this way.
3. Set Up the Style Sheet
Child theme requires a style sheet.
/* Theme Name: My Theme Child Theme URI: Description: My Theme Child Theme Author: Me Author URI: Template: my-theme Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: my-theme-child */
As you can see, it’s very similar to the style sheet header you used before with one exception: it contains the Template tag.
In that section, you should put the name of the theme that will function as the parent. Without it, the child theme won’t work. To avoid this, input the folder name of the parent. So, for My Theme, that would be Template: my-theme.
4. Create Functions
PHP and Inherit Parent Styles: activate child theme with folder and style sheet but this does not do good because the site would appear like an HTML page minus the styling.
To change that, you first need to inherit the parent’s styles and for that, you need functions.php. This file is an important part of any WordPress installation and allows you to make sweeping changes to your website.
However, in this case, you will only use it to call the parent’s styling. For that, create a new file and call it functions.php. The first thing you will add at the very beginning is this:
<?php
With an opening PHP tag, the file is theoretically ready but it doesn’t do anything yet. So, additionally, you will have to input this:
function my_child_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
This piece of code tells WordPress to go to the template directory (aka parent theme) and use the styles included there. It also makes it possible to modify the theme via your child theme (more on that later).
5. Activate the Child Theme
Once the child theme becomes ready for activation; you might add a screenshot to this. Zip this if you wish or add this to WordPress. After the activation of the theme, the site would appear just like the parent.
Additional Read
How to Change Background Color in HTML (Free & Paid)
At this point, the child theme is ready to be activated.
You can add a screenshot to it as in the instructions above if you want. Aside from that, you can either zip it up and add it to WordPress via Appearance > Themes > Add New > Upload Theme or by simply adding the folder as is to wp-content/themes.
In both cases, when you activate the theme, your site should now look exactly like its parent.
6. Adjust the Design
This is the time for the start of the detective work. It is time for changing the existing theme design to make it resemble the initial HTML site.
How to Import Content from HTML to WordPress Using Plugin?
- Install the Import Plug-in: The first thing to do is to install the plug-in by finding it in the list and activating it once installed.
- Prepare the Import: Import multiple pages by uploading them on the same server as the WordPress installation. Plug-in proposes a folder name and you might choose anything you want but remember the pathname. It is also possible to import single pages successively.
- Start Importing: Finally, you need to save settings and this enables the button Import Files. Once done the existing content present on the WP site is available to you formatted by a new theme. This is an effective way to Convert HTML to WordPress.
What are the things to Consider in HTML to WordPress Conversion Cost?
The entire process of converting a website from HTML to WordPress can be done at a variety of costs. Most of the features that have to be purchased are affordable, but analyzing a particular cost for developing a website is a bit tricky.
The price of HTML to WordPress conversion of a website depends on a few factors. Approx. HTML to WordPress costs is started at $150 for a single page. Analysis of these factors that affect the cost of conversion from HTML to WordPress has been discussed below:
HTML to WordPress Cost
The price of HTML to WordPress conversion of a website depends on a few factors. Approx. HTML to WordPress cost is started at $150 for a single page.
Features
Conversion processes of a website are mostly carried out by the owners so that the website looks upgraded and visually more appealing to the viewers and consumers. For this process to work successfully, the addition of certain features on the websites becomes unavoidable.
These features are usually included with the help of plugins and themes already present in WordPress. Sometimes, these themes and plugins are available for free, and sometimes they have to be bought by the owner.
An increase in new features on the modified websites increases the costs that are required to convert them. The addition of new features is mostly done based on consumer requirements, information that has to be shared, and owner requirements. Costs of conversion of the website are thus impacted by the features added to the website during conversion.
Choice of Hiring
Hiring the right person for the conversion service is also a vital area that the investor and the website owner must consider. There are freelance website developers who can provide services at reduced costs within a shorter period. However, freelance website developers are mostly inexperienced and often cause reliability issues after handing over all personal information.
On the other hand, companies also provide the same services, and in such cases, there are no trust issues that are faced. Agencies that work towards website development also have a professional attitude towards the work and have a better experience than freelance workers.
However, if you are taking the conversion services from a WordPress conversion company and hiring their experts, you have to spend much more money than the costs of a freelancer. Thus it is seen that the choice of an expert who will be hired for website conversion also plays a critical role in analyzing the costs of the conversion process.
Maintenance
Even after the conversion of a website from HTML to WordPress, there is regular WordPress maintenance is required. Features on the websites must be regularly improved to increase their traffic and develop their rank on the search engine.
Further, security features have to be added to the website to protect the confidential information that is uploaded. Other factors, like removing bugs and managing the website breakdown or glitches, also need to be considered.
Overall for the entire process, a separate HTML conversion service provider can be hired for maintenance, which would have separate cost addition.
However, you can gain substantial knowledge of WordPress Content Management System if you are aware of the processes of web development. In this way, you can cut the costs required to hire a separate expert.
Moreover, you can also test your site speed to keep it running smoothly for a consistent user experience using tools and have complete knowledge about the website that is being created.
Did You Successfully Move from HTML to WordPress?
This is it for making the move from static HTML website to WP. It gives you a chance to become a part of the largest web community and gain access to incomparable resources that makes our website appear amazing.
Originally published on 14 October 2020 and updated on 7 November 2022.
