Converting HTML template to WordPress theme-1

It’s very easy to convert an HTML template to WordPress theme follow below steps to do that

Step-1: Create a new theme folder

On your local PC create a new folder with theme name for example addax, exolot, herobike etc.

Step-2: Create necessary files inside that theme folder

- style.css
- index.php
- functions.php
- header.php
- footer.php
- sidebar.php
- screenshot.png

Spte-3: In style.css file keep below line inside comment

/*
Theme Name: Add Theme Name Here.
Theme URI: Add Theme's URI
Author: Author Name
Author URI: Author website url.
Description: Brief description.
Tags: blog, website.
Version: 1.0
License: General Public License
*/		

Step-4: Separate your HTML template’s code to above-created files

- header.php

from your HTML template file paste header area code into header.php

- footer.php

from your HTML template file paste footer area code into footer.php

- sidebar.php

from your HTML template file paste sidebar area code into sidebar.php

- index.php

now after separating header & footer code, remaining all code paste into index.php

Note: If your template contains unique blog page then, keep an index.php reserve for that and create front-page.php for your template home page. Paste code like above steps.

Step-5: Now index.php looks like this

get_header();

if ( have_posts() ) : 
	while ( have_posts() ) : the_post();
	  <div id="post- the_ID();"  post_class();>
	     <div class="post-header">
		 <div class="post-date">the_time( 'M j y' );</div>
		 <h3><a href="the_permalink();" title="the_title_attribute();">the_title();</a></h3>
		 <div class="post-author">the_author();</div>
		</div>
		<div class="entry clear">
	          if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail();
	          the_content();
                  edit_post_link();
		  wp_link_pages(); 
                </div>
			    
		<div class="post-footer">
		  <div class="post-comments">comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' );</div>
		</div>
	    </div>
	    endwhile;
	          <div class="post-navigation">
		     <div class="nextpost">next_posts_link( 'Older Posts' );</div>
		  <div class="previouspost">previous_posts_link( 'Newer Posts' );</div>
	 </div>
    else :
   <p> Not found any post! </p>
endif;

get_sidebar();
get_footer(); 	

Ongoing

Converting HTML Template To WordPress Theme-2