How to Convert HTML with CSS Site into WordPress Site

These days, Google and other leading search engines are caching wordpress website very quickly. So, various website owners want to convert their website into a word press format. WordPress is a pre-designed format of website using latest version of PHP, HTML and JQuery languages. A lot of pre designed themes are available which can be easily implemented into the website. But, if you want to convert your own theme and website into word press then you must follow following steps.

Download latest WordPress release from wordpress.org. It is in the form of zip file.
Upload this file to main directory of server and unzip it.
Go to the folder /wp-content/themes.
Copy your index.html and CSS file here.
Take a screenshot of your html website design and Save the image as ‘screenshot’ in the folder ‘themes’
Create four new files as index.php, header.php,sidebar.php and footer.php.
Open index.html and header.php in any editor. Copy all codes between head tags in html file and paste it into header.php.

Now open the index.php paste the second part of code of the html file i.e. navigation and menu bar. Save and Close.

Next, copy 3rd part of html file open the sidebar.php file then paste, save and close.
4th and last part is footer. Copy codes of footer and paste it into the footer.php.
Now you have four different php files. Next you need to put them back togather using a php code.
Open index.php file and add this php code <?phpget_header(); ?> on the top.
Then add sidebar.php and footer.php using php code <?phpget_sidebar();?> and <?phpget_footer();?> respectively on bottom.

Now copy the following code and paste it between a div tag into index.php file where you want to show it on the webpages.

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

<div id=”post-<?phpthe_ID(); ?>” <?phppost_class(); ?>>

<div class=”post-header”>

<div class=”date”><?phpthe_time( ‘M j y’ ); ?></div>

<h2><a href=”<?phpthe_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?phpthe_title_attribute(); ?>”><?phpthe_title(); ?></a></h2>

<div class=”author”><?phpthe_author(); ?></div>

</div><!–end post header–>

<div class=”entry clear”>

<?php if ( function_exists( ‘add_theme_support’ ) ) the_post_thumbnail(); ?>

<?phpthe_content(); ?>

<?phpedit_post_link(); ?>

<?phpwp_link_pages(); ?>

</div><!–end entry–>

<div class=”post-footer”>

<div class=”comments”><?phpcomments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div>

</div><!–end post footer–>

</div><!–end post–>

<?phpendwhile; /* rewind or continue if all posts have been fetched */ ?>

<div class=”navigation index”>

<div class=”alignleft”><?phpnext_posts_link( ‘Older Entries’ ); ?></div>

<div class=”alignright”><?phpprevious_posts_link( ‘Newer Entries’ ); ?></div>

</div><!–end navigation–>

<?php else : ?>

<?phpendif; ?>

Now your custom word press theme is readyto use.

Now install the theme and enjoy Word Press with your custom theme style. To design a custom theme you ought to hire a Web Designing Services Company Delhi. For any query write to us or comment.