How To Convert an XHTML Website Template into a WordPress Theme

Converting an XHTML or HTML template into a WordPress theme is still a common task for developers, though the process has evolved with WordPress updates. This guide will walk you through modern best practices for converting a static HTML template into a fully functioning WordPress theme, considering WordPress 6.x and beyond.

What You Need

• An HTML (XHTML) web template
• A WordPress installation
• A text editor (e.g., Visual Studio Code or Sublime Text)
• An FTP client (like FileZilla)

The process involves splitting your HTML file into modular PHP templates, enabling WordPress to dynamically pull content from the database. This guide will cover the key steps for building a functional theme from your HTML template.

Step 1: Setting Up Your Theme Files

1. Create a Theme Folder

First, navigate to the wp-content/themes/ directory of your WordPress installation. Create a new folder named after your theme, such as my-theme. Within this folder, you’ll need the following files to get started:

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

Each file serves a distinct purpose in WordPress’ theme hierarchy. The index.php file will control the layout for most pages, while header.php and footer.php manage the header and footer sections, respectively.

2. Add Basic Theme Information

In your style.css file, add the following commented code at the top to define your theme:

/*
Theme Name: My Custom Theme
Theme URI: http://example.com/my-theme
Author: Your Name
Description: A custom theme based on an HTML template.
Version: 1.0
*/

Step 2: Splitting the HTML File

To integrate your template into WordPress, split your HTML file into the appropriate PHP files:

1. Header File (header.php)

Open your HTML file and copy everything from the <!DOCTYPE> declaration down to the start of your main content area (usually marked by a <div> or <main> tag). Paste this into header.php. Be sure to include the WordPress hook <?php wp_head(); ?> just before the closing </head> tag. This hook is essential for loading necessary WordPress styles and scripts.

2. Footer File (footer.php)

Next, copy the footer section (from the closing </main> or </div> to the end of the HTML document) and paste it into footer.php. Don’t forget to add the <?php wp_footer(); ?> call before the closing </body> tag. This enables plugin functionality that may be critical to your site.

3. Main Content File (index.php)

The remaining part of your HTML file, containing the main content, goes into index.php. You’ll need to replace static content with dynamic WordPress code using The Loop.

Adding The WordPress Loop

The WordPress loop is what handles all of your websites content. Its main components are:

• The Title
• The Content

The Loop can actually do a lot of things, but to keep things simple, those are the primary three things you’ll usually need access to. First you will need to identify where your content starts/repeats (if it repeats). The easiest way to do this is to look for your content’s header and begin The Loop there.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <h2><?php the_title(); ?></h2>
  <div><?php the_content(); ?></div>
<?php endwhile; endif; ?>

The Loop will usually end immediately after your content unless you are displaying extra information below your entries. You will also need to identify where your content begins and ends.

The Loop Code

Beginning:

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

End:

<?php endwhile; endif; ?>

Template Tags Within The Loop

The Title

<?php the_title(); ?>

The Permalink

<?php the_permalink() ?>

The Content

<?php the_content('<p>Read more</p>'); ?>

Step 4: Add Navigation Menus and Widgets

To make your theme more dynamic, you’ll want to add support for navigation menus and widgets:

1. Register Navigation Menu

In functions.php, add this code to enable WordPress menus:

function my_theme_setup() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-theme'),
    ));
}
add_action('after_setup_theme', 'my_theme_setup');

Then, in header.php, replace your static HTML navigation with:

<?php wp_nav_menu(array('theme_location' => 'primary')); ?>

Step 5: Testing and Activating the Theme

Now all you have to do is upload your theme folder which should now consist of:

• An index.php file with custom code
• A CSS file with header information about the theme
• An images folder with all of your images

If all goes accordingly you should have a functional WordPress theme that allows you to add new pages and posts as well as use most popular WordPress plugins.

It is important to note that you will not be able to add widgets to your sidebar and people will not be able to comment on posts. There may also be some other limitations due to the themes simplicity.

More Resources

• Theme Development
• Stepping Into Templates