Quality Website design & Development Services

Hand-coded development for conversion into Wordpress

Convert HTML into WordPress

Convert HTML into WordPress Tutorial

 

Convert HTML into WordPress from Scratch step by step:

 

We are using following  Example html file :

<html>
<head>
	<title>This is my title</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
	<div class="header">
		<p>header stuff ....... </p>
	</div>
	<div class="middle">
		<p>middle stuff ....... </p>
	</div>
	<div class="footer">
		<p>footer stuff ....... </p>
	</div>
</body>
</html>

Step 1 : Slicing down the given html into 3 parts:
Make three php parts of the given html file that will go into wordpress theme.

1.header.php
2.index.php
3.footer.php

1.header.php will contain :

<html>
<head>
	<title>This is my title</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
	<div class="header">
		<p>header stuff ....... </p>
	</div>

2.index.php will contain :

<?php get_header(); ?>
<div class="middle">
	<p>middle stuff ....... </p>
</div>
<?php get_footer(); ?>

3. footer.php will contain

<div class="footer">
		<p>footer stuff ....... </p>
	</div>
</body>
</html>

Now save the three files to a folder named “MyTheme” and place the folder into wp-content/themes/

Also place the style.css and jquery.js into wp-content/themes/MyTheme

and modify header.php like this:

<html>
<head>
	<title> <?php wp_title(); ?> </title>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css" />
	<script src="<?php bloginfo('template_url'); ?>/jquery.js" type="text/javascript"></script>
<?php wp_head(); ?>
</head>
<body>
	<div class="header">
		<p>header stuff ....... </p>
	</div>

Here , wp_title() will give you the title set in your wordpress.
bloginfo(‘template_url’) will give you the template path.
wp_head() is very necessary to include in header.It will execute many inner functions of wordpress.

Now activate your theme from the admin dashboard under appearance > themes.

X

* : Required Field