How to Convert a HTML Website toWordPress |
X

Congrats, You are Subscribed to Receive Updates.

How to Convert a HTML Website toWordPress


Many of the Static website owners want to make their  HTML site to CMS(Content  Management System). While selecting a suitable CMS, Many peoples picks WordPress as their desired one, Because more user friendly and easy to use. So Here I am going to convert a Simple HTML Template to WordPress theme.  Its very simple steps to follow and convert a HTML site into WordPress Powered Theme. Just follow the following steps,

Before Start making a theme, If you need the source of the HTML files,  Download here.  Let’s Start making a WordPress theme from our HTML files

Your downloaded HTML website looks like this one.

html-website

Just open your download zip and extract to your  wp-content/themes/ folder. Than your files look like this

html-source

[ads1]

There after create the following php files inside the same folder.

index.php

header.php

footer.php

functions.php

sidebar.php

if you want to make full theme, than create the following files also,

page.php

single-post.php

archive.php,

comments.php

tag.php,

Now Lets move to the folder and create a png image sized 300X225 , This is just for admin themes thumbnail view.  and name it as “screenshot.png”   Than open your  style.css file  and write the following lines to index your Theme on WordPress admin themes thumbnail view.

/*
Theme Name: KV Simple HTMl to WP Theme
Version: 1.0
Theme URI: https://kvcodes.com/
Description: A simple demo theme for html to WordPress theme conversion. 
Author: Kv Varadha
Author URI: http://kvcodes.co/
*/

Now , open your browser and move to wp-admin/themes.php , Your screenshot.png image is there and its listed on the  themes list, just activate it , now move to front view, its just a blank page appears, there nothing was there.

Than come to coding,  open your  “functions.php” file and write the following codes to include the supported javascript and styles, we need to enqueue the things to index wordpress better,

function kv_init_scripts() {

    wp_enqueue_script('modernizr', get_bloginfo('template_url') . '/js/modernizr-1.5.min.js', '', 1.5, false);
    wp_enqueue_script('jquery', get_template_directory_uri()  . '/js/jquery-latest.js', '', '1.10.4', true);

}

Here i  just include the mordenizr and jquery-latest , you have to include all your remaining js files, also a similar function help you to include the style-sheets. Here is a example code.

function kv_enqueue_style () {
	wp_register_style( 'shadow-style', get_template_directory_uri() . '/includes/shadowbox/shadowbox.css');
	wp_enqueue_style( 'shadow-style' );
	//wp_register_style( 'grid-list-style', get_template_directory_uri() . '/css/front_page_styles.css');

}  //here i just showed you to include the shadowbox and my custom styles.

These two functions must be hooked with wordpress ,So add this lines to  hook it.

if (!is_admin())  {
add_action('init', 'kv_enqueue_style');
add_action('init', 'kv_init_scripts', 0);
}

Now we included  the JS and CSS Files to our wordpress theme, Than open your ”  header.php ” and write your header html tags like the following one.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KV Simple HTML 5 Template</title>
</head>
<body>
	<div id="cover">
		<header>
			<h1><img src="images/kv_logo.png" >    KV Simple HTML 5 Template</h1>
		</header>

		<div id="content">
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>

Than open your sidebar.php file and copy paste the following code.

<aside>
				<?php dynamic_sidebar( 'general-sidebar'); ?>
			</aside>

than your footer.php file.

<div id="clear"></div>
		</div>

		<footer>
			<p>&copy; Kv Simple HTML 5 Template.</p>
		</footer>
	</div>
</body>
</html>

We need to loop the posts and display in articles section. Now the following code will help you to create loop and display posts in the content section. open your index.php file and copy paste the following code.

<?php
get_header(); ?>
<section>
				<article>

		<?php
			if ( have_posts() ) :		while ( have_posts() ) : the_post(); ?>
					<h4><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
					<p> <span class="author">by <?php the_author() ?></span>. </p>
					<p> <?php the_content(); ?> </p> 
					<?php 

				endwhile;		

			endif;
		?>

		</article>
			</section>

<?php
get_sidebar();
get_footer();

That’s it you have done to created a WordPress theme from html template. You can add more custom settings and things by adding  theme files and more added files.

If you have any doubt and bugs regarding the theme creation drop your comment here, I will help you.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, PHP and Data Analyst. Database Management Advance Level

One comment

  1. commenter

    Hey, its really very easy to learn for a beginner that how to convert HTML to WordPress….You really made it easy to read and implement…Thanks for sharing an informative post with us…

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar