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.
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:
- CSS
- PHP
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:
- Theme Name
- Theme URL
- Author
- Author URL
- Description
- Version
- License
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.
- Header.php
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>
- Sidebar.php
Here you will paste all the codes from the portion that is marked as <aside>
- Footer.php
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.
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:
- <?php get_header(); ?>
- <?php get_sidebar(); ?>
- <?php get_footer(); ?>
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.
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:
- The zip file will have to create
- You will have to go to the WordPress page and select Appearance, themes. Click to add
- Select the uploaded theme and then upload the zip file
- Click on Install now
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.
-
Choosing a Theme
You will have to choose a theme from WordPress. Then install the theme but do not activate it.
-
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.
-
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.
-
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.
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
