How to Convert HTML to WordPress – Simplified Tutorial

Nearly 75 million websites across the globe use WordPress.  It is the most popular blog site to use and has evolved into something so much greater and more sophisticated than a blogging platform.  Some famous users of WordPress include The New York Times and CNN.  The reason why WordPress is so popular is it’s versatile, capable themes.  With basic knowledge of HTML as well as CSS, you have the ability to make a spectacular WordPress theme from an existing HTML file.  Searching for a tutorial on how to do this is difficult.  Software is constantly upgrading, and instructions online are often incomplete or hard to follow.  But don’t worry; this tutorial gives you the basics of how to convert a static HTML website to WordPress theme.

Here are the tutorial specifics:

  • This tutorial is current as of July, 2017.
  • Instructions are compatible with WordPress 3.8.1
  • The user needs a basic understanding of HTML and CSS and any PHP knowledge will be helpful.
  • The tutorial assumes you already have a website written in HTML that is ready to be converted.

Overview of WordPress: How It Works

The way WordPress works is pretty straight forward.  However, to a beginner, the process can be confusing.  Basically, WordPress uses a function that retrieves information from a database and displays it.  This is how your content is viewed on your blog.  MySQL is the database backend WordPress uses.  PHP is the server that scripts the language.  PHP substitutes different parts of your code or content making it easier to edit.

Consider an analogy to help you better understand how WordPress uses PHP and MySQL.  Imagine that you are in a shoe store.  There is a very large number of shoe types to choose from, and you have to see the shoe in your size. Rather than going to the back of the store and searching an extensive inventory for what you want, you simply ask a shoe salesperson to retrieve your desired selection in the size you want. This is how WordPress works. PHP is the shoe salesperson and MySQL is the extensive inventory.

This is how PHP lessens the burden of editing. It retrieves the specific part that you need to work on. For example, go to your /wp-content/themes/twentythirteen/ directory in WordPress. Open your header.php file, and scroll through the code. Notice that there are several PHP calls throughout the code.  These start with <?php and end with ?>; . For instance:

<?php get_header(); ?>

This PHP line calls for the content that is located in the website’s header.

Now that you have a general idea of how WordPress works, you can get started.

How to Convert HTML to a WordPress Theme

To convert HTML to a WordPress theme from scratch, the WordPress default theme called TwentyThirteen is used. You need a copy of the HTML or CSS file that you want to convert to WordPress. You have several options in regards to what program to use to edit your file. Text editors, such as NotePad or NotePad++, work fine. An alternative is to use a Web editor. Dreamweaver is a good choice.

Step 1: Create the necessary files and folders

Start out by creating a new folder on you computer’s desktop. Call the folder whatever you want. A good idea is to use an easy to remember name, such as “your name choice”WPTheme, so that you don’t forget where the folder is or confuse it for a similarly named folder.

Next, create two files, and add them to your folder. Name the first file style.css, and name the other file index.php. Save these files as “All Files” if you are using NotePad.

To help WordPress recognize these files, fill out a comment block for the style.css file with this information:


Theme Name:
Theme URI:
Description:
Version:
Author:
Author URI:

Enclose this data with /*...*/ so that it looks like this:

/*
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
*/

Now check to see if the TwentyThirteen default theme is your active theme in WordPress. Next, go to Appearance and then Editor on the admin panel. Open the style.css file. Copy the content from this WordPress style.css file, and past it into the new style.css file you created on your desktop.

Step 2: Set up the PHP files

Take a look at your WordPress theme editor. Notice how each theme is separated into different parts: the header, the sidebar, the main index, the template and the footer. You are going to use these same components to build your new WordPress theme. This is accomplished by first dividing these parts into separate PHP files.

Take your HTML code, and divide it into these parts using div tags: header, sidebar, main content area and footer. Next, create new files in your theme folder called header.php, sidebar.php and footer.php. There is a special Loop function that is used to fetch content, so don’t worry about creating a PHP file for that. Copy the sets of code of each HTML section, and place them in their corresponding PHP files. Save your work.

Go and log in to your WordPress admin panel. Open the theme editor. Open the header.php file; copy the PHP code and past it into your new header.php file. When you do this, past above the HTML code. Follow suite for the sidebar.php and footer.php files. Save your work.

Step 3: Use PHP to fetch page elements

Open the index.php file in your theme folder you created earlier. Add the following PHP code to the top of the file. It needs to go just after the tag.

<?php get_header(); ?>

Next, add the following PHP code lines to the bottom of your index.php file. The code lines go just before the </body>tag. Save your work.

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Congratulations!  You have created your own WordPress theme, but you are not quite done yet. Your theme is finished, but it is blank. You need to now add content to your theme. Also, what is good about this step in the process is that you have your PHP codes set up to retrieve data for you. Three little command lines are telling WordPress to display your entire page. Another cool feature is that you now do not have to go searching through your entire index.php file just to edit one section. If you want to edit you header, just edit you header.php file. This is the same for your sidebar.php and footer.php files as well.

Step 4: Add your content using the Loop function

To add content to your theme, you need to use WordPress’ Loop function. “The Loop,”
as it is called, works like a PHP code and retrieves your content from a database to display it in your theme. You just need to install the Loop function so that you can continually add content to your theme as you blog.

To install the Loop function, copy the code below into your index.php file. The code needs to go in the div area where your main content is located. Make sure you copy all of the code.


<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<div>
<div><?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><?php the_author(); ?></div>
</div><!–end post header–>
<div>
<?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>
<div><?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>
<div><?php next_posts_link( ‘Older Entries’ ); ?></div>
<div><?php previous_posts_link( ‘Newer Entries’ ); ?></div>
</div><!–end navigation–>
<?php else : ?>
<?php endif; ?>

Step 5: Activate your theme

To activate your theme, go to a FTP client and log in to your website directory. Go to wp-content and then to the themes folder. Upload your theme folder to this folder. Log in to the WordPress admin panel, and go to Appearance and then the Themes tab. Your theme should be visible here. Click on Activate, and you are done.

Overall, this tutorial should assist you in the process of converting your website to WordPress, especially if you know HTML and CSS well.  You now understand the basics of how WordPress works using PHP and MySQL.  You have the ability to edit your website theme using separate PHP files as opposed to looking through your entire theme index.  You should even now understand what WordPress’s crazy Loop function does for you in regards to your content.  If you find that you need further help, online HTML and CSS tutorials are a good option.

Menu Title