Convert HTML to WordPress theme

Convert HTML to WordPress theme without losing your design and its content, you need to just create custom WordPress theme. In this process, you have to copy some basic things and create some files and folders, finally upload the final version.

See below are 5 steps to convert HTML to WordPress theme

Step 1: Create a Theme Folder and important Files

Create a new folder to keep your theme files. You can name the theme according to your choice. Next open your HTML & CSS editor, create below files and save them all in created theme folder. Open all the files in editor so you can edit those whenever needed.

• style.css
• index.php
• header.php
• sidebar.php
• footer.php

Step 2: Copy your Exiting CSS into new Stylesheet

If you’re looking to use your design, copy your HTML website CSS and add into new style.css file. The beginning of your file, add the following to the top of your theme css file.

/*
Theme Name: Replace with your theme’s name
Theme URI: Your theme’s URI
Description: A brief description.
Version: 1.0
*/

Step 3: Cut and Paste all HTML Code from index.html

In your header.php file copy and paste all HTML from your current index.html site. Copy all HTML code of which are above the opening div class=”main” tag and save header.php file and then close. Add the beginning of file:

<?php
/**
* The header for our theme.
*
* Displays all of the  section and everything up till <div id="content">
*
* @package Simple Blog Theme
*/
?>

2nd step is pick the complete aside class=”sidebar” tag from your index.html file. Copy and paste all HTML into previously created sidebar.php file and save then close the file. Add the beginning of file:

<?php
/**
* The sidebar containing the main widget area.
*
* @package Simple Blog Theme
*/
?>

3rd step, copy and paste all HTML after your sidebar class from index.html file into above created footer.php file and save then close the file.

<?php
/**
* The template for displaying the footer.
*
*Contains the closing of the #content div and all content after
*
* @package Simple Blog Theme
*/
?>

And last, select all remaining HTML code from your index.html file, copy and paste those into your index.php file. Remember only save the file and keep it open.

<?php
/**
* The main template file
* It puts together the home page if no home.php file exists.
*
* @package Simple Blog Theme
*/
?>

Step 4: Finalize index.php file

In this step, we call all the section which we have added in other files, add inside index.php file through WordPress hook codes.

Place the below code at top of your index.php file.

<?php get_header(); ?>

Place below codes at the bottom of your index.php file.

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Now, we need to add few basic php code to display your content to visitors. So, adding the below php code to index.php file.

<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
<h2><a href="<?php echo the_permalink(); ?>"><?php the_title(); ?></a></h2>
<em>Published on <?php the_time(); ?> by <?php the_author(); ?></em>
<?php the_content(); ?>

<?php comments_template(); ?>
<?php
endwhile;
else :
?>
<h2>No Posts Found</h2>
<p>Sorry, there are no posts yet.</p>
<?php
endif;
?>

Now save and close your index.php file.

How to make WordPress theme

Create some necessary files for convert HTML to WordPress theme:

• functions.php
• comments.php
• page.php
• single.php
• search.php
• 404.php

Function.php

The functions.php file is a file where you can put theme related custom functions which can be called by any of the other pages in the wordpress blog. You can put everything you want in here and apply hooks to make sure these functions run at the right time.

Comments.php

Comments.php file will be where you put the comments form for the current post. Comment form show on the single.php file.

Page.php

The page.php file use for display your page title, content, images.

Single.php

The single.php file is the template page to be used on single posts. This is where you will display your single post title, content, images and where the user will write comments.

Search.php

The search file display results when a search is performed on the site.

404.php

A 404 error is display when the server could not find the page that was requested by the client.

Important Note during create WordPress theme:

wp_head: Must be added just before the closing tag in header.php.
wp_footer: Must be added just before the closing tag in footer.php

Here’s an approximation look like with these tags added:

Step 5: Upload your theme

Now open your installed WordPress directory and add your theme folder into /wp-content/themes/. New installed themes will appear in WP Admin > Appearance > Themes. Just activate it. Post your site’s content under Posts > New Post.

You can also upload your theme through WP Admin Dashboard. Appearance > Themes > Add New > Upload. At the end activate it.