How to convert HTML to WordPress

The purpose of this experiment is to convert an HTML template into the ready to use WordPress theme.

To do this, we will take a simple HTML template and try to transfer it to WordPress from scratch.

Why would you do that? There are several reasons.

  1. understand how the WordPress theme mechanism works in WordPress;
  2. learn to create your own themes from scratch;
  3. learn to convert HTML templates, and even transfer an entire HTML site to WordPress.

Preparation stage

Before starting to convert the HTML template to WordPress, you need to prepare the working environment.

The server does not matter. You can use LAMP (WAMP) or ready stacks like Bitnami, Vagrant, or Local for WordPress.

The HTML template after a quick search, I chose this one – Simple Factorial. The design is quite simple, but for the experiment, it will work. There is a header, footer, menu, sidebar, and a list of posts.

Simple-Factorial-by-Bryant-Smith.png

Prepare source template files for porting to WordPress

Create a new folder in the WordPress theme directory. Unpack and copy there the Simple Factorial template files.

The first thing I did was moving the images requested from the stylesheet file to a separate img/ folder so that they were not in the root theme directory. Then I made all corresponding changes to the style.css file.

kak-natyanut-html-shablon-na-wordpress-1-shag-sozdanie-papki-temy.png

Connect to and activate the theme in the WordPress Dashboard

For the theme to work and appear in the WordPress admin, write the following lines at the top of the Style.css file:

/*
Theme Name: Simple Factorial
Theme URI: //www.quackit.com/html/templates/download/bryantsmith/SimpleFactorial/
Author: Bryant Smith
Author URI: //www.quackit.com/
Description: Simple Factorial is the same as Simple * Simple-1 * Simple-2 * Simple-3 ; or in other words, a whole lot of simple. This template is meant to be really simple to use, and really simple to naviagate. It should also do well with search engines for that reason.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: //www.gnu.org/licenses/gpl-2.0.html
*/

Create file header.php

Copy the following code from index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Simple Factorial by Bryant Smith</title>
</head>

Note that I did not copy the menu code block, although it will also be in the header, and we will add a fully working dynamic menu later.

kak-natyanut-html-shablon-na-wordpress-shag-2-zagolovok-sajta.png

Now we’re going to adapt header.php. Here’s the code, and I’ll explain how it works.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="//www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
 <title><?php bloginfo('name'); ?></title>
 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
 <?php wp_head(); ?>
 </head>
  • adds a dynamic tag title, and a link to a stylesheet file.
<?php bloginfo('stylesheet_url'); ?>
  • adds a stylesheet link
<title><?php bloginfo('name'); ?></title>
  • dynamically forms title from site name
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
  • adds link to xmlrpc.php
<?php wp_head(); ?>
  • a very important function wp_head(), which make plugins works, enqueue styles and scripts to the site pages.

Create file footer.php

Copy the following piece of code:

<div id="footer"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> by <a href="#">My Site</a>
</div>
 
 
<?php wp_footer(); ?>
</body>
</html>
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
  • adds a link with site name
<?php wp_footer(); ?>
  • wordpess hook , similar to wp_head(), for the footer.

Create index.php file, the main template for site pages

Lets include our header and footer templates into it.

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

Copy the remaining contents from the index.html file and insert in index.php between the head and footer tags.

kak-natyanut-html-shablon-na-wordpress-shag-5-sozdanie-fajla-index.png

Now, one more step, move the menu code to header.php. The file with the changes looks like this.

kak-natyanut-html-shablon-na-wordpress-perenos-menyu-v-fajl-header.png

At this stage, you can activate the theme and see how it looks.

kak-natyanut-html-shablon-na-wordpress-SHag-5-3-Vid-sajta.png

Our template is displayed.  For now, the content and sidebar are in static form. We will make them dynamic.

Display the posts dynamically

Here is the code for dynamic display of posts in the main content, which will be explained below.

<div id="contentColumn">
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  
 
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
 
 
 
 
<div class="divider"></div>
 
 
 <?php the_content(); ?>
 <?php endwhile; else : ?>
  
 
<?php _e( 'Sorry, no posts were found.' ); ?>
 
 <?php endif; ?>
 </div>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>;
  • if records are found, and while they exist, extract them from the database
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  • display a post title with permalink in h2 tag
<?php the_content(); ?>
  • display the post content
<?php endwhile; else : ?>
  • end the loop, or
<?php _e( 'Sorry, no posts were found.' ); ?>
  • if no records found, output informative message

Note that I keep the initial layout and template classes to ensure that the styles are correctly applied.

To make sure the theme works correctly, I create a few posts in the WordPress dashboard.

Let’s create the sidebar area for widgets

Create a file with the name sidebar.php, move to it the entire code, which displays the template’s sidebar column.

Instead we run this php function:

<?php get_sidebar(); ?>
kak-natyanut-html-shablon-na-wordpress-sozdanie-sajdbara.png

Save the file, open the page to view changes. The sidebar is still static; it just comes out of the template.

Register sidebar in functions.php

Functions.php allows you to add new functionality to WordPress, the same as plugins. It is in the root theme directory.

Create a file named functions.php, and put the following code in it.

if ( function_exists( 'register_sidebar' ) ) {
 register_sidebar( array (
 'name' => __( 'Primary Sidebar', 'primary-sidebar' ),
 'id' => 'primary-widget-area',
 'description' => __( 'The primary widget area', 'dir' ),
 'before_widget' => '
<div class="subHeader">',
 'after_widget' => '</div>
 
',
 'before_title' => '
<h3>',
 'after_title' => '</h3>
 
', )
 );
 }

If a function exists, register the sidebar, we give it the sidebar’s name, its ID, description, and HTML tags that surround its elements. Note the class of the wrapping block subHeader taken from the Simple Factorial template to apply the styles correctly.

Let’s open the page and see what happens after adding a few widgets to the Primary Sidebar area.

kak-natyanut-html-shablon-na-wordpress-dinamicheskij-sajdbar.png

Great. Now let’s figure out the menu.

Register dynamic menu in functions.php

Add menu support to functions.php file using standard WordPress functions:

add_theme_support('nav-menus'); if ( function_exists('register_nav_menus')) { register_nav_menus( array( 'main' => 'Main Nav' ) ); }

Open header.php file, replace static menu block with:

<?php wp_nav_menu( array('menu' => 'Main', 'container' => 'nav' )); ?>

The result should be this:

kak-natyanut-html-shablon-na-wordpress-dinamicheskoe-menyu.png

You can already create pages in WordPress and add them to the menu in the dashboard.

At this step, we have converted the entire main page to the template. We have added a dynamic sidebar and menu. But our theme is not yet ready. We will also create and configure the following templates.

  • single.php – template for a post type content;
  • page.php – template for a page type content;
  • 404.php – template for the 404;
  • searchform.php – template for the search results.

It will be easier to create them as we already have a homepage. But there are some details to look at.

This post came big, so see the next part.

Share the article if you find it useful and leave comments.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x
Scroll to Top