WordPress is the best cms for building a beautiful website also it is open source. So any developer goes with WordPress to install the right themes/plugins that can have a modern website with advanced design and functionality. learn how to convert HTML template to WordPress Theme.
In today’s world, we can see many static HTML websites, which need to upgrade into WordPress theme but it can not upgrade because site owners don’t want to change their content or they want to keep their site simple. They don’t know how to convert the HTML template to the WordPress theme without affecting their content.
Here we discuss how to convert the HTML template to WordPress theme in some simple steps.
1. First, On your desktop, you need to create a theme folder and give a proper name as you like you.
2. Create below file under this folder
- style.css
- index.php
- header.php
- sidebar.php
- footer.php
3. Copy Old CSS to New style.css
If you don’t want to change your design and want to exist design than copy your old CSS and add into a new style.css file. The beginning of your CSS file adds the below code.
<pre>
/*
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.
*/
</pre>
4. Cut and Paste your Current HTML
Go with your index.html file, copy all content above the opening div class=” main” tag from index.html file and paste it on your header.php file and save the header.php file.
Copy aside class=” sidebar” complete element from your index.html and paste it on sidebar.php file and save sidebar.php file.
Copy every content after the sidebar class and paste it on your footer.php file and save the footer.php file.
Copy all remaining content from your index.html file and paste it into your index.php file and save index.php file but don’t close it. keep it open.
Now close your index.html file.
5. index.php Finalization
At the very top of your index.php file, place the following line of php.
<pre> <?php get_header(); ?> </pre>
Then, at the very bottom of your index.php file, place these lines of php.
<pre>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
</pre>
Now, we need to add some basic php code to display content to visitors. So, adding the below code within the content section to your new index.php file
<pre>
<?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><!–end post header–>
<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>
<!–end entry–>
<div class=”post-footer”>
<div class=”comments”><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div>
</div><!–end post footer–>
</div><!–end post–>
<?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><!–end navigation–>
<?php else : ?>
<?php endif; ?>
</pre>
Save your index.php and close. Your theme is ready.
6. Upload your new theme
Now you are going to access installed WordPress directory via FTP or CPanel. Place your theme folder inside yourprojectname/wp-content/themes/
Then navigate back to WP Admin > Appearance > Themes and your newly created theme should appear there. Go ahead and activate it!
See your new WordPress website is ready with old site content.
I hope this post is helpful for your business. If you have any query then contact our experienced WordPress developer at Lathiya Solutions, Surat.
