Html to Wordpress theme conversion!!

Step1: Split the html index file into three parts(this three files are most essential to make a wp template )
header.php (contains header of the template)
index.php (contains main content of the template)
footer.php (contains footer part of the template).

Step2: index.php loads first so In index.php at start of the code add <?php get_header; ?> to call header part and at the end of the code add <?php get_footer(); ?> to call footer part.

Step3: Then create style.css file and copy all html css to this file and also add a template information at the top.
This is the template description to be added in style.css, without this we cannot install theme.

/* Theme Name: Replace with your Theme's name. Theme URI: Your Theme's URI Description: A brief description. Version: 1.0 Author: You Author URI: Your website address. */

Step4:To call external css use
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Step5:To call image in wordpress file
<img src="<?php bloginfo('template_directory'); ?>/images/image-name.jpg" width="631" height="307" alt="">
To call image in css
background:url('images/image-name.jpg');

Step6:To display post in home page add code in index.php as mentioned below in main content area

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-header">
<div class="date"><?php the_time( 'M j y' ); ?></div>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="author"><?php the_author(); ?></div>
</div>
<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
</div>
<div class="post-footer">
<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
</div>
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div class="navigation index">
<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
</div>
<?php else : ?>
<?php endif; ?>

Step7: To make pages as menu add this code in header.php

<?php wp_page_menu('show_home=1&sort_column=menu_order'); ?>

Step8:To make separate layout for all other pages except home page include page.php(create as such as like index.php only html layout should change). It will function like index.php for all other pages so layout will get change.Another method, to add separate layout for home page is include home.php(create as such as like index.php only html layout should change) so that for home alone home.php will be used for all other pages index.php will be used.

Step9:To make a separate layout for post add post.php.

Step10:To make redirection when clicking on logo to go home page add <?php echo $home_url(); ?>

Step11:To add sidebar follow steps
1.To add sidebar first want to register sidebar in function.php. Create function.php file and add the below code into it
<?php

function my_register_sidebars() {
 /* Register the sidebar. */
 register_sidebar(
  array(
   'id' => 'sidebar',
   'name' => __( 'Sidebar' ),
   'description' => __( 'A short description of the sidebar.' ),
   'before_widget' => '<div id="%1$s" class="widget %2$s">',
   'after_widget' => '</div>',
   'before_title' => '<h3 class="widget-title">',
   'after_title' => '</h3>'
  )
 );
 /* Repeat register_sidebar() code for additional sidebars. */
}
add_action( 'widgets_init', 'my_register_sidebars' );
?>
</php>

To register another sidebar use below code
<?php
function my_register_sidebars() {
/* Register the sidebar. */
/*This is the first sidebar */
register_sidebar(
array(
'id' => 'sidebar',
'name' => __( 'Sidebar' ),
'description' => __( 'A short description of the sidebar.' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title" style = "padding:0px 0 0 20px ;">',
'after_title' => '</h3>'
)
);
/*This is the second sidebar */
register_sidebar(
array(
'id' => 'footer-sidebar',
'name' => __( 'Sidebar1' ),
'description' => __( 'A short description of the sidebar1.' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>'
)
);
/* Repeat register_sidebar() code for additional sidebars. */
}
add_action( 'widgets_init', 'my_register_sidebars' );
?>

2. WordPress themes use a default file called sidebar.php to display sidebars on pages and posts.Call the registerd sidebar in sidebar.php to use it.This is to create first sidebar.
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar') ) :
endif;
// !dynamic_sidebar('sidebar') ) : here sidebar is the registered sidebar id called here
?>

To add another sidebar for example to diaplay sidebar in footer create sidebar-footer.php file and add code
  <?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-sidebar') ) :
endif;
?>
//!dynamic_sidebar('footer-sidebar') ) : here sidebar is the registered sidebar id called here

3.To diaplay sidebar in view call sidebar like  <?php get_sidebar(); ?> in HTML file .This will call the first sidebar.
To display another registred sidebar call like <?php get_sidebar('footer'); ?> because  our file name must follow this construct: sidebar-_______.php. In our example sidebar-footer.php is called as <?php get_sidebar('footer'); ?> .

Refer:

http://www.tastyplacement.com/add-sidebar-wordpress
http://www.wphub.com/tutorials/convert-a-html-template-into-a-wordpress-theme/

Tip & Tricks