Ultimate magazine theme for WordPress.

How One Can Use HTML Code To Convert Websites Into WordPress?

0 253

 If we look at web design from the all-text understanding, we will realize that it has transformed into an extremely interactive web presence. On top of that, we do not even need to write markup by ourselves. This is because all the heavy lifting is carried out by noteworthy content management systems like WordPress. More number of people these days are switching from HTML websites into WordPress as the former is static. HTML to WordPress conversion is always beneficial for businesses as this brings in a lot of comfortable solutions.

Convert HTML to WordPress with these innovative methods

In case you are intimidated with the idea of converting HTML to WordPress theme, don’t be as this guide is all you need to follow.

  • Crafting basic files & theme folder

First & foremost, you must craft a brand new theme folder. After this step, take the cursor to code editor & fabricate a couple of text files. You can name the text files as the following

  1. sidebar.php
  2. style.css
  3. header.php
  4. footer.php
  5. index.php

Let the files remain open in your editor as soon you will be using them.

  • Copy present CSS to WordPress style sheet

The HTML to WordPress theme conversion includes organizing the WP style sheet which is style.css that is created in the earlier step. This is done for the purpose of copying the previous website’s CSS in it. After opening the file, you must paste this

Theme Name: Twenty Thirteen

Theme URI: http://wordpress.org/themes/twentythirteen

Author: the WordPress team

Author URI: http://wordpress.org/

Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.

Version: 1.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready

Text Domain: twentythirteen

*/

  This part is regarded as the style sheet header. Fill every part in the following way:

  1. Theme URI – You can either put in your own website’s address or homepage of the theme
  2. Description – You can describe your theme here that will also pop up in WP backend
  3. Theme Name – Though you can put any name for the theme, usually it is kept similar to the name of the theme folder
  4. Author URI – Here you include a link to the homepage. This can also be the link that you are actually building
  5. Copy & paste the present CSS from the static HTML website following the header. Then you can save that file in the new theme folder.

Separating the existing HTML

If you want to know how to convert a HTML website to WordPress, understanding this part carefully is important. Here you must realize that WordPress always employs PHP for pulling information from the database. This is the reason why chopping up the present HTML into numerous pieces is necessary for the CMS to put all these together properly.

This example page will help you understand it better

This HTML template is a standard one that incorporates a content area, footer, a header and a sidebar. The code that accompanies is as follows

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>Website Title</title>

<meta name=”description” content=”Website description”>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<div class=”header-container”>

<header class=”wrapper clearfix”>

<h1 class=”title”>Website Title</h1>

<nav>

<ul>

<li><a href=”#”>nav item #1</a></li>

<li><a href=”#”>nav item #2</a></li>

<li><a href=”#”>nav item #3</a></li>

</ul>

</nav>

</header>

</div>

<div class=”main-container”>

<main class=”main wrapper clearfix”>

<article>

<header class=”entry-header”>

<h2 class=”entry-title”>Article Title</h2>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>

<h2>Subheading</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>

<h2>Subheading</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>

</article>

<aside>

<h3>Sidebar</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>

</aside>

</main> <!– #main –>

</div> <!– #main-container –>

<div class=”footer-container”>

<footer class=”wrapper”>

<p class=”footer-credits”>© 2019 My Imaginary Website</p>

</footer>

</div>

</body>

</html>

 You can always adjust any of the steps in case the design is a bit different. But the entire procedure will stay all the same.

Open the present index.html. Following this, browse via the newly crafted WP files following which you need to copy it.

header.php

In this file everything will be included which is the starting of the HTML file to the chief content area (<main> or <div class=”main”>). On top of this, you need to place special emphasis where it says </head> copy and paste <?php wp_head();?>. You must know that this area is very critical as the proper functioning of WordPress plugins depend on this.

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>Website Title</title>

<meta name=”description” content=”Website description”>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<link rel=”stylesheet” href=”style.css”>

<?php wp_head();?>

</head>

<body>

<div class=”header-container”>

<header class=”wrapper clearfix”>

<h1 class=”title”>Website Title</h1>

<nav>

<ul>

<li><a href=”#”>nav item #1</a></li>

<li><a href=”#”>nav item #2</a></li>

<li><a href=”#”>nav item #3</a></li>

</ul>

</nav>

</header>

</div>

<div class=”main-container”>

<main class=”main wrapper clearfix”>

  • HTML to WP through WP child theme

When your aim is learning how to migrate an HTML website to WordPress, this is the easiest way to do it. It is also cost-effective. Here you use a ready-made WP theme instead of employing the present website as the point of jumping off. You only need to adjust the design for making it look like the old website.

  • Content importing from HTML to WP by using plugin

When you agree to utilize the current design & you are okay with changing it, the procedure becomes even more convenient. All that is required doing is setting up a website, fixing the theme & importing the HTML content. This is a very speedy process.

Final Say

Some of the steps as mentioned above for HTML to WordPress conversion if performed cautiously will offer you best results. This will also help you in becoming a very important part of the biggest communities on the web & you can get hands on numerous resources for making the website better.

Leave A Reply

Your email address will not be published.