Introduction
WordPress has become one of the most popular blogging platforms in the world since its inception in 2003, and it is easy to see why. It can also serve as an excellent solution for business sites looking to leverage their blog as an e-commerce or marketing tool.
With thousands of WordPress themes and plugins, you can create anything from an informational website to an e-commerce shop, all without having to build the platform yourself. Therefore, if you are running your site on HTML and want to switch to WordPress, it can seem like a huge undertaking.
Fortunately, this step-by-step guide will walk you through the process of converting your HTML site to WordPress so that you do not have to worry about losing all of your hard work.
Our company, convertinWordpress will help you with everything from creating your WordPress site and choosing a theme to build your content and marketing your new WordPress business. It has knowledgeable and well-equipped staff that is available 24/7 for assistance.
Convert HTML Website To WordPress
Reasons To Convert HTML Site To WordPress
The following examples may help you comprehend why you might convert or upload HTML to WordPress in the first place if you are unsure of why you might do so…
1. Transfer the older HTML website to the WordPress platform. Perhaps you prefer the old style, or you simply do not want to put in the effort to change. This is crucial for maintaining your brand’s reputation.
2. Match your WordPress theme with an HTML website design that you found online but don’t have access to.
3. Publish a single HTML webpage or blog post on your already-existing WordPress website. This is especially helpful if the custom page layout you seek is not offered by your current theme.
4. An HTML website template can be converted into a WordPress theme format.
5. Create an HTML unique design for a WordPress page or post.
6. Upload an HTML verification file to your website showing a search engine or other service that you are the owner of the domain.
Ways To Convert HTML Website To WordPress
By transferring your present content from your HTML website into a WordPress theme, you can convert your website to WordPress. Here are the three basic approaches, which we will describe.
Transfer HTML Website To WordPress
1. Manual Html To WordPress Conversion
The most technical choice is this first option. If you choose to pursue this path, you will use your current code as a jumping-off point to construct the WordPress theme files.
If you have coding experience, it’s not too difficult. With a little understanding of HTML, CSS, and PHP, you can accomplish it. It’s mostly copying and pasting.
The drawback is that while you will have a functional WordPress theme, it won’t have all of WordPress’ features. For instance, your site won’t have widget sections or the option to modify your menu from the WordPress backend unless you add it later.
Step 1: Creating a New Theme Folder
Making a new theme folder is the first thing you must do. On your desktop, just as you would for a computer directory, you can accomplish that. Whatever you want to call your theme, give it that name. Keep the files open in the editor but don’t do anything with them just yet. You will soon require them.
Create several text files in the code editor after that. Categorize them as follows:
- style.css
- index.php
- header.php
- sidebar.php
- footer.php
Step 2: Copying CSS Code
The CSS code from your old website must then be copied onto a WordPress Style Sheet. To achieve that, you’ll need to generate the style.css file for the WordPress style sheet, which you did in the previous step. The CSS code from the old site’s source should be copied and pasted into that style sheet. The various sections of the style sheet header for your new WordPress theme should then be filled up.
Theme Name – You can make this whatever you like.
Theme URL – the URL or information about the site’s front page.
Author – your description.
Author URL – a connection to the homepage you are creating.
Description – This section provides an optional description of the WordPress backend theme.
Version – begin with 1.0.
License, License URL, Tags – Only if you intend to publish the theme for usage by others in the WordPress directory is this section required.
Step 3: Separating Your Existing HTML
PHP is used by WordPress to retrieve database data. Due to this, your current HTML code needs to be divided into distinct chunks for the WordPress CMS to tie the components together correctly. You will need to duplicate sections of the original HTML content into numerous PHP files to accomplish this.
Open your index.html file first and then copy the code into the following places as you go through the WordPress files that were produced:
- Header.php
- Sidebar.php
- Footer.php
Step 4: Changing the Header.php and Index.php Files for WordPress
The header.php and index.php files will then need to be modified to conform to WordPress’s format.
Find a link in the head> section that looks like this to accomplish this:
<link rel=”stylesheet” href=”style.css”>.
Substitute with this:
<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />.
Save and exit the header.php file at this time. For the time being, you’re done with it. Dispatch the index.php file. It ought to be bare.
Enter the following exactly as follows:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
It is crucial to leave a space between the first and second lines of code. Your Loop code should be pasted here. It’s a type of PHP that WordPress uses to display posts:
Step 5: Create a Screenshot and Upload the Theme
- Making and uploading a screenshot of your theme will be the last step.
- The screenshot displays a backend WordPress preview of your website.
- Crop this screenshot to 880 x 660 pixels. It should be saved as a screenshot.png.
- Add the screenshot to your theme folder at this point.
- The theme has to be uploaded to WordPress now. Take the five actions listed below:
- Zip up the files.
- visit WordPress
- Click Add New at the top after choosing Appearance, Themes.
- Click Theme Upload.
- Click Install Now after uploading your zip file.
You can then turn on the theme after that is finished!
2. Html Conversion Using A WordPress Child Theme
You have a lot more freedom and don’t need nearly as much technical expertise using a WordPress child theme to convert your original HTML into a CMS format. Additionally, it is the least expensive and easiest method for converting HTML to WordPress.
Instead of basing it on your current website, you’ll use a pre-made theme as a starting point to do this. You can change your WordPress parent theme’s design to make it look as much like the previous website as you can.
This implies that you can utilize WordPress and keep the original site’s appearance and feel. As you are creating the new website on an existing platform, there is no need to add WordPress features afterward.
Child themes are built on top of another theme, which is called the parent. The child theme modifies the parent theme in a way that fits your specific site.
Here are the steps to converting your static HTML site into WordPress using a child theme.
Choose a Theme
You must choose a theme before you can begin. Look for one that you like and that is similar to your current design. Just like you would with any other theme, install the theme on your WordPress website. Just don’t turn it on yet.
Create a New Theme Folder
Like you did in the previous technique, you will make a new folder on your desktop. Give the folder the same name as the parent theme and finish it with “-child.” Keep in mind that the name shouldn’t contain any spaces.
Create a Style Sheet
The process we used to create the style sheet in the prior technique is the same as this step. You are going to add a tag called template this time, though. Don’t forget to provide the name of your parent theme. For the child theme to operate, that is required.
Create a Functions.php
Now, create functions.php and use the parent styles for the child theme. For doing this, create a new file and name functions.php. start it with <?php.
Input the following code:
function 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’, ‘child_theme_enqueue_styles’ );
Activate the Child Theme
The child theme is now ready to be activated. But first, be sure to capture a screenshot that will be shown on the WordPress backend. The same as we did with the prior technique, create a zip file containing everything and upload it to WordPress. The design can then be modified to match your original HTML.
3. Use A Plugin To Import Your Content From Html To WordPress
Things become simpler if you are willing to change your current design and don’t insist on using it. Then, all that is required of you is to create a site, install the theme, and import your HTML data. This is a pretty quick and painless process, as you will see below.
- Set Up a New Site
Launch your new website and install your preferred WordPress theme. Make sure the template is one you like and can modify. To make the appearance consistent with your branding, you must make changes.
- Install the Plugin
Installing the plugin that enables this is now necessary. You’re going to look for and install a WordPress Plugin named HTML Import 2 on your website. After that, click Install Now.
- Upload Pages
Upload your pages to the same server as your WordPress installation once the plugin is active. There are several tabs that you need to become used to. When you have set all the tabs, save your changes and select Import Files.
Conclusion
Switching to a powerful content management system with tested features, like the WordPress platform, is an excellent choice if you currently have a static HTML website. Your website will be easier to administer and far less expensive to maintain thanks to the HTML to WordPress conversion and WordPress designs and user-friendly WordPress Dashboard.