How To Create A WordPress Theme From A HTML Template Part 1 – Introduction

This is the first part of a longer tutorial on how to create a WordPress Theme from a HTML Template. Just by following along with the steps in the next few parts, you will learn how to turn a HTML template into a fully functional WordPress theme.

But if you don’t know what you are working with, and all you do is copying and pasting bits of code you can’t differentiate, it is easy to make mistakes and exceedingly difficult to fix them by yourself.

For that reason, in this part we will talk about key parts of WordPress as a whole, and introduce the different working parts of a WordPress Theme.

Before you even get started reading through this introduction, ideally you would be familiar with HTML/CSS and at least have some basic PHP understanding.

The WordPress Loop

Let’s start out with the thing that powers all of WordPress: The WordPress loop, also known as just “The Loop”, is a block of PHP code used to display posts or pages in WordPress.

Using PHP’s alternative syntax, the loop looks like this:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts were found.' ); ?></p>
<?php endif; ?>

This the normal way of writing the loop these days. But when using the more old fashioned way of coding it out, the loop looks like this:

 <?php
 if ( have_posts() ) {
 while ( have_posts() ) {
 the_post();
 } // end while
 } // end if
 else {
 _e( 'Sorry, no posts were found.' );
 }
 ?>
 

The loops calls on pre-written PHP functions within WordPress that do certain things.

Have posts pings the relevant database, and asks it if there is any content available. Because it uses a PHP if clause, if there is content available, it moves on to the next step, whereas if there is no content available nothing happens, it plays through the else code instead. In this case, it simply echoes out the text “Sorry, no posts were found.”

Using a while clause in PHP creates a loop that keeps doing something as long as the condition you specified is true. In this case, the condition we have specified is “have_posts”, meaning that as long as there are posts in the database, it will keep looping through the code within the clause.

the_post, calls another PHP function within WordPress, that simply echoes out the relevant post from the database. Because the_post is inside the while loop, it will keep echoing out posts until no more posts are found for the query made by the have_posts function.

You can read more about the loop here, and see more complicated examples of what is possible to do with it.

The Core Files Of A WordPress Theme

Next let’s take a look at the absolutely required core files of standalone WordPress Theme. When you make a child theme, you only need style.css and functions.php. When you make a completely new theme, in theory you just need one more file, indexx.php.

Index.php – Complete With The Loop

This is the default fallback page for all possible pages a person might visit on your WordPress site. If there are no page.php or post.php files available, this is the template it will use to serve up the content on a url that is visited.

Most themes however, make ample use of many templates within in the WordPress template hieararchy.

Functions.php File

This is where you will pull in necessary outside scripts, and register functionality that exists in your WordPress theme. For example, if you want to work with the WordPress Customizer, you need to do that from within the functions.php file, as well as your actual template files.

Later in the series, you will see exactly how to add “header image”, and other customizable aspects to your WordPress theme, and make full use of the WP Customizer as a developer.

Style.css

WordPress templates like most modern websites rely heavily on CSS to control the and result of their look. And in this file is where the CSS in your theme will be. (If you don’t know what CSS is, you should probably at least go through the HTML/CSS course on Code Academy before continuing with this guide.)

Even if you prefer to use SASS, you will still need to compile it into a regular style.css file before you can work.

Basic Site Architechture

Rather than building each different page template from scratch, WordPress themes typically work with different building block templates, that you piece together and then build on top of. The bare minimum of these is the header.php, sidebar.php, and footer.php files. The thinking behind this is that these parts require fairly substantial bits of code, and are likely to be included in almost every page template. You also get very cleanly separated code, so that it is easier to edit down the road.

All you need to do to call in a template is use the “get_” function. If you want to call in the sidebar.php file in a certain place in your page template, all you need to do is type this snippet:

<?php get_sidebar; ?>

You can also create multiple sidebar, header or footer templates with different names. But make sure to follow this naming convention “header-ADDEDWORD.php”. For example, you might create a “header-fullwidth.php” to show a different header on full width pages. Calling this file would look like this:

<?php get_header('fullwidth'); ?>

But many modern themes go a lot deeper than this, and even have different template-parts, for their different templates for different parts of the page. The newest official WordPress theme, Twenty Seveteen, for example, does this.

This means that instead of calling the WordPress functions for sidebar and content in the actual template files, they are called in the different part files. Then you simply call those part files from your template files. Then finally call the templates into your different page templates.

You can read more about site architecture in WordPress here.

The Template Hierarchy

The template hierarchy refers to the way that WordPress decides which template to use to serve content on a certain permalink. Basically there are certain template files that WordPress prioritizes differently in different situations. Usually this is determined by which permalink the visitor is on and what content is supposed to be displayed.

As an example, to show the way the template hierarchy works:  If a visitor goes to the permalink of a single post, WP will first look for the single-post.php file. That’s the template file designated to showing standard single posts, so that has first priority.

If there is no single-post.php file, WordPress will look for a single.php file. That is the file used for displaying any kind of single post, custom or standard.

If there is no single.php file, it will look for a singular.php file. That is the file used for displaying any kind of single post or page.

Finally if there is no singular.php file, WP will default to the index.php file, which is the last resort used for displaying all content.

The process is the same no matter what post or page the visitor visits. For example, if a user visits the front page, it looks for a front page.php file. Failing that, if it is a single page displayed, it pulls in the relevant page template file. If posts are displayed it looks for the home.php file. Finally, if there is no home.php file, WP defaults to index.php again. I’m sure you’re starting to understand exactly why an index.php file is absolutely necessary.

You can see a full visual representation for how WP does this, over at wphierarchy.com.

Let’s Get Right Into It

Now that you are familiar with most of the basic working parts of a WordPress theme, let’s jump right in. Starting in the next part, we will create a very basic WordPress theme that uses all of the CSS styles of the original HTML template.