Simple Guide For Converting HTML To WordPress

We have come a long way from static websites without any interactive capabilities to the present day interfaces with rich features and enhanced user experience. Web development has also moved on and today even people with limited programming knowledge can build a website by using various available tools. WordPress is a gift not only for technologically-deficient people but also for programmers because of the utilities and conveniences it provides. A large number of website owners are converting HTML to WordPress Theme to take advantage of these characteristics of the platform and in this article, we will look at ways to do so.

Manual Conversion

It is done by creating your own custom theme by following the listed steps.

Step 1: Create A Theme and File Folder

A code editor is needed for the purpose for accessing the HTML as well as WordPress directory. Create a folder on your computer and save it at an easily accessible location. Open the code editor and create the following files, namely :

WordPress

– style.css

– index.php

– header.php

– sidebar.php

– footer.php

Step 2: Copy Existing CSS To WordPress Style Sheet

Put the code given below in the style.css file and after this paste the CSS of your old website.

  1. /*
  2. Theme Name: My Theme
  3. Theme URI: http://wordpress.org/themes/mytheme
  4. Author: my name
  5. Author URI: http://mysite.com/
  6. Description: My theme for conversion.
  7. Version: 1.0
  8. License: GNU General Public License v2
  9. License URI: http://gnu.org/licenses
  10. Tags:
  11. Text Domain: my theme
  12. */

Let’s understand what the entries are about in this code. The theme name can be any term chosen by you and most people use the same name as that of their folder. The theme URI is where the theme publishers put their website address and therefore you should put your address here. Insert a name of your choice in the author field and similarly put your homepage in the author URI. The description is optional and the license, its URI, and tags are only needed if like WordPress website design firms you are planning to upload your creation to the WordPress theme directory.

Step 3 : Separating HTML

The code of the old website has to be divided into separate parts as the open source framework uses PHP for accessing information from the database. The modifications will be made to the header, sidebar and footer segments of the index.html file and then cutting the parts and pasting them into the relevant folder.

Select the section of the code from its beginning to the part where you see

<main> or <div class=”main”>

and after inserting

<?php wp_head> before </head>

cut and paste it into the header.php folder created in the first step. Now look for the section beginning and ending with <aside> and after cutting, paste it into the sidebar.php folder. You have to now select everything after the sidebar section and paste it in the footer.php file but after the line

<?php wp_footer();?>

has been added before </body>.

Turn your attention back to the header part now and look for the line

<link rel= “stylesheet” href=“style.css”>

and replace it with

<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/style.css”

type=”text/css” media=”all” />

This completes all the changes required to be made to the header section and now open the index.php file and put the following lines of code there :

  1. <?php get_header(); ?>
  2. <?php get_sidebar(); ?>
  3. <?php get_footer(); ?>

The gap between the header and sidebar part will be filled by this code for displaying the content on the website.

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

<article class=”<?php post_class(); ?>” id=”post-<?php the_ID(); ?>”>

<h2 class=”entry-title”><?php the_title(); ?></h2>

<?php if ( !is_page() ):?>

<section class=”entry-meta”>

<p>Posted on <?php the_date();?> by <?php the_author();?></p>

</section>

<?php endif; ?>

<section class=”entry-content”>

<?php the_content(); ?>

</section>

<section class=”entry-meta”><?php if ( count( get_the_category() ) ) : ?>

<span class=”category-links”>

Posted under: <?php echo get_the_category_list( ‘, ‘ ); ?>

</span>

<?php endif; ?></section>

</article>

<?php endwhile; ?>

Save the index.php file. Your theme is now ready for deployment.

WordPress

Step 4: Upload Theme

This is the final step of converting HTML to WordPress and for this, the whole theme folder has to be uploaded to the framework. You must have installed the WordPress package on your system and simply go to the local directory and find wp-content/themes. Zip your theme folder and upload it here and then go to WP Admin > Appearance > Themes and activate it to complete the process of conversion.

Convert Using WordPress Themes

The beauty of this versatile framework is that because of its open source character, so many developers keep adding new themes and plugins for various functionalities. Choose one that you think is the most appropriate for you from numerous options- free or paid, and download the file package and install it and activate it as explained in the last step of the above section. One can use a plugin for migrating the content of the old website to the new one.

Conclusion

The flexibility and convenience provided by the framework are the fundamental reasons behind the widespread popularity that it enjoys and by converting HTML to WordPress, owners want to provide their website users with a multifaceted and attractive web interface.

About Author:

Linda Waster has been working as a professional Web Developer at HIreWPGeeks Ltd, Which provides PSD to WordPress theme customization service within the given time frame. She loves to share excellent stuff on WordPress. You can also follow her company on various social media platforms such as Twitter, Facebook, and GooglePlus.