How to Conversion of HTML to WordPress?

Web design has evolved from a text-only experience to a highly interactive website. Static HTML sites still exist, and they can still be found on the modern web. Your old HTML page code can be easily converted into WordPress.

You will need developers to make changes to your website if you are not well versed in website programming. This is where WordPress comes into play. WordPress was designed so that anyone can use it regardless of their skill level. You don’t have to hire a wordpress developer to develop WordPress, and switching is super easy.

3 ways to convert HTML to WordPress -

There are several options for the conversion. You can decide which one’s right for you depending on the time and money, your coding skills, and your personal preferences that you are able and willing to invest. The main options are:

1. Manually convert HTML to WordPress -

The most technical option. Here, you take your existing code to make the WordPress theme files a starting point. If you have experience in coding, it will not be complicated. With some HTML, CSS, and PHP knowledge, you can do it.

Step 1: New folder for the theme

Create a new theme folder on your desktop which can also be your computer's directory folder. Now create text files in the code editor. There are five different files:

Style.css \sIndex.php

Header.php

Sidebar.php

Footer.php

Step 2: Copy existing CSS into the WordPress Stylesheet

Copy and paste CSS code from your old website in the WordPress stylesheet. For your new WordPress theme fill your stylesheet header, by:

• Theme name - You can choose the name of your theme. Usually, it is the same as the theme folder.

• Theme URI - Use your website address to post the theme home page here.

• Author - You can put your name or another name here.

• Author URI - A link to your website which you can also create.

• Description - Your theme can be described, which appears in the backend of WordPress.

• Version - The version of your theme. It won’t matter since you do not publish it.

• License, URI, Tags - This is important if you plan to submit a theme to the WordPress theme directory. In that case, you can leave them out, we are just adding them together to make it complete.

Copy the existing CSS from your static HTML website and paste it after the header. Save the file as your new theme folder.

Step 3: Existing HTML Separated

To access the database information, WordPress uses PHP. To properly link them together, your existing HTML code needs to be broken up into separate pieces.

You need to copy the original HTML document into PHP files.

First, open the index of your html file. Go through the WordPress files you created and copy the code into the sections below:

• Header.php - This covers everything from the beginning to the main content area of your HTML code. You will need to copy paste?php wp head();? before the highlighted section.

• Sidebar.php - Here you paste all the code that is highlighted in the section.

• Footer.php - This section starts at the end of the sidebar and extends to the end of the file. Before that, add a call that closes the parenthesis.

Save the index.html file and your other information in the theme folder. Close all files except header.php and index.php.

Step 4: Paste a theme screenshot along with your style header

Style header serves as a preview of your WordPress website. Open your existing website in a browser and take a screenshot. Open the image editor and paste it to 880×660 pixels. Then save it to your theme folder.

Now you'll need to upload the theme to WordPress. Take the following five steps to get started:

• Make a zip archive.

• Go to the WordPress website.

• At top of the page, go to Appearance, Themes, and click Add New.

• Select Upload Theme from the drop-down menu.

• Install Now after you've uploaded your zip file.

You can now activate the theme after completing these instructions.

2. WordPress HTML through WordPress Child Theme -

You can use thousands of WordPress themes while keeping the original design. This is done by using a well-known child theme. The themes are based on the parent theme but modifies it to your liking.

Step 1: Choose a theme

Install the theme on your WordPress website.

Step 2: Create a new folder for the theme.

Create a new folder on your desktop. Give the parent folder the same name and add "-child" to the end. Remember, there should be no spaces in the name.

Step 3: Create a style sheet

Add a tag with the title "template". Include the name of your parents. It’s necessary to edit the child's theme.

Step 4: Create a.php feature

Now, create a functions.php and inherit child theme parent styles. Creates and calls functions.php to create a new file. Enter the code below:

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’ );

This code allows WordPress to access the parent's theme and styles for the child's theme.

Step 5: Activate the child theme

Activate the child theme. Take a screenshot of WordPress backend. Put everything into a zip file and upload it to WordPress. Then you can adjust the design to fit the HTML you started with.

3. Import HTML content into WordPress with the plugin -

This is the easiest way. Install and activate the theme of your choice. Before working on this, make sure you backup your WordPress site.

Step 1: Install the import plugin.

Add Plugins New and look for the name. Click Install Now and then install HTML Import 2 plugin.

Step 2: Prepare the import

Upload the multiple pages imported to your WordPress installation. Enter the information under the Files tab:

Import Directory – The folder where you copied your existing HTML code.

Old site URL – Enter the site's old URL, which will be used as a redirect.

Default File — You put your index.html.

File extensions – Include the file extensions that will be imported.

Exclude directories from the old site if you don't want them to be transferred over.

Preserve file names — The plugin will use your file names as the new URL automatically.

Later, navigate to the content tab and configure the HTML element that carries the content of your website.

You should be aware of numerous tabs, including:

• Title and Metadata - Titles are tagged in the HTML template, and plugins import them in the right place.

• Custom Fields - Data that has to be imported into custom fields.

• Categories and Tags - You can assign categories, tags, and post formats to your imported content.

• Tools screen - The extension's built-in tools are displayed on the Tools screen.

Save your options and then click Import Files after you've gone through each tab.

Source: https://www.wordpressmigrationhelp.com/html-wordpress-migration

I am stellagreen, Digital Marketing Manager at WordPress Migration Help based in Usa. At WordPress Migration Help we create amazing WordPress Websites or we help to convert websites made on other platforms to WordPress.