20 years ago all the websites were made with text and static HTML though the websites are much more complex but it is more simple now thanks to the open source projects like WordPress. It allows people to build a website without any coding experience. Most people who use HTML Websites do not know how to convert HTML to WordPress without losing the content or needing to do excessive formatting on a page-by-page basis.
There are three main options through which you can convert html site to a WordPress site.
1. Manually convert the HTML to WordPress
If you know web languages like HTML, CSS and PHP it is easier for you to convert html manually to wordpress for this purpose you need to have access to your current site via FTP and by using the present code you can create the WordPress codex and convert HTML to WordPress.
3. Install a Ready-made theme and drift the content
Installing the ready-made theme is the best option to make a WordPress theme all you need to use the plugin to drift the content, it is in the official WordPress Plugin Repository from here you can access it free of cost.
3. Pay for HTML to WordPress conversion service to design your theme
This option is very helpful for the person who is not familiar with WordPress but you have to pay for this service. For this purpose first you have to choose a hosting plan and look for the options that will be suitable for you and then install WordPress, through this you can log into WordPress admin. You can create a local WP installation or can drift it to a hosting service to convert html to WordPress.
In this session, it will be shown how to convert HTML templates to WordPress theme to get your customized and flexible website.
First 4 steps of installing WordPress include these steps.
- Domain Name
- Hosting
- Install WordPress
- Create Website
Domain name is the name that you give your website. Like (facebook.com, google.com), without a domain name, there is no place for people to visit your website.
The next step is hosting, it means a computer that 24 hours a day holds all websites information, content, images, logos.
The third step is to install WordPress, it is the content management system through which you can create a website very easily.
And the last step is creating a website for free through WordPress.
Some required steps to convert HTML to WordPress theme
Step1: Install WordPress to your hosting account or hosting computer.
Step2: Name the WordPress Theme:
Open your installed WordPress and create a new folder with a name and the files you need and create a new folder to carry all your theme files.
Step3: Creating PHP Files:
WordPress has a few files in the new theme folder, do not make any changes in them, these files can be used for editing.
- css (hold the theme details and CSS files)
- php (it acts as the main content if there is no other files declared)
- php ((hold the header details of the theme)
- php (hold the footer details of the theme)
Step4: Copy Images, CSS and JavaScript Folders
Copy the CSS files, JavaScript and image folders from the HTML to WordPress theme folder.
Step5: Separate HTML into Header, Footer and Index
Copy the HTML commands of header <head> from the index.html into the header.php file that was created in the WordPress themes folder and save.
In the same way, copy the footer and the main part of the commands from index.html to footer.php and in index.php file and save.
Write the WordPress command get_header() at the top and get_footer() at the end of the index.php so the WordPress will recognize where to show them.
Step6: CSS Configuring
After copy and paste of the CSS file into the HTML file, the theme looks different and not adjusts because the CSS files are not applied to the theme.
You have already copy the CSS file all you need to do is to call in the CSS file to add HTML to WordPress.
Sometimes the CSS file name changes so double check the file name before confirming the process.
In the header.php file, you need to call in CSS stylesheet.
Now copy and paste the code from your original CSS file into the style.css file you just created. At the top add the following code:
/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/
Step7: Complete the Index.php file
In order to complete the index.php file you need to make sure that the file can call up other sections of the other files that you have created.
At the very top of your index.php file, place the following line of php.
<?php get_header(); ?>
Add the following code at the bottom of your index.php
<?php get_sidebar(); ?>
<?php get_footer(); ?>
And finally, add a loop that the WordPress will display in the post content to the visitors of your site.
So the final step in creating your new theme’s index.php file is adding the code below within the content section.
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-header">
<div class="date"><?php the_time( 'M j y' ); ?></div>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="author"><?php the_author(); ?></div>
</div><!--end post header-->
<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?> </div>
<!--end entry-->
<div class="post-footer">
<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
</div><!--end post footer-->
</div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div class="navigation index">
<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
</div><!--end navigation-->
<?php else : ?>
<?php endif; ?>
Save your index.php and close. You’re theme is now finished! All that’s left is to upload it to your WordPress website.
Step8: JavaScript Configuration
If you are creating the theme using JavaScript, it can easily be configured. In the header.php the JS files are already called all you need to concentrate on the directory path. Convert HTML to WordPress, it already has a built-in function to call in JavaScript Files.
Step9: Upload the Newly Created Theme
After creating the WordPress theme the last step is to upload the theme and store all the WP files in the new theme folder that you have created. Set the new folder inside the /wp-content/themes/ and direct back to WP Admin > Appearance > Themes and your theme will display there and the next step is to activate it.
Step10: Customize the Title
In WP if you change the website’s title, it will not affect the title of the site. To activate this function you can use WordPress built-in commands bloginfo() with the parameter “name” in between the title of the header.pho file.
Now the theme will choose the title that you set in the WordPress Admin Panel. For that first click on Settings > General > Site Title.
Step11: Add Navigation Menu
When you click on the WP admin of the site and then click on the Appearance you will not find the menu option.
To activate menu option in your site follow the steps. In the functions.php file include the coding to enable the menu option.
<?php
Add_theme_support ( ‘menu’ ) ;
?>
The menu option is essential to convert HTML site to WordPress.
Step12: Include the latest posts to display on the homepage
In most of the website we can see new posts on the homepage, it is in index.php under recent news. But first, navigate the static HTML code to show the posts and replace the code. WP_query() is a WP function that is used to call in the latest posts and pages, you can use a loop to display these in the recent news section.
The functions used in the code:
- the_premalink() apply URL of the blog
- the_title() apply title in the post
- have_posts will search for the new blog posts.
This will add flexibility in your business WordPress theme and you can display more blogs on your website by keeping the theme flawless. This is the latest add on in WordPress.
Importance of WordPress
With the advancement of WordPress, clients do not need to wait longer for the website to get loaded. It is not only used for blogging but also for designing website. WordPress development gives flexibility to the developer and gives a lot of advantages to satisfy the client.
It is easy to use
WordPress sites are easy to use and provide a lot of customizing options for which you do not need to know any web languages like HTML, CSS, and PHP. In this content management system, you do not need to edit the coding files.
A large number of themes available
WordPress has a wide range of themes and plugin available to create an error free business website. You can convert html to WordPress theme to add more features and functionality to the website.
WordPress Community Support
When you convert html site to wordpress site it will give you a lot of support from the WordPress development community through internet. You can find groups and networks through the internet to find a solution for your queries. It is an open source to help you in your designing.
SEO-Friendly development
The main objective of designing a website is to attract visitors and get consumer through the portal, through WordPress you can get access to the search engines like Google. It also provides you a large number of plugins so that your website is SEO-friendly and score high.
With the advancement of new technologies and increasing competition, it is difficult to survive in the market for a long time. The best option is to change with the current technology. WordPress is the advanced technology with fully content management system that gives you the armor in the fight.
All you need is to install WordPress in your hosting computer and convert the html site into WordPress site in a few hours. Rather than HTML sites WordPress only takes two hours approx to load a website. It is a free software with huge advantages.
