Site icon Tech Buzzer

Complete Guide On How To Convert HTML To WordPress

Tech admin
HTML to Wordpress

If you own a static HTML website site or were designed a long time ago, you will have to update the website by using HTML coding. The process of updating a website by HTML coding is very time-consuming and that is why converting your old HTML code into a WordPress one will be better.

If you have a static website, you will change it into a WordPress one. Here you will be able to find more info to convert HTML to WordPress service and tips by AIS Technolabs.

Need To Convert HTML To WordPress

It is crucial to converting HTML to WordPress because, in this manner, the site will have greater chances to be on the maximum visibility in search engines. Converting HTML Site to WordPress means taking the existing HTML site and transferring it to a WordPress theme.

You can convert your HTML site to a WordPress site in various ways, and we will talk about two of them in this article. Visit this website to convert HTML to WordPress service.

Image Source: Pixabay

Ways To Convert Html To WordPress

As discussed earlier, we will look at two ways with the help which static HTML that can be converted to WordPress.

Manually Converting Html To WordPress

Manual Conversation is one of the most technical options that can be considered for converting HTML to WordPress. This option will require extensive knowledge of coding and you will have to be familiar with web technological languages like CSS, PHP, HTML, and much more. You will have to follow the steps given below:

Creating A New Theme Folder

Creating a new theme folder on the desktop will be the first step. This will be your directory folder on the computer you will be using. Then you will have to go to a code editor and will have to create different types of text files:

Image Source: Pixabay

Copying CSS Code

Copy the whole CSS code from the website you want to update on a WordPress-style sheet. Before doing this, you will have to prepare the WordPress style sheet, this is the Style.css file being created in the last step.

You will have to copy and paste CSS Code to the style sheet. Then filling of different parts of the stylesheet will be done such as:

After this, copy and paste the existing CSS from the HTML Site to the new theme folder

Separating Existing Html

WordPress uses PHP for pulling up database information. You will need the HTML into multiple pieces in order to allow CMS to bind them in a precise manner. For this process, follow the steps;

Copy the code from the WordPress field being developed previously and then paste it into the given areas.

Image Source: Pixabay

Things from the starting of the HTML code to main content will fall under this. You will need to copy and paste <?php wp_head();?> right before </head>

Here you will paste all the codes from the portion that is marked as <aside>

This section runs with the help from the bottom of the sidebar and goes upward to the end of file. <?php wp_footer();?> should be there before </body> for closing the bracket.

Once you complete this, you will have to close the “Index.html” file and save data to the main theme folder. Then close all the files and keep header.php and index.php open.

Image Source: Pixabay

Changing Header.Php And Index.Php Files

You will need to change header.php and index.php

If you want to perform this, you will have to search for the link in <head> section in the following manner:

<link rel=”stylesheet”

href=”style.css”>.

You Will Have To Replace The Previous Link With

<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />.

Then you will have to save and then close the header.php file.

Open your index.php file. It will not contain anything from now

Enter the following things:

After doing so, do not forget to put space between the first and second lines of the code. Then you will have to pass your loop code in this space. After that, you will have to save and close the entire file. Just prepare a theme and insert it into the WordPress site.

Image Source: Pixabay

Screenshot And Then Upload

Then you will have to take a screenshot of the theme, it should be 880×660 pixels, and then you will have to upload it. This will help in previewing the site. Upload the final theme in WordPress:

You will be able to activate the theme.

Converting Html With The Help Of WordPress Child Theme

This will be easier than the last process. This will help you in choosing from varied forms of themes while keeping the original design very intact.

  1. Choosing a Theme

You will have to choose a theme from WordPress. Then install the theme but do not activate it.

  1. Creating a New Theme Folder

Just like the previous step, you will have to create a new folder. You will have to keep the name the same as that of the parent theme and then add “-child” at the end. No extra spaces should be there.

  1. Create a Style

Then you will have to create a style sheet. You will have to add a tag “template”. You will have to include the parent’s name.

  1. Creating Function.PHP

You will then have to build a function.php file and add parent styles.

You Will Have To Add 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’ );

This code will help you in letting WordPress go to the word parent theme Atena then you will have to use the styles that are mentioned in the list.

Image Source: Pixabay

Activating The Child Theme

For activating the child theme, you will have to take a screenshot that has been featured in the WordPress backend. Then you will have to create a zip file that contains successful adjustments. Then you will successfully adjust the design that will be like your HTML site.

Feature Image Source: Pixabay

Exit mobile version