HTML to WordPress
How create HTML to WordPress static page
Welcome to all. In this article I am going to discussion about how convert HTML to WordPress static page than next I gradually discuss on how to WordPress theme development from HTML . Now I am going my current topics, -basically WordPress must need to file index.php and style.css. If missing index.php the theme show template missing on the other hand, If missing style.css theme show stylesheet missing.
Taking your HTML template in WordPress theme folder. First your index.html change to index.php and taking an picture for theme featured as the name of screenshot.png in same folder where is index.php and style.css . For example here show an index.html which rename as index.php
<!DOCTYPE html>
<html>
<head>
<title>This is Title</title>
<link rel="stylesheet" type="text/css" href="css/default/default.css"/>
<link rel="stylesheet" type="text/css" href="css/nivo-slider.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="fix main">
<div class="fix header">
<img src="images/logo.jpg" alt=""/>
</div>
<div class="fix mainmenu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Servece</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About us</a></li>
</ul>
</div>
<div class="fix slider">
<div class="slider-wrapper theme-light">
<div class="nivoSlider" id="slider">
<img src="images/nemo.jpg" alt="This site developed by Rasel Ahmed" title="This site developed by Rasel Ahmed"/>
<img src="images/toystory.jpg" alt=""/>
<img src="images/up.jpg" alt="" title="#htmlcaption"/>
<img src="images/walle.jpg" alt=""/>
</div>
<div class="nivo-html-caption" id="htmlcaption">
<p>This is html caption. This is <a href="http://rrfoundation.net">link</a></p>
</div>
</div>
</div>
<div class="fix maincontent">
<div class="fix sidebar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Others</a></li>
<li><a href="">Media</a></li>
</ul>
</div>
<div class="fix content">
<h2>This is content Title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>
</div>
<div class="fix footer">
<p>© RR Foundation, All Rights Reserved</p>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
</html>
In style.css input some information as comment for your theme.
/* Theme Name: Here is your theme name Theme URI: Here is your theme url Description: Here is your theme description. Version: Here is theme version Author: Here is theme author name Author URI: Here is theme author url Tags: Here is some tag for your theme */ //Your stylesheet CSS keep here
Now lets go on index.php open in your text editor. And input <?php echo get_template_dairectory_uri (); ?>/ or <?php bloginfo(‘template_url’); ?>/ on ever src=”” and href=”” where called src and href from local folder (only except style.css).
<?php echo get_template_dairectory_uri (); ?>/ </strong>or <strong><?php bloginfo(‘template_url’); ?>/</strong> Example: <link rel=”stylesheet” type=”text/css” href=”<?php echo get_template_directory_uri(); ?>/responsive.css”/> <script src=”<?php echo get_template_directory_uri(); ?>/js/selectnav.min.js”></script> <img src=”<?php echo get_template_directory_uri(); ?>/images/logo.png” alt=””/></a> //Or you can use <link rel=”stylesheet” type=”text/css” href=”<strong><?php bloginfo(‘template_url’); ?>/</strong>responsive.css”/> <script src=”<strong><?php bloginfo(‘template_url’); ?>/</strong>js/selectnav.min.js”></script> <img src=”<strong><?php bloginfo(‘template_url’); ?>/</strong>images/logo.png” alt=””/></a>
Now need to change style.css, this style.css replaced by the<?php bloginfo(‘stylesheet_url’); ?> or <?php echo get_stylesheet_uri(); ?>
Example:
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘stylesheet_url’); ?>” media=”screen” /> <link rel=”stylesheet” type=”text/css” href=”<?php echo get_stylesheet_uri(); ?>” media=”screen” />
For wordpress admin bar and support other hook or scripts your to <?php wp_head();?> and <?php wp_footer();?>. <?php wp_head();?> use before </body> tag and <?php wp_footer();?> use before </body> tag.
After all changed index.php looking like below:
<!DOCTYPE html>
<html>
<head>
<title>This is Title</title>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/default/default.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/nivo-slider.css"/></pre>
<pre><link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘stylesheet_url’); ?>” media=”screen” /></pre>
<pre><?php wp_head();?>
</head>
<body>
<div class="fix main">
<div class="fix header">
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" alt=""/>
</div>
<div class="fix mainmenu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Servece</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About us</a></li>
</ul>
</div>
<div class="fix slider">
<div class="slider-wrapper theme-light">
<div class="nivoSlider" id="slider">
<img src="<?php echo get_template_directory_uri(); ?>/images/nemo.jpg" alt="This site developed by Rasel Ahmed" title="This site developed by Rasel Ahmed"/>
<img src="<?php echo get_template_directory_uri(); ?>/images/toystory.jpg" alt=""/>
<img src="<?php echo get_template_directory_uri(); ?>/images/up.jpg" alt="" title="#htmlcaption"/>
<img src="<?php echo get_template_directory_uri(); ?>/images/walle.jpg" alt=""/>
</div>
<div class="nivo-html-caption" id="htmlcaption">
<p>This is html caption. This is <a href="http://rrfoundation.net">link</a></p>
</div>
</div>
</div>
<div class="fix maincontent">
<div class="fix sidebar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Others</a></li>
<li><a href="">Media</a></li>
</ul>
</div>
<div class="fix content">
<h2>This is content Title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>
</div>
<div class="fix footer">
<p>© RR Foundation, All Rights Reserved</p>
</div>
</div>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<?php wp_footer();?>
</body>
</html>
The end this tutorial, practices this if you face any problem about it comment here.
Comments are closed
